Assign a different header image per page

  Previous article Next article  

Assign a different header image per page

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 04-01-2017
  Comments: 4

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:

<div id="header">
  <img src="{uploads_url}/images/header/{$page_alias}.jpg" alt="foo" />
</div>

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.

<div id="header" class="{$page_alias}"></div>

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

.home {
  background: url([[uploads_url]]/images/header/some-image.jpg) no-repeat;
}
.about-us,
.contact {
  background: url([[uploads_url]]/images/header/another-image.jpg) no-repeat;
}

 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:

<div id="header">
  <img src="{uploads_url}/images/header/{page_image}" alt="foo" />
</div>

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

<div id="header">
 {page_image assign='page_image'}
 <img src="{uploads_url}/images/header/{$page_image|default:'default.jpg'}" alt="foo" />
</div>

A2 Webhosting CMS Made Simple

 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:

<div id="header">
  {content_image block='header_image' label='Header Image'}
</div>

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

<div id="header">
  {content_image block='header_image' default='default.jpg' label='Header Image'}
</div>


A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  4 Comments

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Assign a different header image per page

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 04-01-2017
  Comments: 4

A2 Webhosting CMS Made Simple