Add support for responsive images using srcset and sizes

[joemcgill]

When image markup is generated in WordPress, we should automatically include srcset and sizes attributes when possible in order to provide basic responsive image support.

To provide this, members of the ​Responsive Images Community Group created a ​feature plugin, with development on ​GitHub.

The plugin uses the default image sizes and available custom image sizes of the same aspect ratio when generating markup. It does not create additional sizes.

This is a placeholder ticket for initial patches, to become a tracking ticket if/when the plugin is approved for merge.

[joemcgill]

First patch for #33641

[joemcgill]

This is a first pass at a patch for adding responsive image support to core, via srcset and sizes, to core.

## Code changes

This patch adds the following new functions to media.php:

• wp_get_attachment_image_srcset_array - Returns an array of image candidate string data used to build a srcset value for an attachment given an attachement_id and size.
• wp_get_attachment_image_srcset - Returns the srcset value for an attachment given an attachement_id and size.
• wp_get_attachment_image_sized - Returns the sizes value for an attachment given an attachement_id and size and optional arguments used to alter its output.
• wp_make_content_images_responsive - A display filter for adding srcset and sizes to images embedded in content.
• wp_img_add_srcset_and_sizes - A utility function used by wp_make_content_images_responsive to add srcset and sizes to a single img element.

This patch also modifies the following existing core functions:

• Modify wp_get_attachment_image so the HTML returned for an image includes srcset and sizes.
• Modify get_media_embedded_in_content by adding img to the list of accepted tags that can be matched in content. This is used in wp_make_content_images_responsive to find all of the images embedded in content before passing them off to wp_img_add_srcset_and_sizes.

## Unit tests

This adds 12 new unit tests to tests/media.php and a new factory method to WP_UnitTest_Factory_For_Attachment named create_upload_object which creates an attachment and metadata from a file, as discussed in #34075. Several existing unit tests were updated to make use of this new factory method.

## Performance info

Based on our internal tests, the display filter is adding ~1ms per image being filtered. ​https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/pull/207#issuecomment-145506195

Running the wp_make_content_images_responsive display filter adds 2 queries to page loads total. By passing an array of all the attachment ids to _prime_post_caches, we avoid needing to query for post data associated with each individual image being transformed.

[joemcgill]

test-image-large.png

[DrewAPicture]

Docs / standards fixes

[joemcgill]

I noticed that the test image didn't get included in the patch for some reason. test-image-large.png​ needs to be in the /tests/phpunit/data/images/ folder before running the tests added by this patch.

[DrewAPicture]

Added 33641.2.patch​ which includes some docs and coding standards adjustments.

Notable stuff:

• Adding backticks in inline comments is moot because they aren't parsed
• Added a changelog entry for the media_embedded_in_content_allowed_types hook
• Updated the version on the wp_image_sizes_args hook (safe to assume 2.4.0 is the version of the plugin)
• In a couple of functions, I renamed the $id parameter to $attachment_id for self-documentation purposes
• Some spacing and syntax in various places.

Overall, this is extremely well-documented. Nice work.

[Shapeshifter 3]

Isn't 2.5.2 the correct version number for the plugin ?

[joemcgill]

Hi Shapeshifter,

The patch number reflects the Trac ticket number associated with the patch, which has no relation to the version number of the plugin this code is coming from.

Thanks!

[Shapeshifter 3]

Replying to joemcgill:

Hi Shapeshifter,

The patch number reflects the Trac ticket number associated with the patch, which has no relation to the version number of the plugin this code is coming from.

Thanks!

I learned something...Thank You...Can't wait for this to happen!

[wonderboymusic]

In 34855:

Merge the Responsive Images feature plugin into core, initial commit. See: ​https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/

New functions in media.php:

• wp_get_attachment_image_srcset_array() - Returns an array of image candidate string data used to build a srcset value for an attachment given an $attachement_id and $size.
• wp_get_attachment_image_srcset() - Returns the srcset value for an attachment given an $attachement_id and $size.
• wp_get_attachment_image_sizes() - Returns the sizes value for an attachment given an $attachement_id and $size and optional arguments used to alter its output.
• wp_make_content_images_responsive() - A display filter for adding srcset and sizes to images embedded in content.
• wp_img_add_srcset_and_sizes() - A utility function used by wp_make_content_images_responsive() to add srcset and sizes to a single <img> element.

Modifies existing core functions:

• Modify wp_get_attachment_image() so the HTML returned for an image includes srcset and sizes.
• Modify get_media_embedded_in_content() (sup, 3.6 leftover) by adding <img> to the list of accepted tags that can be matched in content. This is used in wp_make_content_images_responsive() to find all of the images embedded in content before passing them off to wp_img_add_srcset_and_sizes().

Tests:

• Add a new factory method to WP_UnitTest_Factory_For_Attachment named create_upload_object()
• Adds unit tests
• Updates unit tests

Props joemcgill, tevko, jaspermdegroot, mdmcginn, barryceelen, peterwilsoncc, fsylum, wonderboymusic, chriscoyier, benjaminpick, jrfnl, #12kingkool68, janhenckens, ryanmarkel, side777, ryelle, wturrell, micahmills, mattbagwell, coliff, DrewAPicture.
See #33641.

[joemcgill]

Remove outdated inline comment.

[joemcgill]

Caught an outdated inline comment that slipped through. 33641.3.patch​ removes that comment.

[DrewAPicture]

In 34876:

Docs: Update an inline comment in wp_get_attachment_image_sizes(), which came in as part of the Responsive Images merge in [34855].

Props joemcgill.
See #33641.

[kraftbj]

checks for img_width before checking for it.

[kraftbj]

If a filter filters out img_width, a PHP notice is thrown since we're checking for a non-variable.

[joemcgill]

Replying to kraftbj:

Good catch. Maybe we could simplify and just do a if ( ! empty( $image_width ) ) check there.

[kraftbj]

Replying to joemcgill:

Good catch. Maybe we could simplify and just do a if ( ! empty( $image_width ) ) check there.

Need more coffee. That's the way to go. Adding patch that if ( empty ( $img_width ) ) and adjusts the inline doc above to match var names.

[kraftbj]

A better version of .4.

[joemcgill]

Replying to kraftbj:

Perfect. And thanks for catching the mistake in my sloppy comment code.

[wonderboymusic]

In 35250:

Media: in wp_get_attachment_image_sizes(), ensure that $img_width exists when the image does not.

Props kraftbj.
See #33641.

[wonderboymusic]

New tickets.

[johnbillion]

In 35346:

Correct some more tests which were using example.org instead of WP_TESTS_DOMAIN.

See #33641, #34000

[jaspermdegroot]

Changes in media tests

[jaspermdegroot]

In two tests for wp_calculate_image_srcset() we were using a random size name "yoav". This gives the impression that we are testing what happens if an invalid size name is used, but we are not. The test helper function _get_image_size_array_from_name() returns the default size array in this case so we are testing the code with a normal size array.
In 33641.6.diff I removed this size name from the tests and I added a new test that actually tests an invalid size name.

I thought this was the best place to add the patch even though the ticket closed. Let me know if I should open a new ticket for it.

[azaozz]

In 35560:

Responsive images: add test for invalid size name. Remove invalid size from other tests.

Props jaspermdegroot.
See #33641.