Specifying featured image display size on home and post views

ibmcai · Member · Aug 17, 2015 at 7:00 pm
Copy link

Add topic to favorites
It has become quite a challenge to try and figure out the exact crop on the featured image between the home view and post level view because the image becomes such a different shape on each view AND dynamically sizes depending on the screen. We’d like to do a CSS customization that will basically set the featured image display size to be the same shape on each view. So on the post level view, we’d like it to be 1200×600 and on the home page view, more like 529×265 versus the 529×403 it currently shows. Can you help us with the CSS customization code for this? We are using the Bindery theme. Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 18, 2015 at 7:15 pm
Copy link
Hi there, WordPress and the theme software create those images at the sizes/proportions shown on the main page and the single post pages and the crop and size isn’t something that can be changed via CSS. It would require editing of the theme php script files and we cannot do that at WordPress.com.

For the single post pages, you may want to try the following CSS. I’ve limited the width to 1200px, centered the image and, set the image to position: contain; instead of position: cover; . The height of the image is controlled by a top padding declaration, which was originally 40%. You can play with the padding. I stuck 30% in during my testing.
```
.single .has-post-thumbnail .entry-thumbnail {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    padding-top: 30%;
}
```
On the front page, as with the single post pages, the height of the image is controlled by a top padding. In the case of the front page, that is 76%. Give the following a try and adjust the padding and see if you can get what you are looking for.
```
.not-singular .entry-thumbnail {
    background-position: center top;
    padding-top: 50%;
}
```

No items found.