Ghost source theme: huge featured image

Themes
1

Hello, there ! I hope you can help me. Please take into account that my experience with code is next to 0.

I’m using Ghost Pro (starter) and therefore my only option of theme is the default theme source (v1.5.0). My problem is that all my posts and pages have featured images (and I prefer it that way) but the size is just too huge. I would like to half the size for all of the featured images of the posts. If one just reduces the pixels of the images, that makes it worse because it still tries to fill the whole width of the page, and it’s horrible.

By reading this topic Resizing Feature Image on Post / Page - #4 by Cathy_Sarisky , I understood that I should include this piece of code into the code injection:

<style>
.featured-post-image {
    width: 50%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
</style>

This does nothing. It doesn’t change anything & when I tried to write it without the “style” bit, it just shows the code at the top of post.

Do you know a solution for this?

2

Hey @adriarato - most code injection is theme-specific. It’s always helpful if you link the site. Here’s a guess, based on the source demo.

<style>
@media (min-width: 768px) {
  .gh-article-image img {
    max-height: 50vh;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 50vw;
  }
}
</style>

You can play with the values of max-width and max-height (which I’ve got set as relative to the browser’s window), until you get the effect desired.

1 Like
3

thank you so very much ! This solved it for me, as you said, I only need to adjust a little bit the height. This is my site: Ghost noted from my side to share it next time.

thanks again !