From e3cf8cb0356c66ab916112f63d1e0259a55ed748 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Fri, 20 Nov 2015 14:19:36 -0600 Subject: [PATCH 01/18] Remove redundant 'type' descriptions from docblocs --- wp-tevko-core-functions.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index 2d13301..caa00c6 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -200,12 +200,12 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac * @param array $sources { * One or more arrays of source data to include in the 'srcset'. * - * @type type array $width { - * @type type string $url The URL of an image source. - * @type type string $descriptor The descriptor type used in the image candidate string, - * either 'w' or 'x'. - * @type type int $value The source width, if paired with a 'w' descriptor or a - * pixel density value if paired with an 'x' descriptor. + * @type array $width { + * @type string $url The URL of an image source. + * @type string $descriptor The descriptor type used in the image candidate string, + * either 'w' or 'x'. + * @type int $value The source width if paired with a 'w' descriptor, or a + * pixel density value if paired with an 'x' descriptor. * } * } * @param array $size_array Array of width and height values in pixels (in that order). From 0bd44b6bfdabe6b34704ed9c3e737537cdbfd659 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Nov 2015 13:14:47 +0100 Subject: [PATCH 02/18] Added see tags See https://core.trac.wordpress.org/changeset/35715 --- wp-tevko-core-functions.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index caa00c6..b4188d4 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -54,6 +54,8 @@ function _wp_get_image_size_from_meta( $size_name, $image_meta ) { * * @since 3.0.0 * + * @see wp_calculate_image_srcset() + * * @param int $attachment_id Image attachment ID. * @param array|string $size Optional. Image size. Accepts any valid image size, or an array of * width and height values in pixels (in that order). Default 'medium'. @@ -234,6 +236,8 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac * * @since 3.0.0 * + * @see wp_calculate_image_sizes() + * * @param int $attachment_id Image attachment ID. * @param array|string $size Optional. Image size. Accepts any valid image size, or an array of width * and height values in pixels (in that order). Default 'medium'. From 4a480c8fea4366f158ed1be27621831e8eb7688b Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Nov 2015 14:50:40 +0100 Subject: [PATCH 03/18] Added usage examples to hooks in the reference --- readme.md | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/readme.md b/readme.md index 15c4fa8..1c04752 100644 --- a/readme.md +++ b/readme.md @@ -153,6 +153,26 @@ Array of width and height values in pixels (in that order). `wp_calculate_image_srcset()` +##### Usage Example + +``` + 800 ) { + $max_width = 2048; + } + + return $max_width; +} +add_filter( 'max_srcset_image_width', 'custom_max_srcset_image_width', 10, 2 ); + +?> +``` + --- #### Hook wp_calculate_image_srcset @@ -189,6 +209,33 @@ Image attachment ID or 0. `wp_calculate_image_srcset()` +##### Usage Example + +``` + $source ) { + if ( $source['value'] > 800 ) { + unset( $sources[ $key ] ); + } + } + } + } + + return $sources; +} +add_filter( 'wp_calculate_image_srcset', 'custom_wp_calculate_image_srcset', 10, 5 ); + +?> +``` + --- #### Function wp_get_attachment_image_sizes @@ -313,6 +360,36 @@ Image attachment ID of the original image or 0. `wp_calculate_image_sizes()` +##### Usage Example + +``` + $content_width ) { + $upload_dir = wp_upload_dir(); + $upload_baseurl = $upload_dir['baseurl']; + $fullsize_file = $image_meta['file']; + $fullsize_url = trailingslashit( $upload_baseurl ) . $fullsize_file; + + if ( $image_src === $fullsize_url ) { + $sizes = '(max-width: ' . $content_width . 'px) 100vw, ' . $content_width . 'px'; + } + } + } + + return $sizes; +} +add_filter( 'wp_calculate_image_sizes', 'custom_wp_calculate_image_sizes', 10, 5 ); + +?> +``` + --- ### Backward Compatibility From 846727ce17b5bc43fb5ae87da3c82baf6a984978 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 21 Nov 2015 15:04:09 +0100 Subject: [PATCH 04/18] Minor change in readme --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 1c04752..c74598d 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ This plugin works by including all available image sizes for each image upload. ## Contribution Guidelines -Please submit pull requests to our dev branch. If your contribution requires such, please aim to include appropriate tests with your pr as well. +Please submit pull requests to our dev branch. If your contribution requires such, please aim to include appropriate tests with your PR as well. ## Documentation @@ -19,7 +19,7 @@ No configuration is needed! Just install the plugin and enjoy automatic responsi ### For Theme Developers -This plugin includes several functions that can be used by theme and plugin developers in templates. +This plugin includes several functions that can be used by theme and plugin developers in templates, as well as hooks to filter their output. ### Advanced Image Compression From 8180d95d777f78bf15e2b25d616489dbcb645bf1 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Tue, 24 Nov 2015 09:58:23 +0100 Subject: [PATCH 05/18] Added missing param in readme hook reference --- readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/readme.md b/readme.md index c74598d..af4ad4d 100644 --- a/readme.md +++ b/readme.md @@ -199,6 +199,9 @@ $width (array) { **$size_array** (array) Array of width and height values in pixels (in that order). +**$image_src** (string) +The `src` of the image. + **$image_meta** (array) The image meta data as returned by `wp_get_attachment_metadata()`. From 8335f84224d48ed8ceb93a17642118113af9c1ae Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 9 Dec 2015 23:18:50 +0100 Subject: [PATCH 06/18] Minor coding standards fix in test suite --- tests/test-suite.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index b7575dc..14b3ddb 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -243,8 +243,9 @@ function test_tevkori_get_srcset_array_no_width() { $id = self::create_upload_object( self::$test_file_name ); $srcset = tevkori_get_srcset_array( $id, 'medium' ); - // The srcset should be false + // The srcset should be false. $this->assertFalse( $srcset ); + // Remove filter. remove_filter( 'image_downsize', array( $this, '_filter_image_downsize' ) ); } From 2669721c4a782f18dcc950b76b784d3029e46ca4 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 3 Dec 2015 09:16:43 -0600 Subject: [PATCH 07/18] Use preg_match_all to find images in content Rather than relying on `get_media_embedded_in_content()` to retrieve all the images embedded in content, we can use a simple `preg_match_all()`, which is more efficient and doesn't skip images written with trailing slashes. --- wp-tevko-core-functions.php | 47 +++---------------------------- wp-tevko-deprecated-functions.php | 42 +++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 43 deletions(-) diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index b4188d4..ce3c9bf 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -329,11 +329,13 @@ function wp_calculate_image_sizes( $size, $image_src = null, $image_meta = null, * @return string Converted content with 'srcset' and 'sizes' attributes added to images. */ function wp_make_content_images_responsive( $content ) { - $images = tevkori_get_media_embedded_in_content( $content, 'img' ); + if ( ! preg_match_all( '/]+>/', $content, $matches ) ) { + return $content; + } $selected_images = $attachment_ids = array(); - foreach( $images as $image ) { + foreach( $matches[0] as $image ) { if ( false === strpos( $image, ' srcset=' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) && ( $attachment_id = absint( $class_id[1] ) ) ) { @@ -366,47 +368,6 @@ function wp_make_content_images_responsive( $content ) { } add_filter( 'the_content', 'wp_make_content_images_responsive', 5, 1 ); -/** - * Check the content blob for an audio, video, object, embed, or iframe tags. - * This is a copy of `get_media_embedded_in_content()` in WP 4.4 in order to provide - * back compatibility to older versions of WordPress. - * - * @since 3.0.0 - * - * @param string $content A string which might contain media data. - * @param array $types An array of media types: 'audio', 'video', 'object', 'embed', or 'iframe'. - * @return array A list of found HTML media embeds. - */ -function tevkori_get_media_embedded_in_content( $content, $types = null ) { - $html = array(); - - /** - * Filter the embedded media types that are allowed to be returned from the content blob. - * - * @param array $allowed_media_types An array of allowed media types. Default media types are - * 'audio', 'video', 'object', 'embed', 'iframe', and 'img'. - */ - $allowed_media_types = apply_filters( 'media_embedded_in_content_allowed_types', array( 'audio', 'video', 'object', 'embed', 'iframe', 'img' ) ); - - if ( ! empty( $types ) ) { - if ( ! is_array( $types ) ) { - $types = array( $types ); - } - - $allowed_media_types = array_intersect( $allowed_media_types, $types ); - } - - $tags = implode( '|', $allowed_media_types ); - - if ( preg_match_all( '#<(?P' . $tags . ')[^<]*?(?:>[\s\S]*?<\/(?P=tag)>|\s*\/>)#', $content, $matches ) ) { - foreach ( $matches[0] as $match ) { - $html[] = $match; - } - } - - return $html; -} - /** * Adds 'srcset' and 'sizes' attributes to an existing 'img' element. * diff --git a/wp-tevko-deprecated-functions.php b/wp-tevko-deprecated-functions.php index f2bbc35..374c699 100644 --- a/wp-tevko-deprecated-functions.php +++ b/wp-tevko-deprecated-functions.php @@ -412,3 +412,45 @@ function _wp_get_attachment_image_sizes_filter_shim( $sizes, $size, $image_src, } } add_filter( 'wp_calculate_image_sizes', '_wp_get_attachment_image_sizes_filter_shim', 10, 5 ); + +/** + * Check the content blob for an audio, video, object, embed, or iframe tags. + * This is a copy of `get_media_embedded_in_content()` in WP 4.4 in order to provide + * back compatibility to older versions of WordPress. + * + * @since 3.0.0 + * + * @param string $content A string which might contain media data. + * @param array $types An array of media types: 'audio', 'video', 'object', 'embed', or 'iframe'. + * @return array A list of found HTML media embeds. + */ +function tevkori_get_media_embedded_in_content( $content, $types = null ) { + _deprecated_function( __FUNCTION__, '3.0.0', 'get_media_embedded_in_content()' ); + $html = array(); + + /** + * Filter the embedded media types that are allowed to be returned from the content blob. + * + * @param array $allowed_media_types An array of allowed media types. Default media types are + * 'audio', 'video', 'object', 'embed', 'iframe', and 'img'. + */ + $allowed_media_types = apply_filters( 'media_embedded_in_content_allowed_types', array( 'audio', 'video', 'object', 'embed', 'iframe', 'img' ) ); + + if ( ! empty( $types ) ) { + if ( ! is_array( $types ) ) { + $types = array( $types ); + } + + $allowed_media_types = array_intersect( $allowed_media_types, $types ); + } + + $tags = implode( '|', $allowed_media_types ); + + if ( preg_match_all( '#<(?P' . $tags . ')[^<]*?(?:>[\s\S]*?<\/(?P=tag)>|\s*\/>)#', $content, $matches ) ) { + foreach ( $matches[0] as $match ) { + $html[] = $match; + } + } + + return $html; +} From a97ce55250ef79edf365894ecb34654b4d95e115 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 3 Dec 2015 14:12:41 -0600 Subject: [PATCH 08/18] Test new content image filter This swaps out `test_tevkori_filter_content_images()` for `test_wp_make_content_images_responsive()` which is the same basic test, but for the new function used in the plugin and in core, instead of testing our deprecated content filter. This also updates the tests to match changes that have been added to WP Core in [r35412](https://core.trac.wordpress.org/changeset/35412). --- tests/test-suite.php | 81 +++++++++++++++++++++----------------------- 1 file changed, 39 insertions(+), 42 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index 14b3ddb..ca08498 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -396,62 +396,59 @@ function test_tevkori_get_sizes_string() { /** * @group 170 - * @expectedDeprecated tevkori_get_srcset_string - * @expectedDeprecated tevkori_get_sizes_string - * @expectedDeprecated tevkori_filter_content_images */ - function test_tevkori_filter_content_images() { + function test_wp_make_content_images_responsive() { // Make an image. - $id = self::$large_id; + $image_meta = wp_get_attachment_metadata( self::$large_id ); + $size_array = array( $image_meta['sizes']['medium']['width'], $image_meta['sizes']['medium']['height'] ); - $srcset = tevkori_get_srcset_string( $id, 'medium' ); - $sizes = tevkori_get_sizes_string( $id, 'medium' ); + $srcset = wp_get_attachment_image_srcset( self::$large_id, 'medium', $image_meta ); + $sizes = wp_get_attachment_image_srcset( self::$large_id, 'medium', $image_meta ); // Function used to build HTML for the editor. - $img = get_image_tag( $id, '', '', '', 'medium' ); - $img_no_size = str_replace( 'size-', '', $img ); - $img_no_size_id = str_replace( 'wp-image-', 'id-', $img_no_size ); - $img_with_sizes = str_replace( ']+) />|', '', $img ); - $respimg_no_size = preg_replace('|]+) />|', '', $img_no_size ); - $respimg_with_sizes = preg_replace('|]+) />|', '', $img_with_sizes ); - - $content = '

Welcome to WordPress! This post contains important information. After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.

-

First things first:

- + $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); + $img_no_size_in_class = str_replace( 'size-', '', $img ); + $img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img ); + $img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height ); + $img_no_size_id = str_replace( 'wp-image-', 'id-', $img ); + $img_with_sizes_attr = str_replace( '', '/>', $img ); + $img_html5 = str_replace( ' />', '>', $img ); + + // Manually add srcset and sizes to the markup from get_image_tag(); + $respimg = preg_replace( '|]+) />|', '', $img ); + $respimg_no_size_in_class = preg_replace( '|]+) />|', '', $img_no_size_in_class ); + $respimg_no_width_height = preg_replace( '|]+) />|', '', $img_no_width_height ); + $respimg_with_sizes_attr = preg_replace('|]+) />|', '', $img_with_sizes_attr ); + $respimg_xhtml = preg_replace( '|]+)/>|', '', $img_xhtml ); + $respimg_html5 = preg_replace( '|]+)>|', '', $img_html5 ); + + $content = ' +

Image, standard. Should have srcset and sizes.

%1$s - - +

Image, no size class. Should have srcset and sizes.

%2$s -

As a subscriber, you will receive an email every time an update is available (and only then). This will make it easier to keep your site up to date, and secure from evildoers.
- When a new version is released, log in to the Dashboard and follow the instructions.
- Upgrading is a couple of clicks!

- +

Image, no width and height attributes. Should have srcset and sizes (from matching the file name).

%3$s -

Then you can start enjoying the WordPress experience:

- +

Image, no attachment ID class. Should NOT have srcset and sizes.

+ %4$s + +

Image, with sizes attribute. Should NOT have two sizes attributes.

+ %5$s + +

Image, XHTML 1.0 style (no space before the closing slash). Should have srcset and sizes.

+ %6$s - %4$s'; +

Image, HTML 5.0 style. Should have srcset and sizes.

+ %7$s'; - $content_unfiltered = sprintf( $content, $img, $img_no_size, $img_no_size_id, $img_with_sizes ); - $content_filtered = sprintf( $content, $respimg, $respimg_no_size, $img_no_size_id, $respimg_with_sizes ); + $content_unfiltered = sprintf( $content, $img, $img_no_size_in_class, $img_no_width_height, $img_no_size_id, $img_with_sizes_attr, $img_xhtml, $img_html5 ); + $content_filtered = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id, $respimg_with_sizes_attr, $respimg_xhtml, $respimg_html5 ); - $this->assertSame( $content_filtered, tevkori_filter_content_images( $content_unfiltered ) ); + $this->assertSame( $content_filtered, wp_make_content_images_responsive( $content_unfiltered ) ); } /** From 437eb9418c1fba532546c1d69ef28a56576bc1e5 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 3 Dec 2015 14:19:30 -0600 Subject: [PATCH 09/18] Decrease aspect ratio variance for images included in srcset. This changes the accepted variance in aspect ratios from .01, which was too high, to .002, which should handle most cases. See: https://core.trac.wordpress.org/ticket/34810 --- wp-tevko-core-functions.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index ce3c9bf..3c68b4b 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -183,8 +183,8 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac $image_ratio_compare = 0; } - // If the new ratio differs by less than 0.01, use it. - if ( abs( $image_ratio - $image_ratio_compare ) < 0.01 ) { + // If the new ratio differs by less than 0.002, use it. + if ( abs( $image_ratio - $image_ratio_compare ) < 0.002 ) { // Add the URL, descriptor, and value to the sources array to be returned. $sources[ $image['width'] ] = array( 'url' => $image_baseurl . $image['file'], From 4c4c1650b4742f551957a39e8511ead867d43eb0 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Fri, 4 Dec 2015 15:48:50 -0600 Subject: [PATCH 10/18] Keep default themes from breaking our tests * Expect all possible intermediate sizes in our tests. * Add code to remove default theme setup hooks from our tests. * Update content filter tests to be more explanitory. --- tests/test-suite.php | 92 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 73 insertions(+), 19 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index ca08498..bf10e4a 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -9,6 +9,13 @@ class RICG_Responsive_Images_Tests extends WP_UnitTestCase { public static function setUpBeforeClass() { self::$test_file_name = dirname(__FILE__) . '/data/test-large.png'; self::$large_id = self::create_upload_object( self::$test_file_name ); + + // Keep default themes from ruining things. + // remove_action( 'after_setup_theme', 'twentyfifteen_setup' ); + // remove_action( 'after_setup_theme', 'twentysixteen_setup' ); + + // Remove Twenty Sixteen sizes filter for now. + remove_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr' ); } public static function tearDownAfterClass() { @@ -50,22 +57,33 @@ public static function create_upload_object( $filename, $parent = 0 ) { * @expectedDeprecated tevkori_get_srcset_array */ function test_tevkori_get_srcset_array() { + global $_wp_additional_image_sizes; + // make an image $id = self::$large_id; $srcset = tevkori_get_srcset_array( $id, 'medium' ); $year_month = date('Y/m'); - $image = wp_get_attachment_metadata( $id ); + $image_meta = wp_get_attachment_metadata( $id ); + + $intermediates = array( 'medium', 'medium_large', 'large', 'full' ); + + // Add any soft crop intermediate sizes. + foreach ( $_wp_additional_image_sizes as $name => $additional_size ) { + if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) { + $intermediates[] = $name; + } + } - foreach( $image['sizes'] as $name => $size ) { + foreach( $image_meta['sizes'] as $name => $size ) { // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4. - if ( in_array( $name, array( 'medium', 'medium_large', 'large' ) ) ) { + if ( in_array( $name, $intermediates ) ) { $expected[$size['width']] = 'http://example.org/wp-content/uploads/' . $year_month = date('Y/m') . '/' . $size['file'] . ' ' . $size['width'] . 'w'; } } // Add the full size width at the end. - $expected[$image['width']] = 'http://example.org/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] .'w'; + $expected[$image_meta['width']] = 'http://example.org/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] .'w'; $this->assertSame( $expected, $srcset ); } @@ -120,22 +138,33 @@ function test_tevkori_get_srcset_array_false() { * @expectedDeprecated tevkori_get_srcset_array */ function test_tevkori_get_srcset_array_random_size_name() { - // Make an image. + global $_wp_additional_image_sizes; + + // make an image $id = self::$large_id; $srcset = tevkori_get_srcset_array( $id, 'foo' ); $year_month = date('Y/m'); - $image = wp_get_attachment_metadata( $id ); + $image_meta = wp_get_attachment_metadata( $id ); - foreach( $image['sizes'] as $name => $size ) { + $intermediates = array( 'medium', 'medium_large', 'large', 'full' ); + + // Add any soft crop intermediate sizes. + foreach ( $_wp_additional_image_sizes as $name => $additional_size ) { + if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) { + $intermediates[] = $name; + } + } + + foreach( $image_meta['sizes'] as $name => $size ) { // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4. - if ( in_array( $name, array( 'medium', 'medium_large', 'large' ) ) ) { + if ( in_array( $name, $intermediates ) ) { $expected[$size['width']] = 'http://example.org/wp-content/uploads/' . $year_month = date('Y/m') . '/' . $size['file'] . ' ' . $size['width'] . 'w'; } } // Add the full size width at the end. - $expected[$image['width']] = 'http://example.org/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] .'w'; + $expected[$image_meta['width']] = 'http://example.org/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] .'w'; $this->assertSame( $expected, $srcset ); } @@ -144,6 +173,7 @@ function test_tevkori_get_srcset_array_random_size_name() { * @expectedDeprecated tevkori_get_srcset_array */ function test_tevkori_get_srcset_array_no_date_upoads() { + global $_wp_additional_image_sizes; // Save the current setting for uploads folders. $uploads_use_yearmonth_folders = get_option( 'uploads_use_yearmonth_folders' ); @@ -153,17 +183,26 @@ function test_tevkori_get_srcset_array_no_date_upoads() { // Make an image. $id = self::create_upload_object( self::$test_file_name ); $srcset = tevkori_get_srcset_array( $id, 'medium' ); - $image = wp_get_attachment_metadata( $id ); + $image_meta = wp_get_attachment_metadata( $id ); + + $intermediates = array( 'medium', 'medium_large', 'large', 'full' ); + + // Add any soft crop intermediate sizes. + foreach ( $_wp_additional_image_sizes as $name => $additional_size ) { + if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) { + $intermediates[] = $name; + } + } - foreach( $image['sizes'] as $name => $size ) { + foreach( $image_meta['sizes'] as $name => $size ) { // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4. - if ( in_array( $name, array( 'medium', 'medium_large', 'large' ) ) ) { + if ( in_array( $name, $intermediates ) ) { $expected[$size['width']] = 'http://example.org/wp-content/uploads/' . $size['file'] . ' ' . $size['width'] . 'w'; } } // Add the full size width at the end. - $expected[$image['width']] = 'http://example.org/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] .'w'; + $expected[$image_meta['width']] = 'http://example.org/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] .'w'; $this->assertSame( $expected, $srcset ); @@ -254,23 +293,34 @@ function test_tevkori_get_srcset_array_no_width() { * @expectedDeprecated tevkori_get_srcset_string */ function test_tevkori_get_srcset_string() { + global $_wp_additional_image_sizes; + // Make an image. $id = self::$large_id; $srcset = tevkori_get_srcset_string( $id, 'full' ); - $image = wp_get_attachment_metadata( $id ); + $image_meta = wp_get_attachment_metadata( $id ); $year_month = date('Y/m'); + $intermediates = array( 'medium', 'medium_large', 'large', 'full' ); + + // Add any soft crop intermediate sizes. + foreach ( $_wp_additional_image_sizes as $name => $additional_size ) { + if ( ! $_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height'] ) { + $intermediates[] = $name; + } + } + $expected = ''; - foreach( $image['sizes'] as $name => $size ) { + foreach( $image_meta['sizes'] as $name => $size ) { // Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4. - if ( in_array( $name, array( 'medium', 'medium_large', 'large' ) ) ) { + if ( in_array( $name, $intermediates ) ) { $expected .= 'http://example.org/wp-content/uploads/' . $year_month = date('Y/m') . '/' . $size['file'] . ' ' . $size['width'] . 'w, '; } } // Add the full size width at the end. - $expected .= 'http://example.org/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] .'w'; + $expected .= 'http://example.org/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] .'w'; $expected = sprintf( 'srcset="%s"', $expected ); @@ -289,6 +339,9 @@ function test_tevkori_get_sizes() { // Test sizes against the default WP sizes. $intermediates = array( 'thumbnail', 'medium', 'large' ); + // Make sure themes aren't filtering the sizes array. + remove_all_filters( 'wp_calculate_image_sizes' ); + foreach( $intermediates as $int ) { $width = get_option( $int . '_size_w' ); @@ -306,6 +359,7 @@ function test_tevkori_get_sizes() { * @expectedDeprecated tevkori_get_sizes */ function test_tevkori_get_sizes_with_args() { + // Make an image. $id = self::$large_id; @@ -402,8 +456,8 @@ function test_wp_make_content_images_responsive() { $image_meta = wp_get_attachment_metadata( self::$large_id ); $size_array = array( $image_meta['sizes']['medium']['width'], $image_meta['sizes']['medium']['height'] ); - $srcset = wp_get_attachment_image_srcset( self::$large_id, 'medium', $image_meta ); - $sizes = wp_get_attachment_image_srcset( self::$large_id, 'medium', $image_meta ); + $srcset = sprintf( 'srcset="%s"', esc_attr( wp_get_attachment_image_srcset( self::$large_id, 'medium', $image_meta ) ) ); + $sizes = sprintf( 'sizes="%s"', esc_attr( wp_get_attachment_image_sizes( self::$large_id, 'medium', $image_meta ) ) ); // Function used to build HTML for the editor. $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); From 0232a482812ed723a3d952bc6e72d27be9996ceb Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 7 Dec 2015 21:22:23 -0600 Subject: [PATCH 11/18] Fix inline doc formatting issues --- tests/test-suite.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index bf10e4a..8680173 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -59,7 +59,7 @@ public static function create_upload_object( $filename, $parent = 0 ) { function test_tevkori_get_srcset_array() { global $_wp_additional_image_sizes; - // make an image + // Make an image. $id = self::$large_id; $srcset = tevkori_get_srcset_array( $id, 'medium' ); @@ -140,7 +140,7 @@ function test_tevkori_get_srcset_array_false() { function test_tevkori_get_srcset_array_random_size_name() { global $_wp_additional_image_sizes; - // make an image + // Make an image. $id = self::$large_id; $srcset = tevkori_get_srcset_array( $id, 'foo' ); @@ -174,6 +174,7 @@ function test_tevkori_get_srcset_array_random_size_name() { */ function test_tevkori_get_srcset_array_no_date_upoads() { global $_wp_additional_image_sizes; + // Save the current setting for uploads folders. $uploads_use_yearmonth_folders = get_option( 'uploads_use_yearmonth_folders' ); @@ -359,7 +360,6 @@ function test_tevkori_get_sizes() { * @expectedDeprecated tevkori_get_sizes */ function test_tevkori_get_sizes_with_args() { - // Make an image. $id = self::$large_id; @@ -469,7 +469,7 @@ function test_wp_make_content_images_responsive() { $img_xhtml = str_replace( ' />', '/>', $img ); $img_html5 = str_replace( ' />', '>', $img ); - // Manually add srcset and sizes to the markup from get_image_tag(); + // Manually add srcset and sizes to the markup from get_image_tag(). $respimg = preg_replace( '|]+) />|', '', $img ); $respimg_no_size_in_class = preg_replace( '|]+) />|', '', $img_no_size_in_class ); $respimg_no_width_height = preg_replace( '|]+) />|', '', $img_no_width_height ); From 7b845eaad385a3acf69191351f08e64203cc3a83 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 7 Dec 2015 21:25:28 -0600 Subject: [PATCH 12/18] Update deprecated docs for tevkori_get_media_embedded_in_content --- wp-tevko-deprecated-functions.php | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/wp-tevko-deprecated-functions.php b/wp-tevko-deprecated-functions.php index 374c699..44a08f5 100644 --- a/wp-tevko-deprecated-functions.php +++ b/wp-tevko-deprecated-functions.php @@ -414,18 +414,19 @@ function _wp_get_attachment_image_sizes_filter_shim( $sizes, $size, $image_src, add_filter( 'wp_calculate_image_sizes', '_wp_get_attachment_image_sizes_filter_shim', 10, 5 ); /** - * Check the content blob for an audio, video, object, embed, or iframe tags. - * This is a copy of `get_media_embedded_in_content()` in WP 4.4 in order to provide - * back compatibility to older versions of WordPress. + * Check the content blob for an audio, video, object, embed, iframe, or img tags. + * This is a modified version of `get_media_embedded_in_content()` that was modified + * during the WP 4.4 cycle to return images in content, before being reverted. * * @since 3.0.0 + * @deprecated 3.1.1 Use 'get_media_embedded_in_content()' * * @param string $content A string which might contain media data. - * @param array $types An array of media types: 'audio', 'video', 'object', 'embed', or 'iframe'. + * @param array $types An array of media types: 'audio', 'video', 'object', 'embed', 'iframe', or 'img'. * @return array A list of found HTML media embeds. */ function tevkori_get_media_embedded_in_content( $content, $types = null ) { - _deprecated_function( __FUNCTION__, '3.0.0', 'get_media_embedded_in_content()' ); + _deprecated_function( __FUNCTION__, '3.1.1', 'get_media_embedded_in_content()' ); $html = array(); /** From 7d0c8b6a167bfb92a1197dd06791a66c8edb6862 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 7 Dec 2015 21:35:34 -0600 Subject: [PATCH 13/18] Don't generate responsive image attributes if src does not match ID in wp-image- class. We rely on the wp-image- class to quickly find an attachment ID to add responsive image attributes. To avoid incorrect images being displayed, do not add these attributes if the src does not match the meta from the attachment ID in the class. See #34898. --- tests/test-suite.php | 17 +++++++++++++++++ wp-tevko-core-functions.php | 22 ++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/tests/test-suite.php b/tests/test-suite.php index 8680173..4646804 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -505,6 +505,23 @@ function test_wp_make_content_images_responsive() { $this->assertSame( $content_filtered, wp_make_content_images_responsive( $content_unfiltered ) ); } + /** + * When rendering attributes for responsive images, + * we rely on the 'wp-image-*' class to find the image by ID. + * The class name may not be consistent with attachment IDs in DB when + * working with imported content or when a user has edited + * the 'src' attribute manually. To avoid incorrect images + * being displayed, ensure we don't add attributes in this case. + */ + function test_wp_make_content_images_responsive_wrong() { + $image = get_image_tag( self::$large_id, '', '', '', 'medium' ); + + // Replace the src URL. + $image_wrong_src = preg_replace( '|src="[^"]+"|', 'src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/foo.jpg"', $image ); + + $this->assertSame( $image_wrong_src, wp_make_content_images_responsive( $image_wrong_src ) ); + } + /** * @group 170 * @expectedDeprecated tevkori_filter_content_images diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index 3c68b4b..44eb9b3 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -402,6 +402,28 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) { return $image; } + $base_url = trailingslashit( _wp_upload_dir_baseurl() ); + $image_base_url = $base_url; + + $dirname = dirname( $image_meta['file'] ); + if ( $dirname !== '.' ) { + $image_base_url .= trailingslashit( $dirname ); + } + + $all_sizes = wp_list_pluck( $image_meta['sizes'], 'file' ); + + foreach ( $all_sizes as $key => $file ) { + $all_sizes[ $key ] = $image_base_url . $file; + } + + // Add the original image. + $all_sizes[] = $base_url . $image_meta['file']; + + // Bail early if the image src doesn't match any of the known image sizes. + if ( ! in_array( $image_src, $all_sizes ) ) { + return $image; + } + $width = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0; $height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0; From cd310234d3a636f29995d428b2972b6c9fa6aec1 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 14 Dec 2015 07:19:42 -0600 Subject: [PATCH 14/18] Fix bug where scheme differences would cause no srcset to be generated In 3e79568 (based off changeset r35820) image src URLs that differ from the scheme being generated by `wp_upload_dir()` would fail to return a srcset. This Changes the logic from 3e79568 to only look for matching filenames rather than full URLs when testing to make sure the wp-image-{id} matches the image rererenced by the src attribute. See: https://core.trac.wordpress.org/ticket/35045 --- tests/test-suite.php | 33 +++++++++++++++++++++++++++++++++ wp-tevko-core-functions.php | 27 ++++++++++++++------------- 2 files changed, 47 insertions(+), 13 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index 4646804..5d78d6b 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -635,4 +635,37 @@ function test_wp_calculate_image_srcset_animated_gifs() { $this->assertFalse( strpos( wp_calculate_image_srcset( $large_src, $size_array, $image_meta ), $full_src ) ); } + function test_wp_make_content_images_responsive_schemes() { + $image_meta = wp_get_attachment_metadata( self::$large_id ); + $size_array = array( (int) $image_meta['sizes']['medium']['width'], (int) $image_meta['sizes']['medium']['height'] ); + + $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) ); + $sizes = sprintf( 'sizes="%s"', wp_get_attachment_image_sizes( self::$large_id, $size_array, $image_meta ) ); + + // Build HTML for the editor. + $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); + $img_https = str_replace( 'http://', 'https://', $img ); + $img_relative = str_replace( 'http://', '//', $img ); + + // Manually add srcset and sizes to the markup from get_image_tag(); + $respimg = preg_replace( '|]+) />|', '', $img ); + $respimg_https = preg_replace( '|]+) />|', '', $img_https ); + $respimg_relative = preg_replace( '|]+) />|', '', $img_relative ); + + $content = ' +

Image, http: protocol. Should have srcset and sizes.

+ %1$s + +

Image, http: protocol. Should have srcset and sizes.

+ %2$s + +

Image, protocol-relative. Should have srcset and sizes.

+ %3$s'; + + $unfiltered = sprintf( $content, $img, $img_https, $img_relative ); + $expected = sprintf( $content, $respimg, $respimg_https, $respimg_relative ); + $actual = wp_make_content_images_responsive( $unfiltered ); + + $this->assertSame( $expected, $actual ); + } } diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index 44eb9b3..569dfb3 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -402,25 +402,26 @@ function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) { return $image; } - $base_url = trailingslashit( _wp_upload_dir_baseurl() ); - $image_base_url = $base_url; - - $dirname = dirname( $image_meta['file'] ); - if ( $dirname !== '.' ) { - $image_base_url .= trailingslashit( $dirname ); - } + /** + * To make sure that our ID and image src match, we loop through all the sizes + * in our attachment metadata and bail early if our src file isn't included. + */ + $file_name = wp_basename( $image_src ); $all_sizes = wp_list_pluck( $image_meta['sizes'], 'file' ); + $all_sizes[] = $image_meta['file']; - foreach ( $all_sizes as $key => $file ) { - $all_sizes[ $key ] = $image_base_url . $file; - } + $matched = false; - // Add the original image. - $all_sizes[] = $base_url . $image_meta['file']; + foreach( $all_sizes as $size ) { + if ( false !== strpos( $size, $file_name ) ) { + $matched = true; + break; + } + } // Bail early if the image src doesn't match any of the known image sizes. - if ( ! in_array( $image_src, $all_sizes ) ) { + if ( ! $matched ) { return $image; } From 8b1639f82a734ec1ba4e38f91fb920d25ab74f43 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 14 Dec 2015 18:27:06 -0600 Subject: [PATCH 15/18] Improved calculation of image ratios for srcset attributes Uses wp_constrain_dimensions() to calculate the expected dimensions of the larger size being compared if it were resized to the width of the smaller image. By comparing the expected dimensions to the actual dimensions of the smaller image, we should be able to reliably tell if the current image size has the same aspect ratio and, if so, include it in the srcset attribute. See: https://core.trac.wordpress.org/ticket/34955 --- tests/test-suite.php | 41 +++++++++++++++++++++++++++++++++++++ wp-tevko-core-functions.php | 21 +++++++++++-------- 2 files changed, 53 insertions(+), 9 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index 5d78d6b..f1eb436 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -290,6 +290,47 @@ function test_tevkori_get_srcset_array_no_width() { remove_filter( 'image_downsize', array( $this, '_filter_image_downsize' ) ); } + function test_wp_calculate_image_srcset_ratio_variance() { + // Mock data for this test. + $size_array = array( 218, 300); + $image_src = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x1055-218x300.png'; + $image_meta = array( + 'width' => 768, + 'height' => 1055, + 'file' => '2015/12/test-768x1055.png', + 'sizes' => array( + 'thumbnail' => array( + 'file' => 'test-768x1055-150x150.png', + 'width' => 150, + 'height' => 150, + 'mime-type' => 'image/png', + ), + 'medium' => array( + 'file' => 'test-768x1055-218x300.png', + 'width' => 218, + 'height' => 300, + 'mime-type' => 'image/png', + ), + 'custom-600' => array( + 'file' => 'test-768x1055-600x824.png', + 'width' => 600, + 'height' => 824, + 'mime-type' => 'image/png', + ), + 'post-thumbnail' => array( + 'file' => 'test-768x1055-768x510.png', + 'width' => 768, + 'height' => 510, + 'mime-type' => 'image/png', + ), + ), + ); + + $expected_srcset = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x1055-218x300.png 218w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x1055-600x824.png 600w, http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2015/12/test-768x1055.png 768w'; + + $this->assertSame( $expected_srcset, wp_calculate_image_srcset( $size_array, $image_src, $image_meta ) ); +} + /** * @expectedDeprecated tevkori_get_srcset_string */ diff --git a/wp-tevko-core-functions.php b/wp-tevko-core-functions.php index 569dfb3..a0e90f2 100644 --- a/wp-tevko-core-functions.php +++ b/wp-tevko-core-functions.php @@ -137,9 +137,6 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac $image_baseurl = trailingslashit( $image_baseurl ); - // Calculate the image aspect ratio. - $image_ratio = $image_height / $image_width; - /* * Images that have been edited in WordPress after being uploaded will * contain a unique hash. Look for that hash and use it later to filter @@ -176,15 +173,21 @@ function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attac continue; } - // Calculate the new image ratio. - if ( $image['width'] ) { - $image_ratio_compare = $image['height'] / $image['width']; + /** + * To check for varying crops, we calculate the expected size of the smaller + * image if the larger were contstrained by the width of the smaller and then + * see if it matches what we're expecting. + */ + if ( $image_width > $image['width'] ) { + $constrained_size = wp_constrain_dimensions( $image_width, $image_height, $image['width'] ); + $expected_size = array( $image['width'], $image['height'] ); } else { - $image_ratio_compare = 0; + $constrained_size = wp_constrain_dimensions( $image['width'], $image['height'], $image_width ); + $expected_size = array( $image_width, $image_height ); } - // If the new ratio differs by less than 0.002, use it. - if ( abs( $image_ratio - $image_ratio_compare ) < 0.002 ) { + // If the image dimensions are within 1px of the expected size, use it. + if ( abs( $constrained_size[0] - $expected_size[0] ) <= 1 && abs( $constrained_size[1] - $expected_size[1] ) <= 1 ) { // Add the URL, descriptor, and value to the sources array to be returned. $sources[ $image['width'] ] = array( 'url' => $image_baseurl . $image['file'], From 0044de406e6b741bb860311d03130f4b5cbdd36e Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 9 Dec 2015 23:50:55 +0100 Subject: [PATCH 16/18] Added 3.1.1 changelog to the readme --- readme.md | 12 +++++++++++- readme.txt | 13 +++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index af4ad4d..33d4f48 100644 --- a/readme.md +++ b/readme.md @@ -440,10 +440,20 @@ We use a hook because if you attempt to dequeue a script before it's enqueued, w ## Version -3.1.0 +3.1.1 ## Changelog +**3.1.1** + +- Fixes a bug where the srcset of images in imported content was missing or broken (issue #263). +- Improved calculation of ratio difference for images to be included in the srcset. (issue #260). +- Fixes a bug where `img` tags without ending slash don't get responsive images (issue #259). +- Deprecates the helper function `tevkori_get_media_embedded_in_content()` which is no longer used. +- Makes sure that the setup of default themes doesn't break the tests (issue #261). +- Adds more examples to the Hook Reference in readme.md. +- Corrections and improvements to inline documentation. + **3.1.0** - Adds special handling of GIFs in srcset attributes to preserve animation (issue #223). diff --git a/readme.txt b/readme.txt index ae98f85..c6a2b29 100644 --- a/readme.txt +++ b/readme.txt @@ -3,8 +3,8 @@ Contributors: tevko, wilto, joemcgill, jaspermdegroot, chriscoyier, Michael McGi Donate link: https://app.etapestry.com/hosted/BoweryResidentsCommittee/OnlineDonation.html Tags: Responsive, Images, Responsive Images, SRCSET, Picturefill Requires at least: 4.0 -Tested up to: 4.3 -Stable tag: 3.1.0 +Tested up to: 4.4 +Stable tag: 3.1.1 License: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.txt @@ -32,6 +32,15 @@ This plugin works by including all available image sizes for each image upload. == Changelog == += 3.1.1 = +* Fixes a bug where the srcset of images in imported content was missing or broken. +* Improved calculation of ratio difference for images to be included in the srcset. +* Fixes a bug where `img` tags without ending slash don't get responsive images. +* Deprecates the helper function `tevkori_get_media_embedded_in_content()` which is no longer used. +* Makes sure that the setup of default themes doesn't break the tests. +* Adds more examples to the Hook Reference in readme.md. +* Corrections and improvements to inline documentation. + = 3.1.0 = * Adds special handling of GIFs in srcset attributes to preserve animation. * Makes internal srcset/sizes functions more consistent. From 8728a1f16f4dffe0b77b8c04ee51b5034cb08c8e Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 9 Dec 2015 23:51:38 +0100 Subject: [PATCH 17/18] Version bump 3.1.1 --- wp-tevko-responsive-images.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index cebf741..59a3305 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -8,7 +8,7 @@ * Plugin Name: RICG Responsive Images * Plugin URI: https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images * Description: Bringing automatic default responsive images to WordPress - * Version: 3.1.0 + * Version: 3.1.1 * Author: The RICG * Author URI: http://responsiveimages.org/ * License: GPL-2.0+ From 768cec8323883c48f5d0498a62420fffe0f5f0d5 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 14 Dec 2015 21:10:03 -0500 Subject: [PATCH 18/18] Adding post WP 4.4 notices This lets people know that the plugin is no longer needed if you're running WP 4.4, unless you had installed version <2.5 before we were using a content filter. Still notes that advanced image compression and picturefill are included. --- readme.md | 8 ++++++++ readme.txt | 7 +++++++ 2 files changed, 15 insertions(+) diff --git a/readme.md b/readme.md index 33d4f48..3ef2562 100644 --- a/readme.md +++ b/readme.md @@ -1,3 +1,11 @@ +##WordPress 4.4 and Native Responsive Images + +As of WordPress 4.4, images are responsive by default. If you are on WordPress 4.4 or plan to update, you will not need to install this plugin. + +If you have had this plugin installed since before version 2.5 but are running version 4.4 of WordPress, it is important that you leave the plugin installed. This is because all versions of the plugin before version 2.5 relied on a `data-sizes` attribute being present on an image in order to provide the responsive markup needed. If the plugin in this case is removed, then images in posts will be left with invalid markup. We are working to address this issue, and you can [keep track of our progress here](https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/178). + +You can still use the plugin for advanced image compression support or as a simple way to include the picturefill script. The plugin will fall back to WordPress default functions if responsive image support is detected in your installation. + RICG-responsive-images --- diff --git a/readme.txt b/readme.txt index c6a2b29..77a4142 100644 --- a/readme.txt +++ b/readme.txt @@ -18,6 +18,13 @@ This plugin works by including all available image sizes for each image upload. **Important notes** +* As of WordPress 4.4, images are responsive by default. If you are on WordPress 4.4 or plan to update, you will not need to install this plugin. + +If you have had this plugin installed since before version 2.5 but are running version 4.4 of WordPress, it is important that you leave the plugin installed. This is because all versions of the plugin before version 2.5 relied on a `data-sizes` attribute being present on an image in order to provide the responsive markup needed. If the plugin in this case is removed, then images in posts will be left with invalid markup. We are working to address this issue, and you can keep track of our progress here at https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images/issues/178. + +You can still use the plugin for advanced image compression support or as a simple way to include the picturefill script. The plugin will fall back to WordPress default functions if responsive image support is detected in your installation. + + * Version 3.1.0 includes important changes that make this plugin compatible with WordPress version 4.4. Upgrading is highly recommended. * As of version 2.5.0, the plugin adds `srcset` and `sizes` attributes to images on the front end instead of adding them to the image markup saved in posts.