Twentig

To set the blog featured images to be full width, the following PHP code should be added inside the child theme’s functions.php file:

function set_post_image_full() {
	if ( ! is_singular() ) {
		add_filter( 'post_thumbnail_size', function() {
			return 'full';
		} );		
	}
}
add_action( 'get_template_part_template-parts/featured-image', 'set_post_image_full' );

And the CSS code below should be added inside the style.css file of the child theme or inside the Customizer’s Additional CSS panel:

.blog .featured-media-inner,
.archive .featured-media-inner {
	max-width: none;
	width: 100%;
}

.blog .featured-media-inner img,
.archive .featured-media-inner img {
	width: 100%;
}

Hi,

We’ve checked your website, it seems you managed to achieve the layout. This is the right way to make this layout.

Have a nice day.

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 🙂

Hi David,

Thank you for the message and feedback.

When we selected which blog layouts to include, we thought about having this one but decided not to. We felt that this layout for a blog index isn’t ideal, especially on large screens. We don’t think that having a different layout for the index and the single post is necessarily inconsistent, but we understand why you want the same layout.

We don’t see this feature being included in our roadmap, since we aren’t totally convinced with this layout and want to keep the plugin the lightest possible.

That being said, we can give you some custom CSS and PHP code to achieve this layout, but it would require that you add PHP code on your side (child theme, custom plugin …)

Please let us know.

Hi @kudorollin,

Thanks for your feedback and kind words.

For the fixed cover image, both the Twenty Twenty theme and the WordPress block editor use background-attachment: fixed. This property is replaced on mobile by background-attachment: scroll. Otherwise, the image would appear zoomed in and blurry because mobile browsers have issues with this property.

Unfortunately, the CSS code suggested can’t work with the WordPress Cover block.

Have a nice day.

Hi,

Thanks for your message.

The patterns shown in the screenshot are examples of what’s possible to do with the Twentig Library. Some can be inserted right out of the box, some have been mixed and matched. If you need to reproduce a particular one that you don’t find, please let us know.

Have a nice day.

Assuming that you’ve created your own plugin or child theme (to create your CPT), you can add the following PHP code in one of your PHP files. That way, you won’t lose the modifications when you update Twentig.

function my_custom_body_class( $classes ) {
	if ( is_search() || is_archive() ) {
		$classes[] = 'tw-blog-grid';
		$classes[] = 'tw-blog-' . get_theme_mod( 'twentig_blog_layout' );
		$classes[] = 'tw-blog-columns-' . get_theme_mod( 'twentig_blog_columns', '3' );
	}
	return $classes;
}
add_filter( 'body_class', 'my_custom_body_class', 12 );

I hope the above is useful to you,
Have a nice day.