Crop and center featured image with css?

Posted in: Newspaper
Post count: 88

Hi there.

I just noticed that when I use a square featured image (e.g. 1067×1067) my current template will show the entire image taking up pretty much the entire screen of a regular 1920×1080 visitor.

Example: http://i.imgur.com/fuEk9YJ.jpg

As a temporary fix I added the following CSS code
.td-post-featured-image {
max-height: 610px;
}

The downside of this fix is that it cuts the bottom part of the image. Is there a way I can re-center it so it cuts top and bottom equally?

Post count: 22421

Hello,
I assume you use template style 3 as this is the only one that seems to display the full image without cutting it.
You can use this code instead of your own to have both values inside the same statement:
.td-post-featured-image {
max-height: 610px;
transform: translate(0,-200px);
}

The value that must be adjusted is: ‘-200px’ This is the Y axis and you can adjust it by changing the value in pixels.
Thank you!

Post count: 88

Thanks for your suggestion.

Unfortunately that code is not “smart” enough since it does not account for images that have proper 16:9 layouts. I am sort of in a transitional phase here and with 110 posts it will take a while to have a decent featured image for everything. Especially now that I found out I cannot use rectangular images :(.

Example issue new code: http://i.imgur.com/k0a42fm.png

Any other thoughts?

Post count: 22421

Hi
Unfortunately there is no quick solution to do it except change the post template to a similar one: eg: template 4, 6 or 7. I have tested this on all templates and template 3 is the only one that displays the full height of the image. If you use the same post template on all posts then you can edit the database and reset them to the default template from the theme panel and then simply change the default template to another template.
You can follow this topic to see how it can be done: https://forum.tagdiv.com/topic/change-style-of-multiple-posts-at-once/
Thank you!

Viewing 4 posts - 1 through 4 (of 4 total)
The forum ‘Newspaper’ is closed to new topics and replies.