How to add new srcset sizes to the new responsive images update

  • Resolved fgiancarlo

    (@fgiancarlo)


    8 years, 11 months ago

    I would like to create a function that adds more size options to the img srcset that came with the 4.4 update. Right now its only showing the 3 default sizes from WordPress.

    I want to include the ones from:

    add_image_size('maxWidth', 1920, 9999);
add_image_size('laptopWidth', 1366, 9999);

    WordPress current output:

    <img width="1920" height="1259" src="/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1920x1259.jpg"
class="attachment-maxWidth size-maxWidth wp-post-image"
alt="portfolio-emtheories" srcset="/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-300x197.jpg 300w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-768x503.jpg 768w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1024x671.jpg 1024w"
sizes="(max-width: 1920px) 100vw, 1920px">

    Desired Result:

    <img width="1920" height="1259" src="/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1920x1259.jpg"
class="attachment-maxWidth size-maxWidth wp-post-image"
alt="portfolio-emtheories" srcset="/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-300x197.jpg 300w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-768x503.jpg 768w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1024x671.jpg 1024w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1366x900.jpg 1366w,
/freddygcano%202016/wp-content/uploads/2015/12/portfolio-emtheories-1920x1258.jpg 1920w"
sizes="(max-width: 1920px) 100vw, 1920px">

    Thanks,
    Freddy G. Cano

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    You have to use real heights, not “9999”.

    WordPress will only insert sizes that match the images aspect ratio. By giving it heights that don’t match the aspect ratio of the other images, it will not insert them into the srcset.

    In other words,

    add_image_size('maxWidth', 1920, 1258);
add_image_size('laptopWidth', 1366, 900);

    Thread Starter fgiancarlo

    (@fgiancarlo)

    I see. If the image is not cropped “True” will it keep the original image ratio?

    For example is I upload and image that is 1920 by 1500 or will it stretch in/out?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    If you don’t have it cropped, then the image will best-fit the given sizes. However, this is not a problem because that best fit happens to all the given sizes.

    Imagine that I specify two sizes: 1600x1200and 800×600. Both of these have a 4:3 ratio.

    Now I upload an image that’s 1600×1000. The image ends up being stored at 1600×1000 and 800×500. The resize is proportional. And both are in the srcset because the add_image_size ratios match one another.

    Without specifying a valid height, then there’s no real way for it to know whether the final images were intended to be at the same ratio, or just ended up that way by luck or what have you. It would not make sense to insert a cropped image when the desire was for the image to be uncropped, even if the ratios on the final images matched. That sort of thing. The “intent” of the values passed to add_image_size matters. What you’re really specifying is a bounding box of that many “web-pixels” in the web page. The image will be best fit into that box, or cropped in there if you tell it to do that instead.

    Thread Starter fgiancarlo

    (@fgiancarlo)

    Well I changed it to
    add_image_size('maxWidth', 1920, 1920);

    to align with the aspect ratio of the medium and large default WordPress sizes. But it never got added into the img srcset. Is there a hook for me to use to add ‘maxWidth’ as an srcset option in the functions.php file?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    Changing it to an image which is square and not at all close to the given dimensions of the other images won’t work, and anyway, it would only affect newly uploaded images in such a case.

    Again, the ratio matters. This is not arbitrary. If it doesn’t think the image is comparable, it won’t use it by default.

    I’m having the same issue of some of my image sizes not showing up in the srcset. I’m using the same aspect ratio for all of my image sizes of 3:2. I have one set to 2400×1600 another at 1920×1280 another at 1200×800 etc. to some small thumbnails. All show but the 1920×1280. I’m not sure why. It shows up in the media manager select field as if I were going to insert it into a post.

    Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to add new srcset sizes to the new responsive images update’ is closed to new replies.