How do I give each page template a custom header image

Using Ghost
1

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

2

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
3

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?

4

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

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

5

It’s the liebling theme.

6

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?

7

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:

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

8

OK. So I made a copy of index.hbs, and then I changed it like this:

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

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:

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

  {{#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):

  {{#get 'pages' filter='slug:{{context}}' limit=1}}
  {{#foreach pages}}
  {{> hero background=feature_image}}
  {{/foreach}}{{/get}}

routes.yaml (excerpt)

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

1 Like
9

Thanks! I shall try that over the weekend and get back to you.

10

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 :joy: 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.

1 Like