[Support request] Implement new srcset for feature images

Home Forums Support Implement new srcset for feature images

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #880509

    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.

    GeneratePress 2.2.2
    GP Premium 1.8.1
    Lead Developer
    Lead Developer

    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.


    Lead Developer
    Lead Developer

    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';
    } );
    Lead Developer
    Lead Developer

    Yep – that looks good to me. You might need to regenerate the thumbnails as well: https://wordpress.org/plugins/regenerate-thumbnails/

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.