Welcome to Alledia, the #1 Joomla Training Company

Would you like to learn Joomla? We're here to help you:

Professionally-produced training videos and tutorials.
Guaranteed same-day answers to all your Joomla questions.
No Joomla experience needed. We've taught 1000s of Joomla students.

Home / Design / Different Header Images on Different Pages

Jun

2008

Different Header Images on Different Pages

Header Image Module This 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

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

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

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.

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.

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.

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.

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

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.

Set as favorite

Free Weekly Joomla Tutorials

Your Comments (22)

David Towers

June 04, 2008

Great review Steve! The header image module is definately a great module and this is a fantastic how to!

Copes Flavio

June 04, 2008

Definitely agree with 'Good web practices', this is a great howto, thanks for sharing those tips

Cory Webb

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!

Ulas ALKAN

June 06, 2008

i have tried that module for my J1.0.x web site with opensef but i did not get success smilies/sad.gif

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

ILJ

June 09, 2008

sorry i retract my post.
never see carefull.
excellent extension. but cost eoru40 smilies/wink.gif

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

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

ILJ

June 13, 2008

Check out Ninjoomla Module .

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

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

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

ILJ

June 19, 2008

@Mani

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

samara simha

July 01, 2008

hi all good morning every body

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.

agung

January 11, 2009

nice tutorial. thank you.
in a wordpress site simply use the morning after template, and you'll see your header image rotate as well.

annak

March 29, 2009

sulakshana+manikandan asked for a solution to make a different BACKGROUND image for each page (...article). How could this be done? I'd like to know this myself too. (and I mean BAD)

ICE_BEAST

October 29, 2009

Umm. the header Image moduel download at the link. seems to have been removed!

dubai

November 01, 2009

Saved me a lot of hassle. Cheers
smilies/grin.gif

Chitwan

November 11, 2009

it works perfectly fine for the different articles. But if I have to show a same image for an article/s under a menu item (i.e. Product>>Prod1>>sub-prod1 and Product>>Prod1>>sub-prod2 should reflect same images) but the article id for both are different.
Secondly If I have a restricted page which requires a user to login. Then the login page does not show up the header image.

Please help me out in this regard.

mnm

November 25, 2009

Does this work also if I want to change my header image when I go to a catedory or product inside Virtuemart?

Hope someon can help ;o)

Ben Davis

December 22, 2009

The header image module has been unpublished. BOO!!!

Adamos

January 03, 2010

The link above doesn't work anymore - here is the 3rd party link to the header image module:

https://technology.pillwax.com/open-source-technology-mainmenu-3/joomla-extensions-commercial-unlimited/8