From acf186102fd2bac3d4067411240962e257cf163b Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Sat, 18 Jul 2015 12:44:33 +0200 Subject: [PATCH] Use content filtering instead of the image editor to add sizes and srcset attributes Fixes gh-83 Fixes gh-72 --- js/wp-tevko-responsive-images.js | 53 ------------- wp-tevko-responsive-images.php | 123 ++++++++++++------------------- 2 files changed, 48 insertions(+), 128 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/wp-tevko-responsive-images.php b/wp-tevko-responsive-images.php index b75b5eb..ba1bcfd 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -265,31 +265,57 @@ function tevkori_get_src_sizes( $id, $size = 'thumbnail' ) { } /** - * Filter for extending image tag to include srcset attribute. + * Filter for the_content to add sizes and srcset attributes to images. * - * @see images_send_to_editor - * @return string HTML for image. + * @since 3.0 + * + * @param string $content The raw post content to be filtered. */ -function tevkori_extend_image_tag( $html, $id, $caption, $title, $align, $url, $size, $alt ) { - add_filter( 'editor_max_image_size', 'tevkori_editor_image_size' ); - - $sizes = tevkori_get_sizes( $id, $size ); - - // Build the data-sizes attribute if sizes were returned. - if ( $sizes ) { - $sizes = 'data-sizes="' . $sizes . '"'; - } - - // Build the srcset attribute. - $srcset = tevkori_get_srcset_string( $id, $size ); - - remove_filter( 'editor_max_image_size', 'tevkori_editor_image_size' ); - - $html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html ); - - return $html; +function tevkori_filter_content_images( $content ) { + return preg_replace_callback( + '/]+)>/i', + function( $matches ) { + $atts = $matches[1]; + $sizes = $srcset = ''; + + preg_match( '/class="([^"]+)"/i', $atts, $classes ); + + if ( $classes ) { + preg_match( '/wp-image-([0-9]+)/i', $classes[1], $id ); + preg_match( '/size-([^\s|"]+)\s|"/i', $classes[1], $size ); + + $id = (int) $id[1]; + + if ( $size ) { + $size = $size[1]; + } else { + preg_match( '/width="([0-9]+)"/', $atts, $width ); + preg_match( '/height="([0-9]+)"/', $atts, $height ); + + $size = array( + (int) $width[1], + (int) $height[1] + ); + } + + $srcset_string = tevkori_get_srcset_string( $id, $size ); + $sizes_string = tevkori_get_sizes_string( $id, $size ); + + if ( $srcset_string ) { + $srcset = ' ' . $srcset_string; + + if ( $sizes_string ) { + $sizes = ' ' . $sizes_string; + } + } + } + + return ''; + }, + $content + ); } -add_filter( 'image_send_to_editor', 'tevkori_extend_image_tag', 0, 8 ); +add_filter( 'the_content', 'tevkori_filter_content_images', 999, 1 ); /** * Filter to add srcset and sizes attributes to post thumbnails and gallery images. @@ -318,16 +344,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. - * - * @param array $max_image_size An array with the width as the first element, and the height as the second element. - * @return array A width & height array so large it shouldn't constrain reasonable images. - */ -function tevkori_editor_image_size( $max_image_size ) { - return array( 99999, 99999 ); -} - /** * Load admin scripts. * @@ -340,24 +356,6 @@ function tevkori_load_admin_scripts( $hook ) { } add_action( 'admin_enqueue_scripts', 'tevkori_load_admin_scripts' ); - -/** - * 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 = '/(