I want to use post template 1, however when I use vertically oriented featured images for posts, they’re too large and leave white space to the right. An example of this:
https://i.imgur.com/25D8M7w.jpg
https://personacentral.com/persona-5-the-animation-volume-7-box-art-revealed/
By using the following code, I can make the width as I want to, but if I set the height, it scales the image down and squishes it, which I don’t want:
@media (min-width:141px){
.td-post-template-default .td-post-featured-image img {
width:100%!important;
height:337px;
margin-left: auto;
margin-right: auto;
}
}
Result:
https://i.imgur.com/zlUVmAc.jpg
How do I instead crop the featured image to a dimension like this one, instead of scaling it down like this?
Tag / Search / Category Pages
Additionally, I want vertically oriented featured images that appear in the above pages to look like the ones in the posts loop. An example of this is that I want this:
https://i.imgur.com/6WIlOH1.jpg
and not this:
I was able to fix my first issue by discovering the “object-fit” CSS, so what I wanted for post template 1 is achieved with the following code:
@media (min-width:141px){
.td-post-template-default .td-post-featured-image img {
width:100%!important;
height:337px;
object-fit: cover;
margin-left: auto;
margin-right: auto;
}
}
However, I don’t have a solution for why the featured image appearance isn’t standardized for posts as they appear on pages other than the posts loop.
Hi,
I have made some tests on my side with your image and it seems to be correctly displayed as you can see here -> https://www.screencast.com/t/2nO3RnDl -> https://www.screencast.com/t/UYLaxeVubg I have checked your website and I saw that you are using the Child Theme which can break the default theme functionalities if you have some additional customizations. My advice changes the child theme to the original one, ensure that you have correctly updated the theme to the latest version of it, remove all of the untested plugins, clear all the caches and check the results. I recommend you to use the post template style 1 for that post, because, looks better with this kind of featured image. This one is a portrait and not loadspace and that’s why you will bring well results with this post template.
Hope this helps and let us know how it goes!
I look forward to helping you!
Thanks for your understanding!
Hello Catalin,
I don’t think you understood my issue. Please refer to these images again:
#1: https://imgur.com/6WIlOH1
#2: https://imgur.com/jQxIqhd
The second image shows how the featured image appears on the tag page. I do not want it to look like this, I want it instead to look like how it appears on the posts loop (home page). I want it to cover the container for the featured image, instead of leaving white space.
Hi,
Please try to regenerate your images with Force Regenerate or Thumbnail Regenerate plugin according to our documentation from here -> https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/ Also, ensure that you have enabled the thumbs for this module(1) like this -> https://www.screencast.com/t/G990X6OfxzwE
Hope this helps and let us know how it goes!
Thanks for your understnading!
Thank you, regenerating thumbnails once again did the trick.
Hi,
I am glad hearing this from you!
Best regards!
