Home / Design / Different Header Images on Different Pages 
Design
Jun
04
2008
Different Header Images on Different Pages

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.
itemid

  1. 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.

  2. 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.

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

    headerimageguide

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  

 
#1 David Towers 2008-06-04 08:50
Great review Steve! The header image module is definately a great module and this is a fantastic how to! :-)
Quote
 
 
#2 Copes Flavio 2008-06-04 10:00
Definitely agree with 'Good web practices', this is a great howto, thanks for sharing those tips :-)
Quote
 
 
#3 Cory Webb 2008-06-05 09:29
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!
Quote
 
 
#4 Ulas ALKAN 2008-06-05 19:19
i have tried that module for my J1.0.x web site with opensef but i did not get success :sad:
Quote
 
 
#5 ILJ 2008-06-09 04:20
Hi Steve,

is there a feature that upload few images for a content id to make as slideshow? single static image too bored. :D
Quote
 
 
#6 ILJ 2008-06-09 04:22
sorry i retract my post.
never see carefull.
excellent extension. but cost eoru40 ;-)
Quote
 
 
#7 ILJ 2008-06-09 05:10
Steve,

Excellent article. going to try on this.
the print screen is totally diff from what i see. is that for J1.5 ?.
Quote
 
 
#8 ILJ 2008-06-09 05:27
What is the thing need to do if using SEF extensions? :o
it always load default image now. :sad:
Quote
 
 
#9 ILJ 2008-06-13 10:23
Check out Ninjoomla Module .

http://www.ninjoomla.com/demo/index.php?option=com_content&task=view&id=18&Itemid=36
Quote
 
 
#10 ILJ 2008-06-13 10:30
Sorry it shld be this link.Pls delete that.

http://www.ninjoomla.com/index.php?option=com_content&task=view&id=102&Itemid=44
Quote
 

Add comment


Security code
Refresh