Casper Theme - Post Featured Image Help

[gcasqueiro]

Hello everyone, I’m new to Ghost, I’m still in the first steps of my blog configuration.

Of all the themes I’ve tried, the one I like the most and that adapts better to the type of content I want to publish is Casper.

One of the things that I don’t like, and have been struggling with, is the Featured Image. I want to add featured images to my posts, but I don’t like the way they are displayed. What I really wanted, was for my posts to display the featured images as the Liebling theme does. Is there any code injection I can use to make it look like this in Casper?

I’ve been searching the forum for the last couple of hours, and couldn’t find any topic about it (at least with a solution).

Another question would be if it is possible to use the same thing in pages, so that I could have a full width header image in each page.

Thanks in advance!

[SylarRuby]

Sorry, for me, I don’t understand the issue or what you’re after. Could you give a much clearer example? Issues with the casper theme?

[gcasqueiro]

Basically, I’m looking for a code injection or some code to include in the Casper theme that mimics the appearance of Liebling’s posts and pages. I believe it is called a “Hero Image”, a featured image with the full width of the screen and along the top navigation.

This is how Casper displays posts and pages:

Post - Start here for a quick overview of everything you need to know
Page - Building your audience with subscriber signups

This is how Liebling displays posts and pages (and how I want it in Casper):

Post - Make Myspace Your Best Designed Space
Page - Authors

I hope this is clearer enough. English is not my mother tongue, I don’t know how to explain it in any other way

[SylarRuby]

@gcasqueiro

Authors

The code injection for this would look a bit messy with JavaScript moving elements around. It can be done but you’ll need to edit the post.hbs and move the if block for feature_image to the top with some other css changes. Image should be object-fit: cover etc. A quick edit gave me this:

Edit:

View GitHub Gist.

[gcasqueiro]

To me it’s all messy because I don’t know anything about CSS, Java, etc
That’s why I asked if there was a code injection because it’s easier for me to use that than editing a hbs file.
But that’s precisely the result I wanted for my pages and posts.

I’ll try to mess around with the post.hbs and page.hbs, and see if I can manage it.

At least now I know that it is possible.

Thanks for your help

[brightthemes]

Hi @gcasqueiro,

It can be done via code injection, no need to modify the layout in hbs.
Here is the code:

<style>
.article.post { padding: 0; }
.article-image {
    order: -1;
    margin: 0 0 6vmin;
    grid-column: full;
}
</style>

That should be it, but the image can become quite big on larger devices, so you might want to limit that:

<style>
.article-image { max-height: 40rem; }
.article-image { height: 100%; object-fit: cover; }
</style>

[gcasqueiro]

Hello @brightthemes ,

Thank you very much for your help.

SylarRuby already found me a solution for the posts, I’ll try your code for the pages if I can’t use his method.

Thank you

[SylarRuby]

@brightthemes one is best as you need not to edit post.hbs but you’ll need some css to remove padding etc.

[gcasqueiro]

And the code injection didn’t work properly:

@SylarRuby your code worked perfectly for the posts, just didn’t figure out how to use it in the pages.

[SylarRuby]

@gcasqueiro

@SylarRuby your code worked perfectly for the posts…

@gcasqueiro

…just didn’t figure out how to use it in the pages

Post what you’ve done and I’ll try to see what went wrong.

[gcasqueiro]

I just used that portion of the code in the page.hbs, but immediately noticed that it can’t be done that way
And got this result.

That’s what happens when you have almost zero knowledge of coding

[SylarRuby]

Use this and work your way from there:

.gh-canvas .article-image {
    margin-top: 0;
}
    
figure.article-image img {
    max-height: 565px;
    object-fit: cover;
}

[gcasqueiro]

I must be doing something wrong…

[SylarRuby]

@gcasqueiro

I must be doing something wrong…

Yes. Place the style inside the Site Header (admin).

[gcasqueiro]

Still not working… I don’t know what’s wrong.

It just shows the same result as before…

[SylarRuby]

My bad:

header.gh-canvas {
        display: block;
    }	
 article, .gh-canvas .article-image {
    margin-top: 0;
     padding-top: 0 !important;
}
    
figure.article-image img {
    max-height: 565px;
    object-fit: cover;
}

[gcasqueiro]

It worked!!

Thank you so much for all your patience and help in solving this for me. Can’t thank you enough.

Give this man an award!

[SylarRuby]

Always happy to help.