MENU

Assign a different header image per page

  Previous article Next article  

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>


 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>


Buy Me A Coffee


  Show related articles:


  Comment Form

ReviewManager

Click here to open the form 

ReviewManager

  4 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Assign a different header image per page

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.6
  Last updated: 10-06-2019
  Comments: 4
  http://cms.ms/70fm


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!