Archived topic
Featured image size
3 replies · Started by Mike on September 27, 2021
Hi -
See https://handelinstitute.org/awards/ - that banner image is being set via the page featured image.
The current image is this one: https://handelinstitute.org/wp-content/uploads/2021/06/banner-Messiah-1024x283.jpeg which is obviously 1024x283 in size. But: I want the site to use a bigger version (https://handelinstitute.org/wp-content/uploads/2021/06/banner-Messiah-1920x530.jpeg)
I've obviously added the new size, and resized all thumbnails:
// Add banner image size
add_action( 'init', function() {
add_image_size( 'banner-image', 1920, 530, true ); // 1920 width, 530 height, crop
} );
...I also added the following snippet (which I found from your support forum elsewhere):
// Increase featured image size
add_filter( 'generate_blog_image_attributes', function( $atts ) {
// Set up our conditional
$atts[ 'width' ] = 1920;
$atts[ 'height' ] = 530;
// Return our options
return $atts;
} );
...to try and force the new size - but am obviously doing something wrong. Can you help?
thanks
Mike
Hi Mike,
I'd consider using a Block Element - Page hero for the general layout and use an Image block in it.
My layout would be:
- GenerateBlocks' Container Block for the main wrapper. (With "Container" and "Inner container" set to full width)
- an image element with added CSS class(es) hero-img as selector.
I would then set the image block's image to the image you're using and then set its site to either "full" or the image size you've registered.
I would then set this CSS for the image so it goes full width.
hero-img img, hero-img figcaption{
height: auto !important;
width: 100% !important;
}Now the reason behind using this suggestion is so that WordPress automatically serves a srcset through the Image Block for the purpose of flexibility. This way, your site uses different image sizes depending on viewport size.
As it is, the site's page hero section doesn't have srcset- https://share.getcloudapp.com/E0uj1jRE-. It serves the same size on all viewports and that's likely to get flagged as a performance issue.
Alternative to my suggestion, you can just edit how you're displaying the image by fetching it using wp_get_attachment_image. (I assuming you're custom code to display it?)
Hey Elvin, thanks lots for this - really useful, think that will help me out loads :-)
No problem. Glad to be of any help. :D
