By Hello, I would like to make it possible to have individual header images on each page of the site, whilst keeping the homepage header the same. I am not clear on what liquid statement would make this happen and where to place it. Any help would be much appreciated! Thank you.
Hello Jacob,
Below I have pasted an example of what something like that would look like. This example uses the header image in the theme to call out different images depending on the page slug using liquid conditional statements. Edits where made to the layout.html file.
{% if page.slug == 'home' %}
<a href="/"><img src="{{ site.header_image_url_960 }}"></a>
{% elsif page.slug == 'blog' %}
<a href="/"><img src="blogheader.png"></a>
{% else %}
<a href="/"><img src="restofsiteheader.png"></a>
{% endif %}
You can apply the same logic to your own theme, and just upload your homepage header under Websites > Settings > Header Image, which will display in your theme with {{ site.header_image_url_960 }}.
Thanks.
Showing 7 reactions
Sign in with
<a href=“/”><img src=“%7B%7B%20site.header_image_url_960%20%7D%7D”></a>
{% elsif page.slug == ‘petition’ }
<a href=“/”><img src=“petitionheader.png”></a>
{ else }
<a href=“/”><img src=“%7B%7B%20site.header_image_url_960%20%7D%7D”></a>
{ endif %}
Thanks for your response. I am trying to have a separate header for the petition page and I have inserted the following in the layout.html file (just under the tag but it still shows the main site header on all pages. Any idea what I have done wrong?:
{% if page.slug == ‘home’ }
<a href=“/”><img src=“%7B%7B%20site.header_image_url_960%20%7D%7D”></a>
{ elsif page.slug == ‘petition’ }
<a href=“/”><img src=“petitionheader.jpg”></a>
{ else }
<a href=“/”><img src=“%7B%7B%20site.header_image_url_960%20%7D%7D”></a>
{ endif %}
Thanks for your help!
Act for America
Greg Evers for Congress
Marston Digital Solutions
Certified Architect
Certified Expert
Can I assume a similar technique could be used for different background images as well?
Brad