From b74aec2257f04b41f380263e7bf2ed21e15df4dc Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 13 Feb 2016 22:07:35 +0100 Subject: [PATCH 1/4] Add a tool to remove data-sizes and srcset from image elements Fixes #178 --- wp-tevko-responsive-images.php | 259 +++++++++++++++++++++++++++++++++ 1 file changed, 259 insertions(+) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 59a3305..46d4163 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -87,3 +87,262 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) return $attr; } + +/** + * Checks if there are images with 'data-sizes' and 'srcset' attributes in the post content. + * + * @since 3.2.0 + * @access private + * + * @return int Number of posts that contain images with 'data-sizes' and 'srcset' attributes. + */ +function _tevkori_find_respimg_attr() { + $matches = get_transient( 'tevkori_find_respimg_attr' ); + + // Strict comparison because the transient value can be 0, but will be false if it has not been set yet. + if ( false === $matches ) { + global $wpdb; + + $string = ']+data-sizes="[^"]+" srcset="[^"]+"'; + + $sql = " + SELECT COUNT(*) + FROM $wpdb->posts + WHERE post_type != 'revision' AND post_content RLIKE %s + "; + + $matches = $wpdb->get_var( $wpdb->prepare( $sql, $string ) ); + + set_transient( 'tevkori_find_respimg_attr', $matches, YEAR_IN_SECONDS ); + } + + return $matches; +} + +/** + * Removes the 'tevkori_find_respimg_attr' transient upon plugin deactivation. + * + * @since 3.2.0 + * @access private + * @see 'register_deactivation_hook' + */ +function _tevkori_delete_transient() { + delete_transient( 'tevkori_find_respimg_attr' ); +} +register_deactivation_hook( __FILE__, '_tevkori_delete_transient' ); + +/** + * Adds a menu page to the Tools menu if images with 'data-sizes' and 'srcset' attributes + * have been found and user has sufficient capability. + * + * @since 3.2.0 + * @access private + * @see 'add_management_page()' + */ +function _tevkori_add_menu_page() { + $matches = _tevkori_find_respimg_attr(); + + if ( $matches ) { + add_management_page( + 'RICG Responsive Images', + 'RICG Responsive Images', + 'activate_plugins', + 'ricg-responsive-images', + '_tevkori_menu_page' + ); + } +} +add_action( 'admin_menu', '_tevkori_add_menu_page' ); + +/** + * Callback function that outputs the content for the menu page. + * + * @since 3.2.0 + * @access private + * @see '_tevkori_add_menu_page()' + */ +function _tevkori_menu_page() { + global $wp_version; + + $matches = _tevkori_find_respimg_attr(); + ?> +
+

RICG Responsive Images Plugin

+ +
+

We have found with images that contain data-sizes and srcset attributes. We strongly recommend to remove those attributes from images in your posts.

+
+ +

Explanation

+ +

To make an image responsive the img element needs to have a srcset and sizes attribute. Prior to version 2.5, this plugin added a srcset and data-sizes attribute while inserting the image in the content and replaced data-sizes by sizes before a post was being displayed. Since version 2.5 those attributes are no longer added while inserting an image in the content. Instead, both srcset and sizes are added to images by using a filter before a post is being displayed, but not if an image already has a srcset attribute.

+ +

The plugin still replaces data-sizes by sizes to make sure that images that have been inserted while version 2.4 or older was active have both the srcset and sizes attribute. However, after deactivating the plugin those images won't get a sizes attribute anymore while they do have a srcset. This is invalid markup and results in images being displayed at a wrong size!

+ +

Besides this, the functions that calculate the values for the srcset and sizes attributes have been improved over time and filter hooks have been added to make it possible to change the values in specific situations. As long as images already have a srcset attribute you won't benefit from these improvements.

+ +

Therefor it's strongly recommended to remove data-sizes and srcset attributes from img elements in the post content. You can do this automatically with the cleanup tool on this page or manually.

+ + = 4.4 ) : ?> +

WordPress 4.4+

+ +

As from WordPress 4.4 the srcset and sizes attributes are added by WordPress itself. This is done in exactly the same way as it was done by this plugin, meaning that no attributes are added if an image already has a srcset attribute.

+ +

Do I Still Need This Plugin After Removing The Attributes?

+ +

No, you would no longer need to use this plugin to make images responsive if the data-sizes and srcset attributes have been removed from all images. However, you can keep using it to benefit from the following two features:

+ +
    +
  1. The plugin loads the Picturefill polyfill, a small JavaScript file that makes responsive images work on older browsers that don't offer native support
    2. +
  2. Advanced image compression (via opt-in)
    3. +
+ +

See the plugin page and the plugin documentation for more information.

+ + +

Cleanup Tool

+ +

This tool automatically removes data-sizes and srcset attributes from all images in the content of your posts. It updates the post content in the database. This can't be undone and if something goes wrong you might lose your content so it's very important to make a backup of your database before proceeding!

+ +

After succesfully removing these attributes from all images this page will disappear from the Tools menu and you will no longer see a warning on the dashboard and plugin menu page.

+ +
+ + + + +
+ +

Manually Remove

+ +

To manually remove the data-sizes and srcset attributes you have to edit each post and page that contains images that were inserted while version 2.4 or older of this plugin was active. In the editor switch from the "Visual" to "Text" tab in the top right corner in order to see image markup instead of the images itself. Look for <img ... > elements and delete data-sizes="..." and srcset="...".

+ +

After you have removed these attributes from all images you can run this check. If there are no more images with these attributes this page will disappear from the Tools menu and you will no longer see a warning on the dashboard and plugin menu page.

+ +
+ + + +
+ +

Support

+ +

If you have any questions, please post a message on the support forum of this plugin.

+
+ ]+data-sizes="[^"]+" srcset="[^"]+"'; + + $sql = " + SELECT ID, post_content + FROM $wpdb->posts + WHERE post_type != 'revision' AND post_content RLIKE %s + "; + + $results = $wpdb->get_results( $wpdb->prepare( $sql, $string ), ARRAY_N ); + + if ( ! empty( $results ) ) { + foreach ( $results as $result ) { + $post_content = preg_replace( '/]+?) data-sizes="([^"]+?)" srcset="([^"]+?)"/', ' $result[0], + 'post_content' => $post_content, + ); + + wp_update_post( $post ); + } + } + + delete_transient( 'tevkori_find_respimg_attr' ); + + $matches = _tevkori_find_respimg_attr(); + + if ( $matches ) { + wp_redirect( admin_url( 'tools.php?page=ricg-responsive-images&ricg-cleanup=error' ) ); + } else { + wp_redirect( admin_url( 'plugins.php?ricg-cleanup=success' ) ); + } + } else { + wp_redirect( admin_url( 'tools.php?page=ricg-responsive-images&ricg-cleanup=backup' ) ); + } + + exit(); +} +add_action( 'admin_post_tevkori_cleanup_post_content', '_tevkori_cleanup_post_content' ); + +/** + * Triggers a new check to see if there are images with 'data-sizes' and 'srcset' attributes in the post content. + * + * @since 3.2.0 + * @access private + * @see 'admin_post' + */ +function _tevkori_check_post_content() { + check_admin_referer( 'tevkori_check_post_content', 'tevkori_check_post_content_nonce' ); + + delete_transient( 'tevkori_find_respimg_attr' ); + + $matches = _tevkori_find_respimg_attr(); + + if ( $matches ) { + wp_redirect( admin_url( 'tools.php?page=ricg-responsive-images&ricg-cleanup=notdone' ) ); + } else { + wp_redirect( admin_url( 'plugins.php?ricg-cleanup=success' ) ); + } + + exit(); +} +add_action( 'admin_post_tevkori_check_post_content', '_tevkori_check_post_content' ); + +/** + * Displays admin notices. + * + * @since 3.2.0 + * @access private + * @see 'admin_notices' + */ +function _tevkori_admin_notices() { + global $pagenow; + + $matches = _tevkori_find_respimg_attr(); + + if ( $matches && ( $pagenow == 'plugins.php' || $pagenow == 'index.php' ) ) { + echo '

The RICG Responsive Images plugin needs your attention. Please visit the plugin page in the Tools menu.

'; + } + + if ( $pagenow == 'plugins.php' && isset( $_GET['ricg-cleanup'] ) ) { + if ( 'success' == $_GET['ricg-cleanup'] ) { + echo '

Done! All data-sizes and srcset attributes have been succesfully removed from your images!

'; + } + } + if ( $pagenow == 'tools.php' && isset( $_GET['ricg-cleanup'] ) ) { + $notice = $_GET['ricg-cleanup']; + + if ( 'notdone' == $notice ) { + echo '

Check finished. Not all data-sizes and srcset attributes have been removed yet!

'; + } elseif ( 'backup' == $notice ) { + echo '

Please make a backup of your database before using the cleanup tool!

'; + } elseif ( 'error' == $notice ) { + echo '

Something went wrong! We recommend to check your posts if something is broken, revert to the backup of your database if necessary, and remove the data-sizes and srcset attributes manually.

'; + } + } +} +add_action( 'admin_notices', '_tevkori_admin_notices' ); From 746ef36b8b04c0d07c053e7fee80ec5a06aefab4 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 13 Feb 2016 22:10:06 +0100 Subject: [PATCH 2/4] Moved data-sizes backcompat filter --- wp-tevko-deprecated-functions.php | 17 ----------------- wp-tevko-responsive-images.php | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/wp-tevko-deprecated-functions.php b/wp-tevko-deprecated-functions.php index 44a08f5..0471e46 100644 --- a/wp-tevko-deprecated-functions.php +++ b/wp-tevko-deprecated-functions.php @@ -363,23 +363,6 @@ function tevkori_filter_content_images( $content ) { return wp_make_content_images_responsive( $content ); } -/** - * Backward compatibility shim for 'data-sizes' attributes in content. - * - * Prior to version 2.5 a 'srcset' and 'data-sizes' attribute were added to the image - * while inserting the image in the content. We replace the 'data-sizes' attribute by - * a 'sizes' attribute. - * - * @since 3.0.0 - * - * @param string $content The content to filter; - * @return string The filtered content with `data-sizes` replaced by `sizes` attributes. - */ -function tevkori_replace_data_sizes( $content ) { - return str_replace( ' data-sizes="', ' sizes="', $content ); -} -add_filter( 'the_content', 'tevkori_replace_data_sizes' ); - /** * Backward compatibility shim for the deprecated 'wp_get_attachment_image_sizes' filter. * diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 46d4163..2faafcc 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -88,6 +88,23 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) return $attr; } +/** + * Backward compatibility shim for 'data-sizes' attributes in content. + * + * Prior to version 2.5 a 'srcset' and 'data-sizes' attribute were added to the image + * while inserting the image in the content. We replace the 'data-sizes' attribute by + * a 'sizes' attribute. + * + * @since 3.0.0 + * + * @param string $content The content to filter; + * @return string The filtered content with `data-sizes` replaced by `sizes` attributes. + */ +function tevkori_replace_data_sizes( $content ) { + return str_replace( ' data-sizes="', ' sizes="', $content ); +} +add_filter( 'the_content', 'tevkori_replace_data_sizes' ); + /** * Checks if there are images with 'data-sizes' and 'srcset' attributes in the post content. * From fd4d82b7c51f8650197c7011879c879e0fb232a8 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 17 Feb 2016 19:04:53 +0100 Subject: [PATCH 3/4] Small changes in text --- wp-tevko-responsive-images.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 2faafcc..584cc13 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -187,7 +187,7 @@ function _tevkori_menu_page() {

RICG Responsive Images Plugin

-

We have found with images that contain data-sizes and srcset attributes. We strongly recommend to remove those attributes from images in your posts.

+

We have found with images that contain data-sizes and srcset attributes. We strongly recommend to remove those attributes!

Explanation

@@ -198,7 +198,7 @@ function _tevkori_menu_page() {

Besides this, the functions that calculate the values for the srcset and sizes attributes have been improved over time and filter hooks have been added to make it possible to change the values in specific situations. As long as images already have a srcset attribute you won't benefit from these improvements.

-

Therefor it's strongly recommended to remove data-sizes and srcset attributes from img elements in the post content. You can do this automatically with the cleanup tool on this page or manually.

+

Therefor it's strongly recommended to remove srcset and data-sizes attributes from img elements in the post content. You can do this automatically with the cleanup tool on this page or manually.

= 4.4 ) : ?>

WordPress 4.4+

@@ -207,7 +207,7 @@ function _tevkori_menu_page() {

Do I Still Need This Plugin After Removing The Attributes?

-

No, you would no longer need to use this plugin to make images responsive if the data-sizes and srcset attributes have been removed from all images. However, you can keep using it to benefit from the following two features:

+

No, you would no longer need to use this plugin to make images responsive if the srcset and data-sizes attributes have been removed from all images. However, you can keep using it to benefit from the following two features:

  1. The plugin loads the Picturefill polyfill, a small JavaScript file that makes responsive images work on older browsers that don't offer native support
    2. @@ -219,7 +219,7 @@ function _tevkori_menu_page() {

    Cleanup Tool

    -

    This tool automatically removes data-sizes and srcset attributes from all images in the content of your posts. It updates the post content in the database. This can't be undone and if something goes wrong you might lose your content so it's very important to make a backup of your database before proceeding!

    +

    This tool automatically removes srcset and data-sizes attributes from all images in the content of your posts. It updates the post content in the database. This can't be undone and if something goes wrong you might lose your content so it's very important to make a backup of your database before proceeding!

    After succesfully removing these attributes from all images this page will disappear from the Tools menu and you will no longer see a warning on the dashboard and plugin menu page.

    @@ -235,7 +235,7 @@ function _tevkori_menu_page() {

    Manually Remove

    -

    To manually remove the data-sizes and srcset attributes you have to edit each post and page that contains images that were inserted while version 2.4 or older of this plugin was active. In the editor switch from the "Visual" to "Text" tab in the top right corner in order to see image markup instead of the images itself. Look for <img ... > elements and delete data-sizes="..." and srcset="...".

    +

    To manually remove the srcset and data-sizes attributes you have to edit each post and page that contains images that were inserted while version 2.4 or older of this plugin was active. In the editor switch from the "Visual" to "Text" tab in the top right corner in order to see image markup instead of the images itself. Look for <img ... > elements and delete data-sizes="..." srcset="...".

    After you have removed these attributes from all images you can run this check. If there are no more images with these attributes this page will disappear from the Tools menu and you will no longer see a warning on the dashboard and plugin menu page.

    @@ -297,9 +297,9 @@ function _tevkori_cleanup_post_content() { } else { wp_redirect( admin_url( 'plugins.php?ricg-cleanup=success' ) ); } - } else { + } else { wp_redirect( admin_url( 'tools.php?page=ricg-responsive-images&ricg-cleanup=backup' ) ); - } + } exit(); } From 3aa897889db31ff731669eb4f70ab1560aca40fd Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 17 Feb 2016 19:09:57 +0100 Subject: [PATCH 4/4] Only add data-sizes filter if srcset and data-sizes have been found in the content --- wp-tevko-responsive-images.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 584cc13..6a9ab3f 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -103,7 +103,9 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) function tevkori_replace_data_sizes( $content ) { return str_replace( ' data-sizes="', ' sizes="', $content ); } -add_filter( 'the_content', 'tevkori_replace_data_sizes' ); +if ( ! 0 === get_transient( 'tevkori_find_respimg_attr' ) ) { + add_filter( 'the_content', 'tevkori_replace_data_sizes' ); +} /** * Checks if there are images with 'data-sizes' and 'srcset' attributes in the post content.