[Support request] Implement new srcset for feature images

Home Forums Support [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
    Posts
  • #880509
    Dan

    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
    #881025
    Tom
    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 🙂

    #881096
    Dan

    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.

    #881332
    Dan

    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

    #881475
    Tom
    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.

    #881559
    Dan

    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';
    } );
    #881760
    Tom
    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.