- This topic has 6 replies, 2 voices, and was last updated 4 years, 11 months ago by Tom.
-
AuthorPosts
-
April 26, 2019 at 7:24 am #880509Dan
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 728×0 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.
April 26, 2019 at 6:07 pm #881025TomLead DeveloperLead DeveloperHi 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 🙂
April 26, 2019 at 8:57 pm #881096DanHey 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.
April 27, 2019 at 5:52 am #881332DanTom – 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
April 27, 2019 at 7:15 am #881475TomLead DeveloperLead DeveloperSo 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
tofeature-image-large
.April 27, 2019 at 8:33 am #881559DanThanks 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'; } );
April 27, 2019 at 3:26 pm #881760TomLead DeveloperLead DeveloperYep – that looks good to me. You might need to regenerate the thumbnails as well: https://wordpress.org/plugins/regenerate-thumbnails/
-
AuthorPosts
- You must be logged in to reply to this topic.