Feature Image on Page Problem

Using Ghost
1

When I add the feature image to a page, in this case the default About page, it looks good in the page editor but when I publish the page it crops the top of the image by about 20%. I have tried resizing and cropping the image beforehand, but it still crops off the top of the image. I am using the Attila theme, if it makes any difference.

I have not been able to find any information about suggested image sizes or best practices, only articles about responsive images which lead me to believe that image resizing is done automatically by Ghost. Thanks!

2

Could you share the link to that page? Always easier to have a look “live” to see what’s going on :slight_smile:

Generally speaking, the sizing of featured images is entirely up to the theme, so I assume there is some cropping going on there.

3

https://barryleeblogs.com/about/

The photo actually shows the hats and some space above the hats.And it shows correctly in the page editor before publishing.
Thanks!

4

Tricky one :smiley:

The theme applies a padding on top and bottom of the header:

CleanShot 2023-11-18 at 17.45.32@2x
CleanShot 2023-11-18 at 17.45.32@2x1920Ă—1110 132 KB

On top, you have a padding of 16rem+8% of the window (vw stands for view width. 1vw is 1% of the width of the screen). On bottom you have 4rem+6% of the screen.

That means, the wider your screen, the more padding you’ll have on top and bottom.

Since the image acts as a background image, that is also the correct behaviour, in my opinion. If you put a fixed height there, you’d have the problem that the image gets very, very slim on big screens.

So, hm, is there a solution? Not really, I am afraid. In order to make this look better, you’d need to make sure that the “subject” of the image (so, you) are always in the center – and that there is enough space around on the edges.

As an alternative, you could make the whole header bigger – though it’s already filling quite a bit of space on my 14 inch laptop.

To do that, you could add this code snippet on the about page itself (as an HTML card), so it only changes the behaviour on the about page:

<style>
  .post-header.has-cover {
      padding: calc(48rem + 8vw) 0 calc(4rem + 6vw);
  }
</style>

But as I said: that makes the header pretty, pretty big – and fills more than the entire screen on my device. I would see the hats though :smiley:

1 Like
5

I see what you mean. I edited the canvas size of the image and added blank space on top, and that kind of worked, except when resizing the browser window the blank space starts to show up, so it is not very “dynamic.” So I think the answer is to use a different image with plenty of space around the primary focus of the image, as you said.
Thank you so much for this detailed response. It has been many years since I did any website design and you have reminded me how some of it works!

1 Like