From 6c2d1332db9503924b66c338a8aff63c8de791b0 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Sat, 29 Aug 2015 16:12:27 -0500 Subject: [PATCH 01/15] add PHP7 tests --- .travis.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.travis.yml b/.travis.yml index a97aa99..0029787 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,6 +6,7 @@ php: - 5.4 - 5.5 - 5.6 + - 7.0 env: - WP_VERSION=latest WP_MULTISITE=0 @@ -17,6 +18,11 @@ env: - WP_VERSION=4.0 WP_MULTISITE=0 - WP_VERSION=4.0 WP_MULTISITE=1 +allow_failures: + - php: 7.0 + +fast_finish: true + before_script: - bash bin/install-wp-tests.sh wordpress_test root '' localhost $WP_VERSION From 080f9b3f359a8c45ecabf3deea937df2b25c47a4 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 31 Aug 2015 21:58:12 -0500 Subject: [PATCH 02/15] Add tests for tevkori_filter_attachment_image_attributes() --- tests/test-suite.php | 53 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/tests/test-suite.php b/tests/test-suite.php index 43b7cbc..bf9ad73 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -317,4 +317,57 @@ function test_tevkori_get_srcset_string() { $this->assertSame( $expected, $sizes ); } + /** + * @group 159 + */ + function test_tevkori_filter_attachment_image_attributes() { + // Make image. + $id = $this->_test_img(); + + // Get attachment post data. + $attachment = get_post( $id ); + $image = wp_get_attachment_image_src( $id, 'medium' ); + list($src, $width, $height) = $image; + + // Create dummy attributes array. + $attr = array( + 'src' => $src, + 'width' => $width, + 'height' => $height, + ); + + // Apply filter. + $resp_attr = tevkori_filter_attachment_image_attributes( $attr, $attachment, 'medium' ); + + // Test output. + $this->assertTrue( isset( $resp_attr['srcset'] ) ); + $this->assertTrue( isset( $resp_attr['sizes'] ) ); + } + + /** + * @group 159 + */ + function test_tevkori_filter_attachment_image_attributes_thumbnails() { + // Make image. + $id = $this->_test_img(); + + // Get attachment post data. + $attachment = get_post( $id ); + $image = wp_get_attachment_image_src( $id, 'thumbnail' ); + list($src, $width, $height) = $image; + + // Create dummy attributes array. + $attr = array( + 'src' => $src, + 'width' => $width, + 'height' => $height, + ); + + // Apply filter. + $resp_attr = tevkori_filter_attachment_image_attributes( $attr, $attachment, 'thumbnail' ); + + // Test output. + $this->assertFalse( isset( $resp_attr['srcset'] ) ); + $this->assertFalse( isset( $resp_attr['sizes'] ) ); + } } From b7f9e6dbfe6af6589cd24b1154c39c94a2779a85 Mon Sep 17 00:00:00 2001 From: Tim Evko Date: Tue, 1 Sep 2015 20:17:02 -0400 Subject: [PATCH 03/15] update version number to reflect latest changes --- 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 46991cb..968c3dd 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -8,7 +8,7 @@ * Plugin Name: RICG Responsive Images * Plugin URI: http://www.smashingmagazine.com/2015/02/24/ricg-responsive-images-for-wordpress/ * Description: Bringing automatic default responsive images to wordpress - * Version: 2.3.1 + * Version: 2.4.0 * Author: The RICG * Author URI: http://responsiveimages.org/ * License: GPL-2.0+ From 78ee139a4b871225990448b17e588eb855627a48 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 17 Sep 2015 08:44:51 -0500 Subject: [PATCH 04/15] Return single source candidates in `tevkori_get_srcset()` --- tests/test-suite.php | 7 ++++--- wp-tevko-responsive-images.php | 6 +----- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/tests/test-suite.php b/tests/test-suite.php index bf9ad73..6994880 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -223,14 +223,15 @@ function test_tevkori_get_srcset_array_no_date_upoads() { update_option( 'uploads_use_yearmonth_folders', $uploads_use_yearmonth_folders ); } - function test_tevkori_get_srcset_array_single_srcset() { + function test_tevkori_get_srcset_single_srcset() { // make an image $id = $this->_test_img(); // In our tests, thumbnails would only return a single srcset candidate, // in which case we don't bother returning a srcset array. - $sizes = tevkori_get_srcset_array( $id, 'thumbnail' ); + $sizes = tevkori_get_srcset( $id, 'thumbnail' ); - $this->assertFalse( $sizes ); + $this->assertTrue( 1 === count( tevkori_get_srcset_array( $id, 'thumbnail' ) ) ); + $this->assertFalse( tevkori_get_srcset( $id, 'thumbnail' ) ); } /** diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 968c3dd..8d1159a 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -232,10 +232,6 @@ function tevkori_get_srcset_array( $id, $size = 'thumbnail' ) { } } - if ( count( $arr ) <= 1 ) { - return false; - } - /** * Filter the output of tevkori_get_srcset_array(). * @@ -260,7 +256,7 @@ function tevkori_get_srcset_array( $id, $size = 'thumbnail' ) { function tevkori_get_srcset( $id, $size = 'thumbnail' ) { $srcset_array = tevkori_get_srcset_array( $id, $size ); - if ( empty( $srcset_array ) ) { + if ( count( $srcset_array ) <= 1 ) { return false; } From 27d54da4b147890083e53d4237f3125d163c3388 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 17 Sep 2015 13:37:02 -0500 Subject: [PATCH 05/15] Make build badge link to travis-ci.org instead of the image file. --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 0c71e8e..4b41cc5 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ RICG-responsive-images --- -![Build Status](https://travis-ci.org/ResponsiveImagesCG/wp-tevko-responsive-images.svg) +[![Build Status](https://travis-ci.org/ResponsiveImagesCG/wp-tevko-responsive-images.svg?branch=dev)](https://travis-ci.org/ResponsiveImagesCG/wp-tevko-responsive-images) Bringing automatic default responsive images to WordPress. From b51e2df0516510a66791c70a9771e99eb0eb112d Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 19 Sep 2015 15:57:13 +0200 Subject: [PATCH 06/15] Add Linthub config --- .jshintrc | 25 +++++++++++++++ .linthub.yml | 16 ++++++++++ ruleset.xml | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 .jshintrc create mode 100644 .linthub.yml create mode 100644 ruleset.xml diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..28e696f --- /dev/null +++ b/.jshintrc @@ -0,0 +1,25 @@ +{ + "boss": true, + "curly": true, + "eqeqeq": true, + "eqnull": true, + "es3": true, + "expr": true, + "immed": true, + "noarg": true, + "onevar": true, + "quotmark": "single", + "trailing": true, + "undef": true, + "unused": true, + + "browser": true, + + "globals": { + "_": false, + "Backbone": false, + "jQuery": false, + "JSON": false, + "wp": false + } +} \ No newline at end of file diff --git a/.linthub.yml b/.linthub.yml new file mode 100644 index 0000000..d2f9916 --- /dev/null +++ b/.linthub.yml @@ -0,0 +1,16 @@ +go: + lint: false +php: + lint: true + config: ruleset.xml +java: + lint: false +scala: + lint: false +shell: + lint: false +css: + lint: true +js: + lint: jshint # jshint (default) | eslint | false + config: .jshintrc \ No newline at end of file diff --git a/ruleset.xml b/ruleset.xml new file mode 100644 index 0000000..3f7df9b --- /dev/null +++ b/ruleset.xml @@ -0,0 +1,88 @@ + + + Non-controversial generally-agreed upon WordPress Coding Standards + + + + + + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + 0 + + + + + + + + + + + + + + + + \ No newline at end of file From a64195780968cc784a97954d2ab3706a2ec6782d Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Thu, 17 Sep 2015 07:25:56 -0500 Subject: [PATCH 07/15] Match WP examples for path building While creating a patch for merging our functions into core @getsource suggested we mimic the way file paths are built at the end of `image_get_intermediate_size()` --- wp-tevko-responsive-images.php | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 8d1159a..c1b3538 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -196,16 +196,9 @@ function tevkori_get_srcset_array( $id, $size = 'thumbnail' ) { $img_sizes['full'] = array( 'width' => $img_meta['width'], 'height' => $img_meta['height'], - 'file' => $img_meta['file'] + 'file' => basename( $img_meta['file'] ) ); - if ( strrpos( $img_meta['file'], '/' ) !== false ) { - $img_sizes['full']['file'] = substr( $img_meta['file'], strrpos( $img_meta['file'], '/' ) + 1 ); - } - - // Get the image base url. - $img_base_url = substr( $img_url, 0, strrpos( $img_url, '/' ) + 1 ); - // Calculate the image aspect ratio. $img_ratio = $img_height / $img_width; @@ -228,7 +221,7 @@ function tevkori_get_srcset_array( $id, $size = 'thumbnail' ) { // If the new ratio differs by less than 0.01, use it. if ( abs( $img_ratio - $img_ratio_compare ) < 0.01 ) { - $arr[ $img['width'] ] = $img_base_url . $img['file'] . ' ' . $img['width'] .'w'; + $arr[ $img['width'] ] = path_join( dirname( $img_url ), $img['file'] ) . ' ' . $img['width'] .'w'; } } From 84bc9ee28110e08c62f4d200d3377dc80754b37a Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Mon, 21 Sep 2015 21:14:20 -0500 Subject: [PATCH 08/15] Filter content to add `srcset` and `sizes` This changes our approach from one where `srcset` and `sizes` are written to the image markup in post content to one where the responsive attributes are added on the front end when the page is being rendered. There is a small performance hit but the benefit is worth the tradeoff for what is gained. What exactly do we gain? Glad you asked: * Automatically extend support to images in posts published before we responsive image support was available. * Removes the need to update the markup in TinyMCE when the image size is changed. * Keeps `sizes` attributes, which should probably be adjusted based on the needs of the theme, from being stored in the database. * Is non-destructive if a site needs to change available image sizes and regenerate thumbnails. Changes: * Removes the old JS code for handling markup changes in TinyMCE * Adds `tevkori_filter_content_images()` as a display filter. * Adds `_tevkori_filter_content_images_callback()` to process filtered images. * Adds tests --- js/wp-tevko-responsive-images.js | 53 --------- tests/test-suite.php | 70 ++++++++++++ wp-tevko-responsive-images.php | 182 +++++++++++++++++++------------ 3 files changed, 184 insertions(+), 121 deletions(-) delete mode 100644 js/wp-tevko-responsive-images.js diff --git a/js/wp-tevko-responsive-images.js b/js/wp-tevko-responsive-images.js deleted file mode 100644 index 77ccc7a..0000000 --- a/js/wp-tevko-responsive-images.js +++ /dev/null @@ -1,53 +0,0 @@ -"use strict"; - -(function() { - - /** - * Recalculate srcset attribute after an image-update event - */ - if ( wp.media ) { - wp.media.events.on( 'editor:image-update', function( args ) { - // arguments[0] = { Editor, image, metadata } - var image = args.image, - metadata = args.metadata; - - // If the image url has changed, recalculate srcset attributes. - if ( metadata && metadata.url !== metadata.originalUrl ) { - // Update the srcset attribute. - updateSrcset( image, metadata ); - // Update the sizes attribute. - updateSizes( image, metadata ); - } - - }); - } - - /** - * Update the srcet attribute on an image in the editor - */ - var updateSrcset = function( image, metadata ) { - - var data = { - action: 'tevkori_ajax_srcset', - postID: metadata.attachment_id, - size: metadata.size - }; - - jQuery.post( ajaxurl, data, function( response ) { - image.setAttribute( 'srcset', response ); - }); - }; - - /** - * Update the data-sizes attribute on an image in the editor - */ - var updateSizes = function( image, metadata ) { - - var sizes = '(max-width: ' + metadata.width + 'px) 100vw, ' + metadata.width + 'px'; - - // Update the sizes attribute of our image. - image.setAttribute( 'data-sizes', sizes ); - }; - - -})(); diff --git a/tests/test-suite.php b/tests/test-suite.php index 6994880..b0617f1 100644 --- a/tests/test-suite.php +++ b/tests/test-suite.php @@ -371,4 +371,74 @@ function test_tevkori_filter_attachment_image_attributes_thumbnails() { $this->assertFalse( isset( $resp_attr['srcset'] ) ); $this->assertFalse( isset( $resp_attr['sizes'] ) ); } + + /** + * @group 170 + */ + function test_tevkori_filter_content_images() { + // Make image. + $id = $this->_test_img(); + + $srcset = tevkori_get_srcset_string( $id, 'medium' ); + $sizes = tevkori_get_sizes_string( $id, 'medium' ); + + // 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-attachment-', '', $img_no_size ); + + // Manually add srcset and sizes to the markup from get_image_tag(); + $respimg = preg_replace('|]+) />|', '', $img); + $respimg_no_size = preg_replace('|]+) />|', '', $img_no_size); + $respimg_no_size_id = preg_replace('|]+) />|', '', $img_no_size_id); + + $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:

+ + %1$s + + + + %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!

+ + %3$s + +

Then you can start enjoying the WordPress experience:

+ '; + + $content_unfiltered = sprintf( $content, $img, $img_no_size, $img_no_size_id ); + $content_filtered = sprintf( $content, $respimg, $respimg_no_size, $respimg_no_size_id ); + + $this->assertSame( $content_filtered, tevkori_filter_content_images( $content_unfiltered ) ); + } + + /** + * @group 170 + */ + function test_tevkori_filter_content_images_with_preexisting_srcset() { + // Make image. + $id = $this->_test_img(); + + // Generate HTML and add a dummy srcset attribute. + $image_html = get_image_tag( $id, '', '', '', 'medium' ); + $image_html = preg_replace('|]+) />|', '', $image_html ); + + // The content filter should return the image unchanged. + $this->assertSame( $image_html, tevkori_filter_content_images( $image_html ) ); + } + } diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 8d1159a..4cecc51 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -297,31 +297,130 @@ function tevkori_get_src_sizes( $id, $size = 'thumbnail' ) { } /** - * Filter for extending image tag to include srcset attribute. + * Filters images in post content to add `srcset` and `sizes`. * - * @see images_send_to_editor - * @return string HTML for image. + * @since 3.0 + * + * @param string $content The raw post content to be filtered. + * @return string Converted content with `srcset` and `sizes` added to images. + */ +function tevkori_filter_content_images( $content ) { + // Only match images in our uploads directory. + $uploads_dir = wp_upload_dir(); + $path_to_upload_dir = $uploads_dir['baseurl']; + + $content = preg_replace_callback( '|]+' . $path_to_upload_dir . '[^>]+)[\s?][\/?]>|i', '_tevkori_filter_content_images_callback', $content ); + + return $content; +} +add_filter( 'the_content', 'tevkori_filter_content_images', 5, 1 ); + +/** + * Private preg_replace callback used in tevkori_filter_content_images() + * + * @access private + * @since 3.0.0 */ -function tevkori_extend_image_tag( $html, $id, $caption, $title, $align, $url, $size, $alt ) { - add_filter( 'editor_max_image_size', 'tevkori_editor_image_size' ); +function _tevkori_filter_content_images_callback( $image ) { + if ( empty( $image ) ) { + return false; + } + + list( $image_html, $atts ) = $image; + $id = $size = false; + + // Bail early if a `srcset` attribute already exists. + if ( false !== strpos( $atts, 'srcset=' ) ) { + return $image_html; + } - // Get the srcset attribute. - $srcset = tevkori_get_srcset_string( $id, $size ); + // Grab ID and size info from core classes. + if ( preg_match( '/wp-image-([0-9]+)/i', $atts, $class_id ) ) { + (int) $id = $class_id[1]; + } + if ( preg_match( '/size-([^\s|"]+)/i', $atts, $class_size ) ) { + $size = $class_size[1]; + } - remove_filter( 'editor_max_image_size', 'tevkori_editor_image_size' ); + if ( $id && false === $size ) { + preg_match( '/width="([0-9]+)"/', $atts, $width ); + preg_match( '/height="([0-9]+)"/', $atts, $height ); + + $size = array( + (int) $width[1], + (int) $height[1] + ); + } - if ( $srcset ) { + /* + * If attempts to get values for `id` and `size` failed, use the + * src to query for matching values in `_wp_attachment_metadata` + */ + if ( false === $id || false === $size ) { + preg_match( '/src="([^"]+)"/', $atts, $url ); + + if ( ! $url[1] ) { + return $image_html; + } - // Build the data-sizes attribute if sizes were returned. - $sizes = tevkori_get_sizes( $id, $size ); - $sizes = $sizes ? 'data-sizes="' . $sizes . '"' : ''; + $image_filename = basename( $url[1] ); + + /* + * If we already have an ID, we use it to get the attachment metadata + * using `wp_get_attachment_metadata()`. Otherwise, we'll use the image + * `src` url to query the postmeta table for both the attachement ID and + * metadata, which we'll use later to get the size. + */ + if ( ! empty( $id ) ) { + $meta = wp_get_attachment_metadata( $id ); + } else { + global $wpdb; + $meta_object = $wpdb->get_row( $wpdb->prepare( + "SELECT `post_id`, `meta_value` FROM $wpdb->postmeta WHERE `meta_key` = '_wp_attachment_metadata' AND `meta_value` LIKE %s", + '%' . $image_filename . '%' + ) ); + + // If the query is successful, we can determine the ID and size. + if ( is_object( $meta_object ) ) { + $id = $meta_object->post_id; + // Unserialize the meta_value returned in our query. + $meta = maybe_unserialize( $meta_object->meta_value ); + } else { + $meta = false; + } + } - $html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html ); + /* + * Now that we have the attachment ID and metadata, we can retrieve the + * size by matching the original image's `src` filename with the sizes + * included in the attachment metadata. + */ + if ( $id && $meta ) { + /* + * First, see if the file is the full size image. If not, we loop through + * the itermediate sizes until we find a match. + */ + if ( $image_filename === basename( $meta['file'] ) ) { + $size = 'full'; + } else { + foreach( $meta['sizes'] as $image_size => $image_size_data ) { + if ( $image_filename === $image_size_data['file'] ) { + $size = $image_size; + break; + } + } + } + } } - return $html; + // If we have an ID and size, try for srcset and sizes and update the markup. + if ( $id && $size && $srcset = tevkori_get_srcset_string( $id, $size ) ) { + $sizes = tevkori_get_sizes_string( $id, $size ); + $image_html = ""; + }; + + return $image_html; } -add_filter( 'image_send_to_editor', 'tevkori_extend_image_tag', 0, 8 ); /** * Filter to add srcset and sizes attributes to post thumbnails and gallery images. @@ -352,28 +451,6 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) } add_filter( 'wp_get_attachment_image_attributes', 'tevkori_filter_attachment_image_attributes', 0, 3 ); -/** - * Disable the editor size constraint applied for images in TinyMCE. - * - * @return array A width & height array so large it shouldn't constrain reasonable images. - */ -function tevkori_editor_image_size() { - return array( 99999, 99999 ); -} - -/** - * Load admin scripts. - * - * @param string $hook Admin page file name. - */ -function tevkori_load_admin_scripts( $hook ) { - if ( $hook == 'post.php' || $hook == 'post-new.php' ) { - wp_enqueue_script( 'wp-tevko-responsive-images', plugin_dir_url( __FILE__ ) . 'js/wp-tevko-responsive-images.js', array( 'wp-backbone' ), '2.0.0', true ); - } -} -add_action( 'admin_enqueue_scripts', 'tevkori_load_admin_scripts' ); - - /** * Filter for the_content to replace data-size attributes with size attributes. * @@ -388,34 +465,3 @@ function tevkori_filter_content_sizes( $content ) { return preg_replace( $images, '${1}sizes="' . $sizes . '"', $content ); } add_filter( 'the_content', 'tevkori_filter_content_sizes' ); - - -/** - * Ajax handler for updating the srcset when an image is changed in the editor. - * - * @since 2.3.0 - * - * @return string A sourcest value. - */ -function tevkori_ajax_srcset() { - - // Bail early if no post ID is passed. - if ( empty( $_POST['postID'] ) ) { - return; - } - - $postID = (int) $_POST['postID']; - if ( ! $postID ) { - return; - } - - // Grab the image size being passed from the AJAX request. - $size = empty( $_POST['size'] ) ? $_POST['size'] : ''; - - // Get the srcset value for our image. - $srcset = tevkori_get_srcset( $postID, $size ); - - // For AJAX requests, we echo the result and then die. - wp_send_json( $srcset ); -} -add_action( 'wp_ajax_tevkori_ajax_srcset', 'tevkori_ajax_srcset' ); From 4816d1730ec5f2c32cff8570abc02ca9dc526501 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Tue, 22 Sep 2015 21:02:24 -0500 Subject: [PATCH 09/15] Updated the changelog for 2.5.0 --- readme.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 4b41cc5..31f0062 100644 --- a/readme.md +++ b/readme.md @@ -139,10 +139,20 @@ The only external dependency included in this plugin is [Picturefill](http://sco We use a hook because if you attempt to dequeue a script before it's enqueued, wp_dequeue_script has no effect. (If it's still being loaded, you may need to specify a [priority](http://codex.wordpress.org/Function_Reference/add_action).) ## Version -2.4.0 + +2.5.0 ## Changelog +- Responsify all post images by adding `srcset` and `sizes` through a display filter. +- Improve method used to build paths in `tevkori_get_srcset_array()` +- Adds linthub config files +- Returns single source arrays in `tevkori_get_srcset_array()` +- Add tests for PHP7 to our Travis matrix +- Add test coverage for `tevkori_filter_attachment_image_attributes()` + +**2.4.0** + - Added filter for tevkori_get_sizes, with tests - Added Composer support - Compare aspect ratio in relative values, not absolute values From 84dda2c3fca175f203b29ce68a4a5af29a736bb0 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Tue, 22 Sep 2015 21:28:44 -0500 Subject: [PATCH 10/15] Updated the changelog in readme.txt --- readme.txt | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/readme.txt b/readme.txt index a238163..71b8889 100644 --- a/readme.txt +++ b/readme.txt @@ -26,6 +26,14 @@ This plugin works by including all available image sizes for each image upload. == Changelog == += 2.5.0 = +* Responsify all post images by adding `srcset` and `sizes` through a display filter. +* Improve method used to build paths in `tevkori_get_srcset_array()` +* Adds linthub config files +* Returns single source arrays in `tevkori_get_srcset_array()` +* Add tests for PHP7 to our Travis matrix +* Add test coverage for `tevkori_filter_attachment_image_attributes()` + = 2.4.0 = * Added filter for tevkori_get_sizes, with tests * Added Composer support From 0cd4d3be99831ee1c4a014df9f9485989659942b Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Tue, 22 Sep 2015 21:32:41 -0500 Subject: [PATCH 11/15] Update plugin versions to 2.5.0 --- readme.txt | 2 +- wp-tevko-responsive-images.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.txt b/readme.txt index 71b8889..82a9cfc 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Donate link: https://app.etapestry.com/hosted/BoweryResidentsCommittee/OnlineDon Tags: Responsive, Images, Responsive Images, SRCSET, Picturefill Requires at least: 4.1 Tested up to: 4.3 -Stable tag: 2.4.0 +Stable tag: 2.5.0 License: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.txt diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 4444a76..9c5e13a 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -8,7 +8,7 @@ * Plugin Name: RICG Responsive Images * Plugin URI: http://www.smashingmagazine.com/2015/02/24/ricg-responsive-images-for-wordpress/ * Description: Bringing automatic default responsive images to wordpress - * Version: 2.4.0 + * Version: 2.5.0 * Author: The RICG * Author URI: http://responsiveimages.org/ * License: GPL-2.0+ From 34390e4d41608b982a8dda67f870cb1b7272f27e Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Tue, 22 Sep 2015 21:39:02 -0500 Subject: [PATCH 12/15] Update @since tag for functions added this release --- wp-tevko-responsive-images.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 9c5e13a..a99a5b7 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -292,7 +292,7 @@ function tevkori_get_src_sizes( $id, $size = 'thumbnail' ) { /** * Filters images in post content to add `srcset` and `sizes`. * - * @since 3.0 + * @since 2.5.0 * * @param string $content The raw post content to be filtered. * @return string Converted content with `srcset` and `sizes` added to images. @@ -312,7 +312,7 @@ function tevkori_filter_content_images( $content ) { * Private preg_replace callback used in tevkori_filter_content_images() * * @access private - * @since 3.0.0 + * @since 2.5.0 */ function _tevkori_filter_content_images_callback( $image ) { if ( empty( $image ) ) { From e955186df4132d0cbe605facebb3a483800fa57c Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 23 Sep 2015 12:53:34 +0200 Subject: [PATCH 13/15] Coding standards, consistency, typo fixes --- wp-tevko-responsive-images.php | 57 ++++++++++++++++++++-------------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 4444a76..5bbbe09 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -15,10 +15,10 @@ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ -// Don't load the plugin directly +// Don't load the plugin directly. defined( 'ABSPATH' ) or die( "No script kiddies please!" ); -// List includes +// List includes. if ( class_exists( 'Imagick' ) ) { require_once( plugin_dir_path( __FILE__ ) . 'class-respimg.php' ); require_once( plugin_dir_path( __FILE__ ) . 'class-wp-image-editor-respimg.php' ); @@ -89,11 +89,11 @@ function tevkori_get_sizes( $id, $size = 'thumbnail', $args = null ) { $args = wp_parse_args( $args, $defaults ); /** - * Filter arguments used to create sizes attribute. + * Filter arguments used to create 'sizes' attribute. * * @since 2.4.0 * - * @param array $args An array of arguments used to create a sizes attribute. + * @param array $args An array of arguments used to create a 'sizes' attribute. * @param int $id Post ID of the original image. * @param string $size Name of the image size being used. */ @@ -158,6 +158,7 @@ function tevkori_get_sizes( $id, $size = 'thumbnail', $args = null ) { */ function tevkori_get_sizes_string( $id, $size = 'thumbnail', $args = null ) { $sizes = tevkori_get_sizes( $id, $size, $args ); + return $sizes ? 'sizes="' . $sizes . '"' : false; } @@ -202,13 +203,17 @@ function tevkori_get_srcset_array( $id, $size = 'thumbnail' ) { // Calculate the image aspect ratio. $img_ratio = $img_height / $img_width; - // Images that have been edited in WordPres after being uploaded will - // contain a unique hash. We look for that hash and use it later to filter - // out images that are left overs from previous renditions. + /* + * Images that have been edited in WordPress after being uploaded will + * contain a unique hash. We look for that hash and use it later to filter + * out images that are leftovers from previous renditions. + */ $img_edited = preg_match( '/-e[0-9]{13}/', $img_url, $img_edit_hash ); - // Loop through available images and only use images that are resized - // versions of the same rendition. + /* + * Loop through available images and only use images that are resized + * versions of the same rendition. + */ foreach ( $img_sizes as $img ) { // Filter out images that are leftovers from previous renditions. @@ -290,19 +295,24 @@ function tevkori_get_src_sizes( $id, $size = 'thumbnail' ) { } /** - * Filters images in post content to add `srcset` and `sizes`. + * Filters images in post content to add 'srcset' and 'sizes'. * * @since 3.0 * * @param string $content The raw post content to be filtered. - * @return string Converted content with `srcset` and `sizes` added to images. + * @return string Converted content with 'srcset' and 'sizes' added to images. */ function tevkori_filter_content_images( $content ) { + // Only match images in our uploads directory. $uploads_dir = wp_upload_dir(); $path_to_upload_dir = $uploads_dir['baseurl']; - $content = preg_replace_callback( '|]+' . $path_to_upload_dir . '[^>]+)[\s?][\/?]>|i', '_tevkori_filter_content_images_callback', $content ); + $content = preg_replace_callback( + '|]+' . $path_to_upload_dir . '[^>]+)[\s?][\/?]>|i', + '_tevkori_filter_content_images_callback', + $content + ); return $content; } @@ -322,7 +332,7 @@ function _tevkori_filter_content_images_callback( $image ) { list( $image_html, $atts ) = $image; $id = $size = false; - // Bail early if a `srcset` attribute already exists. + // Bail early if a 'srcset' attribute already exists. if ( false !== strpos( $atts, 'srcset=' ) ) { return $image_html; } @@ -346,8 +356,8 @@ function _tevkori_filter_content_images_callback( $image ) { } /* - * If attempts to get values for `id` and `size` failed, use the - * src to query for matching values in `_wp_attachment_metadata` + * If attempts to get values for ID and size failed, use the + * src to query for matching values in '_wp_attachment_metadata'. */ if ( false === $id || false === $size ) { preg_match( '/src="([^"]+)"/', $atts, $url ); @@ -360,8 +370,8 @@ function _tevkori_filter_content_images_callback( $image ) { /* * If we already have an ID, we use it to get the attachment metadata - * using `wp_get_attachment_metadata()`. Otherwise, we'll use the image - * `src` url to query the postmeta table for both the attachement ID and + * using 'wp_get_attachment_metadata()'. Otherwise, we'll use the image + * 'src' url to query the postmeta table for both the attachement ID and * metadata, which we'll use later to get the size. */ if ( ! empty( $id ) ) { @@ -376,6 +386,7 @@ function _tevkori_filter_content_images_callback( $image ) { // If the query is successful, we can determine the ID and size. if ( is_object( $meta_object ) ) { $id = $meta_object->post_id; + // Unserialize the meta_value returned in our query. $meta = maybe_unserialize( $meta_object->meta_value ); } else { @@ -385,13 +396,13 @@ function _tevkori_filter_content_images_callback( $image ) { /* * Now that we have the attachment ID and metadata, we can retrieve the - * size by matching the original image's `src` filename with the sizes + * size by matching the original image's 'src' filename with the sizes * included in the attachment metadata. */ if ( $id && $meta ) { /* * First, see if the file is the full size image. If not, we loop through - * the itermediate sizes until we find a match. + * the intermediate sizes until we find a match. */ if ( $image_filename === basename( $meta['file'] ) ) { $size = 'full'; @@ -406,7 +417,7 @@ function _tevkori_filter_content_images_callback( $image ) { } } - // If we have an ID and size, try for srcset and sizes and update the markup. + // If we have an ID and size, try for 'srcset' and 'sizes' and update the markup. if ( $id && $size && $srcset = tevkori_get_srcset_string( $id, $size ) ) { $sizes = tevkori_get_sizes_string( $id, $size ); $image_html = ""; @@ -416,7 +427,7 @@ function _tevkori_filter_content_images_callback( $image ) { } /** - * Filter to add srcset and sizes attributes to post thumbnails and gallery images. + * Filter to add 'srcset' and 'sizes' attributes to post thumbnails and gallery images. * * @see wp_get_attachment_image_attributes * @return array Attributes for image. @@ -425,14 +436,14 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) if ( ! isset( $attr['srcset'] ) ) { $srcset = tevkori_get_srcset( $attachment->ID, $size ); - // Set the srcset attribute if one was returned. + // Set the 'srcset' attribute if one was returned. if ( $srcset ) { $attr['srcset'] = $srcset; if ( ! isset( $attr['sizes'] ) ) { $sizes = tevkori_get_sizes( $attachment->ID, $size ); - // Set the sizes attribute if sizes were returned. + // Set the 'sizes' attribute if sizes were returned. if ( $sizes ) { $attr['sizes'] = $sizes; } From 4e062351f3758dd160a51f714585dac1398432eb Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 23 Sep 2015 13:59:47 +0200 Subject: [PATCH 14/15] Optimize backcompat replacement of data-sizes attribute --- wp-tevko-responsive-images.php | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 4444a76..b958713 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -324,6 +324,16 @@ function _tevkori_filter_content_images_callback( $image ) { // Bail early if a `srcset` attribute already exists. if ( false !== strpos( $atts, 'srcset=' ) ) { + + /* + * Backward compatibility. + * + * 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. + */ + $image_html = str_replace( ' data-sizes="', ' sizes="', $image_html ); + return $image_html; } @@ -443,18 +453,3 @@ function tevkori_filter_attachment_image_attributes( $attr, $attachment, $size ) return $attr; } add_filter( 'wp_get_attachment_image_attributes', 'tevkori_filter_attachment_image_attributes', 0, 3 ); - -/** - * Filter for the_content to replace data-size attributes with size attributes. - * - * @since 2.2.0 - * - * @param string $content The raw post content to be filtered. - */ -function tevkori_filter_content_sizes( $content ) { - $images = '/( Date: Wed, 23 Sep 2015 11:53:36 +0200 Subject: [PATCH 15/15] Remove deprecated tevkori_get_src_sizes --- wp-tevko-responsive-images.php | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index 833d808..5f11f58 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -280,20 +280,6 @@ function tevkori_get_srcset_string( $id, $size = 'thumbnail' ) { return 'srcset="' . $srcset_value . '"'; } -/** - * Create a 'srcset' attribute. - * - * @deprecated 2.1.0 - * @deprecated Use tevkori_get_srcset_string instead. - * @see tevkori_get_srcset_string - * - * @param int $id Image attachment ID. - * @return string|bool A full 'srcset' string or false. - */ -function tevkori_get_src_sizes( $id, $size = 'thumbnail' ) { - return tevkori_get_srcset_string( $id, $size ); -} - /** * Filters images in post content to add 'srcset' and 'sizes'. *