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 46991cb..e513291 100644 --- a/wp-tevko-responsive-images.php +++ b/wp-tevko-responsive-images.php @@ -301,31 +301,80 @@ 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_filter_content_images( $content ) { + return preg_replace_callback( + '/]+)>/i', + + // Don't use an anonymous callback function because it isn't supported by PHP 5.2. + 'tevkori_filter_content_images_callback', + $content + ); +} +add_filter( 'the_content', 'tevkori_filter_content_images', 999, 1 ); + +/** + * Callback function for tevkori_filter_content_images. + * + * @since 3.0 + * + * @see tevkori_filter_content_images + * @param array $matches Array containing the regular expression matches. */ -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( $matches ) { + $atts = $matches[1]; + $sizes = $srcset = ''; - // Get the srcset attribute. - $srcset = tevkori_get_srcset_string( $id, $size ); + // Get the value of the class attribute. + preg_match( '/class="([^"]+)"/i', $atts, $classes ); - remove_filter( 'editor_max_image_size', 'tevkori_editor_image_size' ); + if ( $classes ) { + + // Grab ID and size info from core classes. + preg_match( '/wp-image-([0-9]+)/i', $classes[1], $id ); + preg_match( '/size-([^\s|"]+)\s|"/i', $classes[1], $size ); - if ( $srcset ) { + if ( $id ) { + $id = (int) $id[1]; - // Build the data-sizes attribute if sizes were returned. - $sizes = tevkori_get_sizes( $id, $size ); - $sizes = $sizes ? 'data-sizes="' . $sizes . '"' : ''; + // If a class with size name is present, use it. + if ( $size ) { + $size = $size[1]; - $html = preg_replace( '/(src\s*=\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html ); + // Otherwise create an array with the values from the width and height attributes. + } else { + preg_match( '/width="([0-9]+)"/', $atts, $width ); + preg_match( '/height="([0-9]+)"/', $atts, $height ); + + $size = array( + (int) $width[1], + (int) $height[1] + ); + } + + if ( $size ) { + // Get the srcset and sizes string. + $srcset_string = tevkori_get_srcset_string( $id, $size ); + $sizes_string = tevkori_get_sizes_string( $id, $size ); + + if ( $srcset_string && ! preg_match( '/srcset="([^"]+)"/i', $atts ) ) { + $srcset = ' ' . $srcset_string; + + if ( $sizes_string && ! preg_match( '/sizes="([^"]+)"/i', $atts ) ) { + $sizes = ' ' . $sizes_string; + } + } + } + } } - return $html; + return ''; } -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. @@ -357,69 +406,17 @@ 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. - * - * @since 2.2.0 - * - * @param string $content The raw post content to be filtered. - */ -function tevkori_filter_content_sizes( $content ) { - $images = '/(