Assign a different header image per page
Previous article Next articleA 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:
<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.
In your stylesheet you can attach an image to the classes:
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:
<img src="{uploads_url}/images/header/{page_image}" alt="foo" />
</div>
Or with a default image, i.e. "default.jpg":
{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:
{content_image block='header_image' label='Header Image'}
</div>
Or with a default image, i.e. "default.jpg":
{content_image block='header_image' default='default.jpg' label='Header Image'}
</div>
Comment Form
4 Comments
@ Serkan Erturk
Store the images in a folder of the CMSMS Gallery module.
You can assign them as header images for separate pages.
Add the Gallery tag of that folder in a content page and you also have a photo album with all these photo's
I think it is as simple as that.
Very good , there comes a question, think that i have fifteen pages of products and i assign an image for each page, and i want to show them as a grid at the top level of the products automaticlly, how do i achieve it ?
Thanks for your reply, Natalia
Your question is off-topic in this post...
You better ask it in the CMSMS Modules and Add-Ons forumboard:
http://forum.cmsmadesimple.org/viewforum.php?f=7
Thanks a lot for this helpful material! It works just great (I choose the second one).
But I found this tip by the searching on the other question… and there is no any appropriate answer nor at forums or at sites yet...
So, maybe you know the way for adding link to CGBlog's category at the summary and full entries view?... I think it has to be a default option, but It's not...
I tryed all variants that could imagine myself or read on web, but nothing happens... even if I get the link it always blank...
My CMSMS version - 1.11.7