Different header image for each section in a Joomla blog

When I design something, I expect that the final product should look EXACTLY like I wanted it. So, when I started designing the Joomla version of this blog, I wanted a different header image for each of the sections. I made the assumption that there has to be an extension for this; it’s such a common and obvious add to a site.

The best pre-made solution I could find was the Header Image Module from PillWax, which although they advertise that you can “This is a flexible module able to display context related images, media or other files. Based on the context of the current displayed Joomla Content, that is the ID’s of section, category, item and content, the module selects a corresponding image or media file to display.” this functionality is only available if you purchase a commercial license (39 Euros). For this small personal site, I’m not interested in spending money (hours and hours of time, but not money).

Thankfully, I have experience with php and coding in general so I was able to figure out a free solution to this problem. For those of you are still looking for the answer, here is what I did to add the change the image at the top of each page without having to resort to creating individual templates.

  • create a directory that will store all of your header images (I just called mine “header” and used .png files for all the images)
    step 1
  • go to the section manager and find out the section ID for each of the sections of your site
    step 2
  • for each of the images in your directory, rename them so that the image name is the same as corresponding section number
    • if you want an image for your front page, you can name it anything you like (I called mine “frontpage”)

step 3

  • now add the following bit of code to your template where you want to display the header image:


$menus = &JSite::getMenu();

$currentMenu  = $menus->getActive();






echo “<img src=\”templates/frontpage/images/header/”.$secid.”.png\”>”;


echo “<img src=\”templates/frontpage/images/header/frontpage.png\”>”;



What the code does is grab the ID number of the current section and then checks whether there is a .png file in the directory that matches that section number. If it doesn’t find an image with that section number (like the front page — which isn’t a section), it displays a default “frontpage.png”.

– Amani


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s