How can I make custom post templates with Featured Image replaced with specified header image, and special accent colors?

Ghost Pro configured
Modified Casper Theme

If you go to my site, you’ll see that each post has a featured image at the top, based on the topic of the post (and has the theme color changed to match the image). This leads my homepage to get a bit repetitive looking. What I’d like to do is make custom post templates, based on Casper’s post.hbs, but with the featured image at the top of the post replaced with a header image pulled from a file in the partials folder (similar to how social link icons get pulled in default.hbs) So far, I’ve read the custom post template tutorial, so I at least know how to create the file.

If I can de-couple what image is featured and what image appears at the top of the page, I can feature actual images from the body of the post and thus have a better looking, more useful homepage. What I don’t really know how to do is add an image in an .hbs file.

Also, to achieve the different colors, I’ve been adding

:root {
--ghost-accent-color: ~color hex code~ !important;
.gh-head, .site-header-content {
    color: var(--ghost-accent-color);
    background: #000;

to the “Code Injection > Post Header” for each post I draft. Is it possible to include this in the custom post template somehow?

1 Like