A recurring question at the CMS Made Simple™ forum is how to show a different header image for each website page. In this article I will show some examples how this can be done. Choose the one that best suits your purpose.

  How to use

 Method 1

Each CMSMS page has its own page alias, you can use {$page_alias} to show it. When you create an image - with the page alias as filename - for every page of your website, you can use it to change your header image like this:

A disadvantage is you can't set a default image, so don't forget to create a new image when you make a new page.

 Method 2

Similar method as #1, but now used in combination with a stylesheet. An avantage is you can use the same image for multiple pages.

In your stylesheet you can attach an image to the classes:

 Method 3

In this method I use the CMSMS core {page_image} tag.
This tag returns the content of the Image field you will find in the options tab of the page editor. This is a dropdown containing the images in the selected folder. The user can choose an image for each page.

In this example I have used the folder uploads/images/header.
Go to Global Settings in the Admin Panel and open the tab Content Edit Settings.
In the field Path for image field you need to fill in the name of the folder containing the header images: "header".

If you want to show the Image field in the first tab of the page editor, select Image in the Basic Properties field of the same tab.

In your HTML-template you can use:

Or with a default image, i.e. "default.jpg":

 Method 4

In this example we create a new content block in your page editor, containing a dropdown field.

Again I have used here the folder uploads/images/header.
Go to Global Settings in the Admin Panel and open the tab Content Editing Settings.
In the field Path for {content_image} tag you need to fill in the name of the folder containing the header images: "images/header".

In your HTML-template you can use:

Or with a default image, i.e. "default.jpg":

  4 Comments