Casper theme post image

Themes
1

Hello forum

How can i resize posts images because when you open the post their size is so big that distracts the reader

image
image.png287×837 109 KB

2

Hey there :wave: You can change the size of the main image in Casper with a bit of CSS in the Code Injection option within the admin:

<style>
.post-full-image img {
   max-height: 50vh;
}
</style>

Have a play with the number and see what suits you best.

Just to check though, are you referring to the image in the admin view? The screenshot attached suggests you are. This can be edited if you have a custom install of Ghost but it might be better to keep it that height just so people can fully see what image has been uploaded to the post :smile:

3

I mean the one on the post page its very big

4

Oh right I see! Well that bit of code I posted before should adjust it for you. You can add it to the Code Injection view in the Ghost admin, like this:

35
Screenshot 2019-09-06 at 15.23.35.png1916×1038 112 KB

5

This doesn’t seem to work anymore. I’m still looking to resize the main images in the casper theme.

(Also, I have added google analytics in the code injection. Not sure if that has anything to do with the solution not working.)

6

Hey @SkrimSkram, my solution is from a couple of years ago and since then the default Casper theme has changed. You’ll need to use a different class selector to grab the feature image. You can get the class by viewing one of your posts with a feature image and using the browser inspector

7

Hey @DavidDarnes thanks for the reply. I’m not sure I fully understand what you mean by ‘class selector’. I am non-technical. I can right-click and ‘view source’ or ‘inspect element’ in the browser. But I’m not certain what I must do after. :sweat_smile:

Any help appreciated. Thanks.

8

@SkrimSkram, in Firefox or Chrome browser you can press F12 key and then CTRL + SHIFT + C or just click with mouse on this icon:

obraz
obraz775×219 36.4 KB

Then you can pick an element from the page and inspect its HTML/CSS.

obraz
obraz832×551 112 KB

I can see that the figure class is:

<figure class="article-image">
    <img ....

So the Code Injection should look like:

<style>
    .article-image img {
        max-height: 60vh;
        width: auto !important;
    }
</style>

Here is the result:

obraz
obraz842×721 50.3 KB

9

If you want article image to have the same width as article title or article text, then you can use:

<style>
    .gh-canvas .article-image {
        grid-column: main-start/main-end !important;
    }
</style>
10

Really nicely done @JavowiecPL, thanks for the detailed reply. Sorry for not being very clear @SkrimSkram, hopefully @JavowiecPL explainer will get you there :blush:

11

@JavowiecPL Man, thanks so much for such a lovely detailed reply!! Exactly what I was looking for👌🏽

@DavidDarnes No worries David, thanks again :slight_smile:

12

Hi all: so glad I found this post. I am using the Casper theme (brand new to Ghost) – and I tried the above snippet in the code injection, header:

.gh-canvas .article-image { grid-column: main-start/main-end !important; }

But the image does not seem to resize. To be exact – I am uploading a post image by going to Settings inside the post page, and clicking upload image. This is how large it looks.

https://www.vivaagile.com/gettingnaked/

Appreciate the help.

Thank you.

Cheers.

13

Hi all:

Wondering if anyone can suggest how to fix this? Thank you.

Cheers.

14

Any ideas about this issue?