Jun 04 2008
Different Header Images on Different Pages Print
Wednesday, 04 June 2008

Header Image ModuleThis is a straight-forward tutorial explaining how you can place different header or logo images on different pages of your site. For example, your sports site may need a baseball player on top of the baseball section, a golf player in the golf section and so on. 

How Not to Do It

Create a different template for each page. Believe me, I've seen this done with over 30 header image, which means over 30 extra templates.

How To Do It

  1. Make sure all your images are edited and are the correct size. Make sure they are all the same type (all .jpg,  .png or .gif).

  2. Download the Header Image Module which we've blogged about before .

  3. Install it and place it in the area of your site where you want the header to appear. If there isn't a module position available where you want the images, you will need to edit your template's index.php file.

  4. Go to your Menu >> Main Menu. Write down the Itemid of each link. This should be easy to find without opening up each link. Its not neccessary, but if you want to know more about Itemids, click here.

    Joomla Menu Itemids

  5. Rename each image so that it has the Itemid of the page it will appear on. In the above example, we'd create 1.jpg, 6.jpg, 2.jpg and 9.jpg.

  6. Upload these images to a folder on your website. A good choice would be something like /images/stories/header/ so you can upload images via Joomla's Media Manager.

  7. Go to Modules >> Header Image and make your settings correct:

    Header Image Module Instructions

Notes

  • Works on both Joomla 1.0 and 1.5.
  • May require a bit of bug-shooting if you're using an SEF URL extension, because of how they handle Itemids.
Comments (14)Add Comment
...
written by Good Web Practices, June 04, 2008
Great review Steve! The header image module is definately a great module and this is a fantastic how to! smilies/smiley.gif
...
written by Copes Flavio, June 04, 2008
Definitely agree with 'Good web practices', this is a great howto, thanks for sharing those tips smilies/smiley.gif
...
written by Cory, June 05, 2008
This sounds great if you have a small number of menu items. If you have a large number of items, that makes it a bit more difficult to work with. I agree that separate templates are not the way to go, but you could just use a separate HTML module for each header, and publish each module to the appropriate pages.

I like the slideshow aspect of this module, though. That is something I need to look into.

Thanks for sharing!
...
written by Ansiklopedi, June 05, 2008
i have tried that module for my J1.0.x web site with opensef but i did not get success smilies/sad.gif
...
written by ILJ, June 09, 2008
Hi Steve,

is there a feature that upload few images for a content id to make as slideshow? single static image too bored. smilies/cheesy.gif
...
written by ILJ, June 09, 2008
sorry i retract my post.
never see carefull.
excellent extension. but cost eoru40 smilies/wink.gif
...
written by ILJ, June 09, 2008
Steve,

Excellent article. going to try on this.
the print screen is totally diff from what i see. is that for J1.5 ?.

...
written by ILJ, June 09, 2008
What is the thing need to do if using SEF extensions? smilies/shocked.gif
it always load default image now. smilies/sad.gif

...
written by ILJ, June 13, 2008
Check out Ninjoomla Module .

http://www.ninjoomla.com/demo/index.php?option=com_content&task=view&id=18&Itemid=36

...
written by ILJ, June 13, 2008
Sorry it shld be this link.Pls delete that.

http://www.ninjoomla.com/index.php?option=com_content&task=view&id=102&Itemid=44
...
written by Manikandan, June 19, 2008
Iam new for joomla..
your's query for header prob,if i want to change the content's background image for separate page means how its possible?

Plz send me the rply...
...
written by ILJ, June 19, 2008
@Mani

This commercial module is only for changing images within the modules, not background.
For background, Ninjoomla has some modules.

...
written by samara simha, July 01, 2008
hi all good morning every body
...
written by Sulakshana, October 07, 2008
Hi,
The settings shown here are not looking in Joomla 1.5.7
So where can I set different image for different page.
Please guide me.

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
Joomla SEO Club and Book Logo
Search
Login
Blog Details

Creative Commons License All blog articles are licensed under a Creative Commons Attribution 3.0 United States License.
Top Comment Posters
Good Web Practices
(141 comments)
Brian Teeman
(105 comments)
Klaus
(83 comments)
türkçe sözlük
(52 comments)
Cory Webb
(49 comments)
Hummerbie
(42 comments)
Amy Stephen
(36 comments)
guido
(36 comments)
ILJ
(35 comments)
Yannick Gaultier
(33 comments)
Blog Categories
Accessibility
Affiliates
Alledia News
Analytics
Book Reviews
Business
Design
Domain Names
Domain Tips & Tricks
Drupal
E-Commerce
Extensions of the Month
General CMS Issues
Interviews
Joomla Affiliates
Joomla 1.5
Joomla Blogs
Joomla Hacks
Joomla Hosting
Joomla News
Joomla People
Joomla SEO eBook
Joomla SEO Rankings
Joomla Sites
Joomla South East
Joomla Templates
Joomla Tips & Tricks
Joomla URLs
Open Questions
PHP
Pay Per Click
Product Reviews
Rants
Scams
Recommended Sites
Search Engine Optimization
Security
SEO
SEO Club
SEO Competition
Site Reviews
Template Clubs
Yellow Pages
Virtuemart
Vlogs
Wordpress
right