# How do I give each page template a custom header image **URL:** \ **Category:** Using Ghost\ **Created:** [April 8, 2022, 4:58pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485 "2022-04-08T16:58:16Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![M.J.Wolfe](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/m.j.wolfe/32/17194_2.png) [@M.J.Wolfe](https://forum.ghost.org/u/M.J.Wolfe)\ **Post date:** [April 8, 2022, 4:58pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/1 "2022-04-08T16:58:16Z")
Hi, I have created custom templates for the various collections and channels on my site. blog.hbs fam.hbs gaming.hbs literature.hbs newsletter.hbs tos.hbs I created the above pages by duplicating the index.hbs page and then renamed the duplicates to the name I wanted - for example, `blog.hbs`. I then removed the {{@site.title}} and {{@site.description}} helpers from each template and replaced them with text that I wanted to be displayed instead. For example, this is the code that I have in my blog.hbs template, after editing it. ```auto blog.hbs template .......... {{!-- Inject styles of the hero image to make it responsive --}} {{> hero background=@site.cover_image}}

Living The Good Life

{{#if @site.description}}

Thoughts ... Recipes ... Ideas

{{/if}} .......... ``` I have then created the collections or channels in the routes.yaml file and told each one to use their respective templates, which works fine as far as it goes. However, I am still struggling to figure out how to give each template a custom header image. Here is the relevant part of the code that I believe needs to be changed. ```auto header image from blog.hbs .......... {{> header background=@site.cover_image}}
{{!-- Inject styles of the hero image to make it responsive --}} {{> hero background=@site.cover_image}} .......... ``` I understand that the above code is using the `{{@site.cover_image}}` helper and pulling the image set as the site cover image in the branding settings of the ghost admin panel. The problem is that I don’t want every page on the site to have the same cover image. However, I don’t know how to alter the above code to replace the `{{@site.cover_image}}` helper with a link to an image stored in the theme assets folder so that I can give each page a custom header image that is different from the other pages. How do I alter the above code to give each page on my site a different header image? I use the Liebling theme as a base, which I have changed to fit my purposes. I hope that someone can help me with this because I am very stuck at this point. Thanks, Mel XD ---
**Author:** ![TheRoyalFig](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/theroyalfig/32/27771_2.png) [@TheRoyalFig](https://forum.ghost.org/u/TheRoyalFig)\ **Post date:** [April 8, 2022, 6:58pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/2 "2022-04-08T18:58:55Z")
If understand what you’re doing, I think you need `feature_image`, not `@site.cover_image`. `@site.cover_image` refers to the image that’s set for the site as a whole, while the feature image is set on a post by post basis. To set the image, you’ll want to create a new page with the image and any other data you want to incorporate. Then, in your routes.yaml file, in the `data` property, you’ll want to supply that page data. (You would also be able to bring in other data like title, date, etc.) ```nohighlight data: page.blog ``` You should then be able to set a different image for each of your collections. Let me know how it goes! ---
**Author:** ![AnnaMariaEriksson](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/annamariaeriksson/32/24001_2.png) [@AnnaMariaEriksson](https://forum.ghost.org/u/AnnaMariaEriksson)\ **Post date:** [May 31, 2023, 3:27pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/3 "2023-05-31T15:27:28Z")
I’m trying this too, but adding feature image does not work, nor does it when I wrap it in a post/page context. Any ideas? ---
**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\ **Post date:** [May 31, 2023, 4:43pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/4 "2023-05-31T16:43:49Z")
Looks like Ryan gave advice for using featured\_image, which was not what the OP was asking for. I’m assuming the OP has solved the problem or moved on, but @AnnaMariaEriksson , what theme is this for? I’d like to make sure I understand the ask and which theme so that I can give you an answer that does work. I’m guessing that you want something like ```auto {{header background={{asset '/images/yourimage'}} }} ``` Where yourimage is a file in the theme’s /assets/images/ folder. But please provide a bit more detail and I’ll try to help more if that doesn’t cover it. ---
**Author:** ![AnnaMariaEriksson](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/annamariaeriksson/32/24001_2.png) [@AnnaMariaEriksson](https://forum.ghost.org/u/AnnaMariaEriksson)\ **Post date:** [May 31, 2023, 7:13pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/5 "2023-05-31T19:13:12Z")
It’s the liebling theme. ---
**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\ **Post date:** [June 2, 2023, 3:16pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/6 "2023-06-02T15:16:31Z")
OK. I had time this morning to get it set up on my development environment. :) Can you help me understand what you’re trying to do? You’re looking to have multiple index pages (specified by routes.yaml) and give a different image for each one, is that right? ---
**Author:** ![AnnaMariaEriksson](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/annamariaeriksson/32/24001_2.png) [@AnnaMariaEriksson](https://forum.ghost.org/u/AnnaMariaEriksson)\ **Post date:** [June 2, 2023, 3:21pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/7 "2023-06-02T15:21:23Z")
Hey. Yeah, basically. I’d prefer to use only the one index page and somehow pull the featured image taken from the data. I’ll show you my `routes.yaml` for my english collection: ```auto /en/blog/: permalink: /en/blog/{primary_tag}/{slug}/ template: index data: page.en filter: 'tag:hash-en' ``` It’s the same pattern no matter collection. I’d like to get the featured image from `page.en` in this case to show up, instead of the `@site.cover_image`. No matter what I’ve tried it does not work. Thank you for any help. ---
**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\ **Post date:** [June 2, 2023, 4:25pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/8 "2023-06-02T16:25:51Z")
OK. So I made a copy of index.hbs, and then I changed it like this: ```auto
{{!-- Inject styles of the hero image to make it responsive --}} {{#page}} {{> hero background=feature_image}} {{/page}} ``` That calls the ‘hero’ part of the webpage using the feature\_image set in the page context. And then routes.yaml looks something like this: ```auto routes: /: template: modindex data: page.onesource ``` The template line says to use the other version of the index file, and the data line says to use data from a page with a slug ‘onesource’. UNFORTUNATELY, that meant that all the posts data was supposed to come from the onesource page. Well, there’s no posts data. I could have rewritten modindex.hbs to use a #get to get the posts, but that was going to break pagination and ignore the filter setting. Not a win. So instead, I did this: routes.yaml: ```auto routes: collections: /: template: modindex filter: tag:sports permalink: /{slug}/ taxonomies: tag: /tag/{slug}/ author: /author/{slug}/ ``` modindex.hbs (excerpt - replace the current ‘hero’ partial call with this.): ```auto {{#get 'pages' filter='slug:onesource'}} {{#foreach pages}} {{> hero background=feature_image}} {{/foreach}}{{/get}} ``` That works, but I’d like you not to have to make a separate index file for each of your sections (which is the current situation - I’ve hardcoded the page slug in the get request). Here’s a perhaps better option. modindex.hbs (excerpt): ```auto {{#get 'pages' filter='slug:{{context}}' limit=1}} {{#foreach pages}} {{> hero background=feature_image}} {{/foreach}}{{/get}} ``` routes.yaml (excerpt) ```auto collections: /sports/: template: modindex filter: tag:sports permalink: /sports/{slug}/ ``` This causes the modindex to get a context of ‘sports’. Create a page with the slug sports. Then the get request will get the featured image from that page. (You could also retrieve additional information from that page if you wanted it, by extending what’s in the {{get pages}} request…) ---
**Author:** ![AnnaMariaEriksson](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/annamariaeriksson/32/24001_2.png) [@AnnaMariaEriksson](https://forum.ghost.org/u/AnnaMariaEriksson)\ **Post date:** [June 2, 2023, 4:27pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/9 "2023-06-02T16:27:45Z")
Thanks! I shall try that over the weekend and get back to you. ---
**Author:** ![AnnaMariaEriksson](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/annamariaeriksson/32/24001_2.png) [@AnnaMariaEriksson](https://forum.ghost.org/u/AnnaMariaEriksson)\ **Post date:** [June 22, 2023, 1:17pm UTC](https://forum.ghost.org/t/how-do-i-give-each-page-template-a-custom-header-image/29485/10 "2023-06-22T13:17:45Z")
> [@Cathy\_Sarisky](#): > > ```auto >
> {{!-- Inject styles of the hero image to make it responsive --}} > {{#page}} > {{> hero background=feature_image}} > {{/page}} > > ``` Hey, sorry that I never got back to you. I simply forgot. Apparently, I tried this, and it works. I guess I thought it would not work, because the page I tried it with had no background image 😂 but when I added one, it worked. It was as simple as that! Who knew? ### It seems to work, however only with jpegs and not with png for some reason.