Skip to content

Commit

Permalink
Use content filtering instead of the image editor to add sizes and sr…
Browse files Browse the repository at this point in the history
…cset attributes

Fixes ResponsiveImagesCGgh-83
Fixes ResponsiveImagesCGgh-72
  • Loading branch information
jaspermdegroot committed Jul 18, 2015
1 parent b6091a1 commit acf1861
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 128 deletions.
53 changes: 0 additions & 53 deletions js/wp-tevko-responsive-images.js

This file was deleted.

123 changes: 48 additions & 75 deletions wp-tevko-responsive-images.php
Original file line number Diff line number Diff line change
Expand Up @@ -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(
'/<img\s([^>]+)>/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 '<img ' . $atts . $sizes . $srcset . '>';
},
$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.
Expand Down Expand Up @@ -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.
*
Expand All @@ -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 = '/(<img\s.*?)data-sizes="([^"]+)"/i';
$sizes = '${2}';
$content = preg_replace( $images, '${1}sizes="' . $sizes . '"', $content );

return $content;
}
add_filter( 'the_content', 'tevkori_filter_content_sizes' );


/**
* Filter to add php-respimg as an image editor.
*
Expand All @@ -373,28 +371,3 @@ function tevkori_wp_image_editors( $editors ) {
return $editors;
}
add_filter( 'wp_image_editors', 'tevkori_wp_image_editors' );

/**
* 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 ( ! $postID = $_POST['postID'] ) {
return;
};

// Grab the image size being passed from the AJAX request.
$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' );

0 comments on commit acf1861

Please sign in to comment.