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

Developer help
1

URL: www.edwardsedition.com
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;
}
</style>

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