Add src-set to attachments

[drewbaker]

WordPress is great at generating the src-set for responsive images. It would be great if we could query an attachment for srcSet and get back the string that WordPress generates. It's tedious to build that on the frontend, and would require a large GQL, and also for the frontend to know what image sizes were available on the server.

This is the function that WordPress has, where it takes an attachment ID and generates the src-set string for you:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image_srcset/

If you arn't using responsive images, you should! This is a good read:
https://alexwright.net/web-design-secrets/responsive-images-wordpress/

[jasonbahl]

@drewbaker thanks for opening this issue!

How do you envision this working and what do you feel the expected output should be?

So, it looks like there are a few variations of inputs for that function, such as size and image_meta

I think we can support the size as an argument on the field in GraphQL, but not 100% sure I understand what the last arg $image_meta is doing. Do you have examples of that last arg in action and how it modifies the output?

[jasonbahl]

It looks like that function outputs a list of URLs.

So a query like:

{
  mediaItem {
    srcSet
  }
}

Could return

{
  "data": {
     "mediaItem": {
         "srcSet": [ 
               "https://site.com/wp-content/uploads/2019/04/download-239x300.jpeg 239w", 
               "https://site.com/wp-content/uploads/2019/04/download.jpeg 430w" 
           ]
     }
  }
}

Is that the shape you would expect? or something else?

[jasonbahl]

I can also see querying like so:

{
  mediaItem(size: LARGE){
    srcSet
  }
}

and getting (large as the first item)

{
  "data": {
     "mediaItem": {
         "srcSet": [ 
               "https://site.com/wp-content/uploads/2019/04/download.jpeg 430w",
               "https://site.com/wp-content/uploads/2019/04/download-239x300.jpeg 239w"
           ]
     }
  }
}

[drewbaker]

I was thinking it would work like the first example, I don't think you need to request a specific size for src-set:

{
  mediaItem {
    srcSet
  }
}

And the output you have. I'm not sure it needs to be an array, it seems like you'd only use it as a string to make an <img srcset="comma separated string here"/> but I guess it can't hurt to have it come back as an array.

I'm not sure what that meta arg is for to be honest, I've only ever used this through the wp_get_attachment_image() function which outputs a complete <img>.

Check the source for that:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

It seems there are two attributes to get src-set working in the browser. src-set and sizes. So perhaps the query is this:

{
  mediaItem {
    srcSetAttr
    sizesAttr
  }
}

And the return is a string for each?

Just if you are curious, this is what a proper responsive image looks like:

        <img srcset="elva-fairy-320w.jpg 320w,
                     elva-fairy-480w.jpg 480w,
                     elva-fairy-800w.jpg 800w"
             sizes="(max-width: 320px) 280px,
                    (max-width: 480px) 440px,
                    800px"
src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> 

[jasonbahl]

@drewbaker so, In looking at WP Core, I only see wp_get_attachment_image_srcset executed once, by the twenty-sixteen theme:

https://github.com/WordPress/WordPress/search?l=PHP&q=wp_get_attachment_image_srcset

Is there another function that's similar but more widely used? 🤔

[drewbaker]

Did you check this out?
https://core.trac.wordpress.org/browser/tags/5.1.1/src/wp-includes/media.php#L897

That wp_get_attachment_image() is used a lot in sites, and it calls wp_calculate_image_srcset() and wp_calculate_image_sizes().

[jasonbahl]

ah ha! wp_calculate_image_srcset is used more. Thanks! Checking this out a bit more to figure out the best approach in the GraphQL Schema.