[Resolved] Featured images of blog post thumbnails

[Gurer]

Hi,
Is it possible to crop the featured images of blog post thumbnails to same size? (399x266px)
I tried;
in Customizer > Layout > Blog –> Featured Images >>> Archives. You can:
1. Select a smaller Media Attachment Size – if required.
2. Just set a Height Value that you want all images to be displayed at. And GP will add the necessary CSS to faux crop them
It doesn’t work for me.

Site: https://www.wpdemopark.com/blog/
Problem: https://ibb.co/JH8SFx5

Kind regards

[Elvin]

Hi there,

Customizer settings won’t work on the images of that page as it’s using Block Element – Content Template for its images.

But we can try cropping the image using custom CSS if you can add the dynamic image inside a Container Block with post-thumbnail-wrapper class in it’s Additional CSS class(es) field.

Let us know once you’ve applied this layout so we can re-check for the custom CSS writeup. 😀

[Gurer]

Hi Elvin,
As I know the blog archive page is generated auto. Do I have to create a new blog page to achieve this?
Thanks

[Elvin]

As I know the blog archive page is generated auto.

Normally, yes, but your site has a Block Element – Content template so it overrides the customizer settings. 😀

Do I have to create a new blog page to achieve this?

No need. you just need to modify how the Block Element – Content template is laid out so we can have a specific selector to crop the featured image added by it. 😀

[Gurer]

Hi,
Ok ready, now what we will gonna do?

[Elvin]

1st, put the dynamic image block inside its own container block.

And on this container block, add a class.

Something like this – https://share.getcloudapp.com/Qwu4RegL

[Gurer]

Ok I did it? Now?

[Elvin]

There’s an extra grid block inside of the container block.

Your current setup has:

Container Block
> Grid Block
>> Container Block
>>> Dynamic Featured image
…

It should be simplified to:

Container Block
> Dynamic Featured image
…

Once you have this corrected, you can add this CSS:

.post-thumbnail-wrapper > .gb-inside-container {
    height: 200px;
}

.post-thumbnail-wrapper > .gb-inside-container > * {
    width: 100%;
    height: 100%;
}

.post-thumbnail-wrapper > .gb-inside-container img {
    width: 100%;
    height: auto;
}

This should crop the images like this: https://share.getcloudapp.com/L1uWPY9j

[Gurer]

Bingo 🙂
Perfect help, thanks.

[Elvin]

Glad to be of any help. No problem. 😀

[Author]

Posts