Featured images of blog post thumbnails

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. :D

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

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. :D

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. :D

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

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

Ok I did it? Now?

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

Bingo :)
Perfect help, thanks.

Glad to be of any help. No problem. :D