WordPress.org

Make WordPress Core

Changeset 36152


Ignore:
Timestamp:
01/02/2016 03:55:47 AM (5 years ago)
Author:
dd32
Message:

Responsive images: fix the check whether the attachment meta matches the image src to work with http/https and CDNs.

Merges [36121] to the 4.4 branch.
Props webaware, joemcgill, azaozz.
Fixes #35045 and #35102.

Location:
branches/4.4
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/4.4

  • branches/4.4/src/wp-includes/media.php

    r36151 r36152  
    997997 */
    998998function wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id = 0 ) {
     999    /**
     1000     * Let plugins pre-filter the image meta to be able to fix inconsistencies in the stored data.
     1001     *
     1002     * @param array  $image_meta    The image meta data as returned by 'wp_get_attachment_metadata()'.
     1003     * @param array  $size_array    Array of width and height values in pixels (in that order).
     1004     * @param string $image_src     The 'src' of the image.
     1005     * @param int    $attachment_id The image attachment ID or 0 if not supplied.
     1006     */
     1007    $image_meta = apply_filters( 'wp_calculate_image_srcset_meta', $image_meta, $size_array, $image_src, $attachment_id );
     1008
    9991009    if ( empty( $image_meta['sizes'] ) ) {
    10001010        return false;
     
    10131023
    10141024    $image_basename = wp_basename( $image_meta['file'] );
    1015     $image_baseurl = _wp_upload_dir_baseurl();
    10161025
    10171026    /*
     
    10301039    }
    10311040
    1032     // Uploads are (or have been) in year/month sub-directories.
    1033     if ( $image_basename !== $image_meta['file'] ) {
    1034         $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
    1035 
    1036         if ( $dirname ) {
    1037             $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
    1038         }
    1039     }
    1040 
    1041     $image_baseurl = trailingslashit( $image_baseurl );
     1041    // Retrieve the uploads sub-directory from the full size image.
     1042    $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
     1043
     1044    if ( $dirname ) {
     1045        $dirname = trailingslashit( $dirname );
     1046    }
     1047
     1048    $image_baseurl = _wp_upload_dir_baseurl();
     1049    $image_baseurl = trailingslashit( $image_baseurl ) . $dirname;
    10421050
    10431051    // Calculate the image aspect ratio.
     
    10641072    $sources = array();
    10651073
     1074    /**
     1075     * To make sure the ID matches our image src, we will check to see if any sizes in our attachment
     1076     * meta match our $image_src. If no mathces are found we don't return a srcset to avoid serving
     1077     * an incorrect image. See #35045.
     1078     */
     1079    $src_matched = false;
     1080
    10661081    /*
    10671082     * Loop through available images. Only use images that are resized
     
    10691084     */
    10701085    foreach ( $image_sizes as $image ) {
     1086
     1087        // If the file name is part of the `src`, we've confirmed a match.
     1088        if ( ! $src_matched && false !== strpos( $image_src, $dirname . $image['file'] ) ) {
     1089            $src_matched = true;
     1090        }
    10711091
    10721092        // Filter out images that are from previous edits.
     
    11271147
    11281148    // Only return a 'srcset' value if there is more than one source.
    1129     if ( count( $sources ) < 2 ) {
     1149    if ( ! $src_matched || count( $sources ) < 2 ) {
    11301150        return false;
    11311151    }
     
    13061326        strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) {
    13071327
    1308         return $image;
    1309     }
    1310 
    1311     $base_url = trailingslashit( _wp_upload_dir_baseurl() );
    1312     $image_base_url = $base_url;
    1313 
    1314     $dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
    1315     if ( $dirname ) {
    1316         $image_base_url .= trailingslashit( $dirname );
    1317     }
    1318 
    1319     $all_sizes = wp_list_pluck( $image_meta['sizes'], 'file' );
    1320 
    1321     foreach ( $all_sizes as $key => $file ) {
    1322         $all_sizes[ $key ] = $image_base_url . $file;
    1323     }
    1324 
    1325     // Add the original image.
    1326     $all_sizes[] = $image_base_url . basename( $image_meta['file'] );
    1327 
    1328     // Bail early if the image src doesn't match any of the known image sizes.
    1329     if ( ! in_array( $image_src, $all_sizes ) ) {
    13301328        return $image;
    13311329    }
  • branches/4.4/tests/phpunit/tests/media.php

    r36151 r36152  
    12211221        $this->assertFalse( strpos( wp_calculate_image_srcset( $size_array, $large_src, $image_meta ), $full_src ) );
    12221222    }
     1223
     1224    /**
     1225     * @ticket 35045
     1226     * @ticket 33641
     1227     */
     1228    function test_wp_make_content_images_responsive_schemes() {
     1229        $image_meta = wp_get_attachment_metadata( self::$large_id );
     1230        $size_array = $this->_get_image_size_array_from_name( 'medium' );
     1231
     1232        $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) );
     1233        $sizes  = sprintf( 'sizes="%s"', wp_get_attachment_image_sizes( self::$large_id, $size_array, $image_meta ) );
     1234
     1235        // Build HTML for the editor.
     1236        $img          = get_image_tag( self::$large_id, '', '', '', 'medium' );
     1237        $img_https    = str_replace( 'http://', 'https://', $img );
     1238        $img_relative = str_replace( 'http://', '//', $img );
     1239
     1240        // Manually add srcset and sizes to the markup from get_image_tag().
     1241        $respimg          = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
     1242        $respimg_https    = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_https );
     1243        $respimg_relative = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_relative );
     1244
     1245        $content = '
     1246            <p>Image, http: protocol. Should have srcset and sizes.</p>
     1247            %1$s
     1248
     1249            <p>Image, https: protocol. Should have srcset and sizes.</p>
     1250            %2$s
     1251
     1252            <p>Image, protocol-relative. Should have srcset and sizes.</p>
     1253            %3$s';
     1254
     1255        $unfiltered = sprintf( $content, $img, $img_https, $img_relative );
     1256        $expected   = sprintf( $content, $respimg, $respimg_https, $respimg_relative );
     1257        $actual     = wp_make_content_images_responsive( $unfiltered );
     1258
     1259        $this->assertSame( $expected, $actual );
     1260    }
    12231261}
Note: See TracChangeset for help on using the changeset viewer.