Archived topic
Implement new srcset for feature images
6 replies · Started by Dan on April 26, 2019
Hey guys
I know that you get bombarded with a lot of requests regarding image sizes so sorry to add to it - I have been through a lot of other tickets and can't see the same request, though that may be a result of my lack of understanding.
I want to implement a hard crop on images used for features images that are used in blog archive, single and page whilst in post / page images can operate on a soft crop.
For now I have zero'ed out the wordpress standard options in Settings > Media and also disabled the 728x0 via snippet.
I have then added the following sizes that I would like to use for the srcset for the feature images, which accounts for the different size required as screen size alters.
feature-image-small: 320×180 pixels (cropped to fit)
feature-image-medium: 400×225 pixels (cropped to fit)
feature-image-medium-large: 688×387 pixels (cropped to fit)
feature-image-large: 728×410 pixels (cropped to fit)
But at this point I am stuck - I can't seem to work out to make sure the feature image position will use these images (and no others of different aspect ratio).
Any assistance appreciated.
Hi there,
Are you just wanting to change the sizes of srcset? If so, this article might help: https://andrewrminion.com/2018/01/wordpress-responsive-images-srcset-sizes-attributes/
Let me know if I misunderstood :)
Hey Tom
Thanks for the quick response as ever.
I am trying to force a hard crop to 16:9 aspect ratio for feature images across archive, single and page, even if the uploaded image isn't 16:9. I know the ideal behaviour would be to upload a 16:9 image but for various reasons I won't bother you with this isn't possible.
I've been able to register the new images sizes in function.php:
//* Add new image sizes
add_image_size( 'feature-image-small', 320, 180, true );
add_image_size( 'feature-image-medium', 400, 225, true );
add_image_size( 'feature-image-medium-large', 688, 387, true );
add_image_size( 'feature-image-large', 728, 410, true );
but what I can't seem to figure is how to make sure that these are used as the srcset for features images on archive, single and page.
I may be overcomplicating matters but everything else I have tried results in images retaining their original aspect ratio and/or not delivering optimal sizes across varying screen sizes.
Hopefully that makes more sense and thanks as ever.
Tom - from my limited knowledge the proposed solution on the link below seems to be what I am trying to achieve - setting both the srcset and sizes attributes for the feature image using custom image sizes. Just not sure how best to apply that code to GP.
https://wordpress.stackexchange.com/questions/260602/custom-responsive-featured-image-sizes
So if we want to force GP featured images to use that feature-image-large size, we can do this:
add_filter( 'generate_page_header_default_size', function() {
return 'feature-image-large';
} );Then it looks like the second function here is what you need: https://wordpress.stackexchange.com/a/260901
You just need to change front_page_lg to feature-image-large.
Thanks Tom
Still not sure I get the sizes code but don't expect you to hand hold me through that.
Does this code seem ok for the adding of the images and assigning feature-image-large to the feature image position in archives, single and pages?
//* Add new images
add_action( 'after_setup_theme', function() {
add_image_size( 'feature-image-small', 320, 180, true );
add_image_size( 'feature-image-medium', 400, 225, true );
add_image_size( 'feature-image-medium-large', 688, 387, true );
add_image_size( 'feature-image-large', 728, 410, true );
} );
//* Archive, single, page use feature-image-large as default
add_filter( 'generate_page_header_default_size', function() {
return 'feature-image-large';
} );Yep - that looks good to me. You might need to regenerate the thumbnails as well: https://wordpress.org/plugins/regenerate-thumbnails/
