Hi Léo,
Twentig changes the size for the left-aligned image inside the Latest Posts block because by default, the layout isn’t responsive. If you look at your website for screen width between 665px and 882px, the post titles aren’t readable, and the images take too much space. The Twenty Twenty theme sets the size to 290px while Twentig changes it to 25%.
If you want to use the Twentig plugin but increase the image size, you can add some custom CSS inside your child theme (or inside the Additional CSS panel in the Customizer) and replace the values below with your own values:
.wp-block-latest-posts__featured-image.alignleft {
max-width: 35%;
}
.wp-block-latest-posts__featured-image.alignleft ~ * {
width: calc(65% - 2rem);
float: right;
}
I hope the above is useful to you.
Have a nice day.
Hi,
Thank you very much for this answer.
However, I added the custom CSS and it doesn’t make any changes. I had to add the !important rule to override the Twentig CSS and use jQuery to override the size html attribute.
Is there a better way to fix this?
Cheers!
Hi @leobeaufils,
The CSS code that we gave you works when entered inside the Customizer. If you add it inside a child theme, you must use the following code (to avoid using !important):
.wp-block-latest-posts .wp-block-latest-posts__featured-image.alignleft {
max-width: 35%;
}
.wp-block-latest-posts .wp-block-latest-posts__featured-image.alignleft ~ * {
width: calc(65% - 2rem);
}
You can remove your jQuery code and add PHP code inside your child theme instead.
The code below removes the Twentig filter function and adds a custom one. Replace $sizes = '(max-width: 300px) 100vw, 300px';) with your own value.
remove_filter( 'render_block', 'twentig_twentytwenty_change_latest_posts_image_sizes' );
function your_custom_change_latest_posts_image_sizes( $block_content, $block ) {
if ( 'core/latest-posts' === $block['blockName'] ) {
$image = $block['attrs'] && isset( $block['attrs']['displayFeaturedImage'] ) ? $block['attrs']['displayFeaturedImage'] : 0;
if ( $image ) {
$sizes = '(max-width: 300px) 100vw, 300px';
return preg_replace( '/sizes="([^>]+?)"/', 'sizes="' . $sizes . '"', $block_content );
}
}
return $block_content;
}
add_filter( 'render_block', 'your_custom_change_latest_posts_image_sizes', 10, 2 );
I hope the above is useful to you.
If you enjoy Twentig, please leave us a review 🙂
