How do I give each page template a custom header image

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.

blog.hbs template
..........

  {{!-- Inject styles of the hero image to make it responsive --}}
  {{> hero background=@site.cover_image}}
  <div class="m-hero__content" data-aos="fade-down">
    <h1 class="m-hero-title bigger">Living The Good Life</h1>
    {{#if @site.description}}
      <p class="m-hero-description bigger">Thoughts ... Recipes ... Ideas</p>
    {{/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.

header image from blog.hbs
..........

{{> header background=@site.cover_image}}

<main class="main-wrap">
  {{!-- 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

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.)

data: page.blog

You should then be able to set a different image for each of your collections. Let me know how it goes!

1 Like