Cover image for headline theme homepage

Themes
1

Is there a simple way to show a cover image similar to the “tag image” on the main page when using the headline theme? I am using Ghost(pro) starter hosting which seems to limit what I can configure? Bit of a Ghost newbie, but many years of dev experience.

Things I’ve tried

  • Setting the publication cover image in design settings
  • Injecting css and image tags into the site heade, but it’s never -quite- right.

I just want the homepage on https://sollia-net.ghost.io/ to look like the “Natur” tab for instance.

2

If you’re on Ghost Pro, you’re not able to load a custom theme, which is a limitation. You can probably work out how to add the elements you want via javascript and/or add a background and resize an existing element. But yeah, Headline doesn’t do that out of the box without some modifications. This would be very on the Creator plan, or in self hosting.

3

Thanks for replying! Seems you are right, I’ll get the upgrade! :)

It seems, and I hope, that it should more or less as easy as copying the relevant sections from the tag handlebar and into the home handlebar and reuploading the theme.

4

That was surprisingly easy :partying_face:

Possibly not the right way to do this, but it works. Add this to the home.hbs file:

After the first line:

<section class="gh-cover gh-outer">
    <img class="gh-cover-image" srcset="{{img_url @site.cover_image size=" s"}} 300w, {{img_url @site.cover_image
        size="m" }} 720w, {{img_url @site.cover_image size="l" }} 960w, {{img_url @site.cover_image size="xl" }} 1200w,
        {{img_url @site.cover_image size="xxl" }} 2000w" sizes="100vw" src="{{img_url @site.cover_image size=" xl"}}">
    </section>

At the bottom:
{{#contentFor "body_class"}} home is-head-transparent {{/contentFor}}

1 Like