WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/28/2015 05:40:04 AM (11 years ago)
Author:
azaozz
Message:

Responsive images:

  • Introduce wp_calculate_image_srcset() that replaces wp_get_attachment_image_srcset_array() and is used as lower level function for retrieving the srcset data as array.
  • Use the new function when generating srcset and sizes on the front-end. This is faster as no (other) image API functions are used.
  • Change the wp_get_attachment_image_srcset(). Now it is meant for use in templates and is no longer used in core.
  • A few logic fixes and improvements.
  • Some names changed to be (hopefully) more descriptive.
  • Fixed/updated tests.

Props joemcgill, jaspermdegroot, azaozz.
See #34430.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/phpunit/tests/media.php

    r35355 r35412  
    717717
    718718        /**
     719         * Helper function to get image size array from size "name"
     720         */
     721        function _get_image_size_array_from_name( $size_name ) {
     722                switch ( $size_name ) {
     723                        case 'thumbnail':
     724                                return array( 150, 150 );
     725                        case 'medium':
     726                                return array( 300, 225 );
     727                        case 'large':
     728                                return array( 1024, 768 );
     729                        case 'full':
     730                                return array( 1600, 1200 ); // actual size of ../data/images/test-image-large.png
     731                        default:
     732                                return array( 800, 600 ); // soft-resized image
     733                }
     734        }
     735
     736        /**
    719737         * @ticket 33641
    720738         */
    721         function test_wp_get_attachment_image_srcset_array() {
     739        function test_wp_calculate_image_srcset() {
    722740                $year_month = date('Y/m');
    723                 $image = wp_get_attachment_metadata( self::$large_id );
     741                $image_meta = wp_get_attachment_metadata( self::$large_id );
    724742
    725743                $expected = array(
    726744                        array(
    727                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month . '/' . $image['sizes']['medium']['file'],
     745                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month . '/' . $image_meta['sizes']['medium']['file'],
    728746                                'descriptor' => 'w',
    729                                 'value'      => $image['sizes']['medium']['width'],
     747                                'value'      => $image_meta['sizes']['medium']['width'],
    730748                        ),
    731749                        array(
    732                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month . '/' . $image['sizes']['large']['file'],
     750                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month . '/' . $image_meta['sizes']['large']['file'],
    733751                                'descriptor' => 'w',
    734                                 'value'      => $image['sizes']['large']['width'],
     752                                'value'      => $image_meta['sizes']['large']['width'],
    735753                        ),
    736754                        array(
    737                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image['file'],
     755                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image_meta['file'],
    738756                                'descriptor' => 'w',
    739                                 'value'      => $image['width'],
     757                                'value'      => $image_meta['width'],
    740758                        ),
    741759                );
    … …  
    745763
    746764                foreach ( $sizes as $size ) {
    747                         $this->assertSame( $expected, wp_get_attachment_image_srcset_array( self::$large_id, $size ) );
     765                        $image_url = wp_get_attachment_image_url( self::$large_id, $size );
     766                        $size_array = $this->_get_image_size_array_from_name( $size );
     767                        $this->assertSame( $expected, wp_calculate_image_srcset( $image_url, $size_array, $image_meta ) );
    748768                }
    749769        }
    … …  
    752772         * @ticket 33641
    753773         */
    754         function test_wp_get_attachment_image_srcset_array_no_date_uploads() {
     774        function test_wp_calculate_image_srcset_no_date_uploads() {
    755775                // Save the current setting for uploads folders
    756776                $uploads_use_yearmonth_folders = get_option( 'uploads_use_yearmonth_folders' );
    … …  
    763783                $id = self::factory()->attachment->create_upload_object( $filename );
    764784
    765                 $image = wp_get_attachment_metadata( $id );
     785                $image_meta = wp_get_attachment_metadata( $id );
    766786
    767787                $expected = array(
    768788                        array(
    769                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image['sizes']['medium']['file'],
     789                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image_meta['sizes']['medium']['file'],
    770790                                'descriptor' => 'w',
    771                                 'value'      => $image['sizes']['medium']['width'],
     791                                'value'      => $image_meta['sizes']['medium']['width'],
    772792                        ),
    773793                        array(
    774                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image['sizes']['large']['file'],
     794                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image_meta['sizes']['large']['file'],
    775795                                'descriptor' => 'w',
    776                                 'value'      => $image['sizes']['large']['width'],
     796                                'value'      => $image_meta['sizes']['large']['width'],
    777797                        ),
    778798                        array(
    779                                 'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image['file'],
     799                                'url'        => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image_meta['file'],
    780800                                'descriptor' => 'w',
    781                                 'value'      => $image['width'],
     801                                'value'      => $image_meta['width'],
    782802                        ),
    783803                );
    … …  
    787807
    788808                foreach ( $sizes as $size ) {
    789                         $this->assertSame( $expected, wp_get_attachment_image_srcset_array( $id, $size ) );
     809                        $size_array = $this->_get_image_size_array_from_name( $size );
     810                        $image_url = wp_get_attachment_image_url( self::$large_id, $size );
     811                        $this->assertSame( $expected, wp_calculate_image_srcset( $image_url, $size_array, $image_meta ) );
    790812                }
    791813
    … …  
    797819         * @ticket 33641
    798820         */
    799         function test_wp_get_attachment_image_srcset_array_with_edits() {
     821        function test_wp_calculate_image_srcset_with_edits() {
    800822                // For this test we're going to mock metadata changes from an edit.
    801823                // Start by getting the attachment metadata.
    802                 $meta = wp_get_attachment_metadata( self::$large_id );
     824                $image_meta = wp_get_attachment_metadata( self::$large_id );
     825                $image_url = wp_get_attachment_image_url( self::$large_id );
     826                $size_array = $this->_get_image_size_array_from_name( 'medium' );
    803827
    804828                // Copy hash generation method used in wp_save_image().
    … …  
    806830
    807831                // Replace file paths for full and medium sizes with hashed versions.
    808                 $filename_base = basename( $meta['file'], '.png' );
    809                 $meta['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $meta['file'] );
    810                 $meta['sizes']['medium']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $meta['sizes']['medium']['file'] );
    811 
    812                 // Save edited metadata.
    813                 wp_update_attachment_metadata( self::$large_id, $meta );
     832                $filename_base = basename( $image_meta['file'], '.png' );
     833                $image_meta['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['file'] );
     834                $image_meta['sizes']['medium']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['medium']['file'] );
     835                $image_meta['sizes']['large']['file'] = str_replace( $filename_base, $filename_base . '-' . $hash, $image_meta['sizes']['large']['file'] );
    814836
    815837                // Calculate a srcset array.
    816                 $sizes = wp_get_attachment_image_srcset_array( self::$large_id, 'medium' );
     838                $sizes = wp_calculate_image_srcset( $image_url, $size_array, $image_meta );
    817839
    818840                // Test to confirm all sources in the array include the same edit hash.
    … …  
    825847         * @ticket 33641
    826848         */
    827         function test_wp_get_attachment_image_srcset_array_false() {
    828                 $sizes = wp_get_attachment_image_srcset_array( 99999, 'foo' );
     849        function test_wp_calculate_image_srcset_false() {
     850                $sizes = wp_calculate_image_srcset( 'file.png', array( 400, 300 ), array() );
    829851
    830852                // For canola.jpg we should return
    … …  
    835857         * @ticket 33641
    836858         */
    837         function test_wp_get_attachment_image_srcset_array_no_width() {
    838                 // Filter image_downsize() output.
    839                 add_filter( 'wp_generate_attachment_metadata', array( $this, '_test_wp_get_attachment_image_srcset_array_no_width_filter' ) );
    840 
    841                 $old_meta = get_post_meta( self::$large_id, '_wp_attachment_metadata', true );
     859        function test_wp_calculate_image_srcset_no_width() {
    842860                $file = get_attached_file( self::$large_id );
    843 
    844                 $data = wp_generate_attachment_metadata( self::$large_id, $file );
    845                 wp_update_attachment_metadata( self::$large_id, $data );
    846 
    847                 $srcset = wp_get_attachment_image_srcset_array( self::$large_id, 'medium' );
    848 
    849                 update_post_meta( self::$large_id, '_wp_attachment_metadata', $old_meta );
     861                $image_url = wp_get_attachment_image_url( self::$large_id, 'medium' );
     862                $image_meta = wp_generate_attachment_metadata( self::$large_id, $file );
     863
     864                $size_array = array(0, 0);
     865
     866                $srcset = wp_calculate_image_srcset( $image_url, $size_array, $image_meta );
    850867
    851868                // The srcset should be false.
    … …  
    854871
    855872        /**
    856          * Helper function to filter image_downsize and return zero values for width and height.
    857          */
    858         public function _test_wp_get_attachment_image_srcset_array_no_width_filter( $meta ) {
    859                 remove_filter( 'wp_generate_attachment_metadata', array( $this, __FUNCTION__ ) );
    860 
    861                 $meta['sizes']['medium']['width'] = 0;
    862                 $meta['sizes']['medium']['height'] = 0;
    863                 return $meta;
    864         }
    865 
    866         /**
    867873         * @ticket 33641
    868874         */
    869875        function test_wp_get_attachment_image_srcset() {
    870                 $sizes = wp_get_attachment_image_srcset( self::$large_id, 'full-size' );
    871 
    872                 $image = wp_get_attachment_metadata( self::$large_id );
     876                $image_meta = wp_get_attachment_metadata( self::$large_id );
     877                $size_array = array( 1600, 1200 ); // full size
     878
     879                $sizes = wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta );
     880
    873881                $year_month = date('Y/m');
    874882
    875883                $expected = 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month = date('Y/m') . '/'
    876                         . $image['sizes']['medium']['file'] . ' ' . $image['sizes']['medium']['width'] . 'w, ';
     884                        . $image_meta['sizes']['medium']['file'] . ' ' . $image_meta['sizes']['medium']['width'] . 'w, ';
    877885                $expected .= 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $year_month = date('Y/m') . '/'
    878                         . $image['sizes']['large']['file'] . ' ' . $image['sizes']['large']['width'] . 'w, ';
    879                 $expected .= 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] .'w';
     886                        . $image_meta['sizes']['large']['file'] . ' ' . $image_meta['sizes']['large']['width'] . 'w, ';
     887                $expected .= 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] .'w';
    880888
    881889                $this->assertSame( $expected, $sizes );
    … …  
    886894         */
    887895        function test_wp_get_attachment_image_srcset_single_srcset() {
     896                $image_meta = wp_get_attachment_metadata( self::$large_id );
     897                $size_array = array( 150, 150 );
    888898                /*
    889899                 * In our tests, thumbnails will only return a single srcset candidate,
    890900                 * so we shouldn't return a srcset value in order to avoid unneeded markup.
    891901                 */
    892                 $sizes = wp_get_attachment_image_srcset( self::$large_id, 'thumbnail' );
     902                $sizes = wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta );
    893903
    894904                $this->assertFalse( $sizes );
    … …  
    900910        function test_wp_get_attachment_image_sizes() {
    901911                // Test sizes against the default WP sizes.
    902                 $intermediates = array('thumbnail', 'medium', 'large');
    903 
    904                 foreach( $intermediates as $int ) {
    905                         $width = get_option( $int . '_size_w' );
     912                $intermediates = array( 'thumbnail', 'medium', 'large' );
     913                $image_meta = wp_get_attachment_metadata( self::$large_id );
     914
     915                foreach( $intermediates as $int_size ) {
     916                        $size_array = $this->_get_image_size_array_from_name( $int_size );
     917                        list( $width, $height ) = $size_array;
    906918
    907919                        $expected = '(max-width: ' . $width . 'px) 100vw, ' . $width . 'px';
    908                         $sizes = wp_get_attachment_image_sizes( self::$large_id, $int );
    909 
    910                         $this->assertSame($expected, $sizes);
     920                        $sizes = wp_get_attachment_image_sizes( $size_array, $image_meta );
     921
     922                        $this->assertSame( $expected, $sizes );
    911923                }
    912924        }
    … …  
    915927         * @ticket 33641
    916928         */
    917         function test_wp_get_attachment_image_sizes_with_width() {
    918                 $width = 350;
    919 
    920                 $expected = '(max-width: 350px) 100vw, 350px';
    921                 $sizes = wp_get_attachment_image_sizes( self::$large_id, 'medium', $width );
    922 
    923                 $this->assertSame( $expected, $sizes );
    924         }
    925 
    926         /**
    927          * @ticket 33641
    928          */
    929929        function test_wp_make_content_images_responsive() {
    930                 $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, 'medium' ) );
    931                 $sizes = sprintf( 'sizes="%s"', wp_get_attachment_image_sizes( self::$large_id, 'medium' ) );
     930                $image_meta = wp_get_attachment_metadata( self::$large_id );
     931                $size_array = $this->_get_image_size_array_from_name( 'medium' );
     932
     933                $srcset = sprintf( 'srcset="%s"', wp_get_attachment_image_srcset( self::$large_id, $size_array, $image_meta ) );
     934                $sizes = sprintf( 'sizes="%s"', wp_get_attachment_image_sizes( $size_array, $image_meta, self::$large_id ) );
    932935
    933936                // Function used to build HTML for the editor.
    934937                $img = get_image_tag( self::$large_id, '', '', '', 'medium' );
    935                 $img_no_size = str_replace( 'size-', '', $img );
    936                 $img_no_size_id = str_replace( 'wp-image-', 'id-', $img_no_size );
     938                $img_no_size_in_class = str_replace( 'size-', '', $img );
     939                $img_no_width_height = str_replace( ' width="' . $size_array[0] . '"', '', $img );
     940                $img_no_width_height = str_replace( ' height="' . $size_array[1] . '"', '', $img_no_width_height );
     941                $img_no_size_id = str_replace( 'wp-image-', 'id-', $img );
    937942
    938943                // Manually add srcset and sizes to the markup from get_image_tag();
    939                 $respimg = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img);
    940                 $respimg_no_size = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size);
    941 
    942                 $content = '<p>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.</p>
    943                         <p>First things first:</p>
    944 
     944                $respimg = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img );
     945                $respimg_no_size_in_class = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size_in_class );
     946                $respimg_no_width_height = preg_replace( '|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_width_height );
     947
     948                $content = '
     949                        <p>Image, standard. Should have srcset and sizes.</p>
    945950                        %1$s
    946951
    947                         <ul>
    948                         <li><a href="http://wordpress.org" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
    949                         </ul>
    950 
     952                        <p>Image, no size class. Should have srcset and sizes.</p>
    951953                        %2$s
    952954
    953                         <p>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.<br />
    954                         When a new version is released, <a href="http://wordpress.org" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.<br />
    955                         Upgrading is a couple of clicks!</p>
    956 
     955                        <p>Image, no width and height attributes. Should have srcset and sizes (from matching the file name).</p>
    957956                        %3$s
    958957
    959                         <p>Then you can start enjoying the WordPress experience:</p>
    960                         <ul>
    961                         <li>Edit your personal information at <a href="http://wordpress.org" title="Edit settings like your password, your display name and your contact information">Users &#8250; Your Profile</a></li>
    962                         <li>Start publishing at <a href="http://wordpress.org" title="Create a new post">Posts &#8250; Add New</a> and at <a href="http://wordpress.org" title="Create a new page">Pages &#8250; Add New</a></li>
    963                         <li>Browse and install plugins at <a href="http://wordpress.org" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins &#8250; Add New</a></li>
    964                         <li>Browse and install themes at <a href="http://wordpress.org" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance &#8250; Add New Themes</a></li>
    965                         <li>Modify and prettify your website&#8217;s links at <a href="http://wordpress.org" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings &#8250; Permalinks</a></li>
    966                         <li>Import content from another system or WordPress site at <a href="http://wordpress.org" title="WordPress comes with importers for the most common publishing systems">Tools &#8250; Import</a></li>
    967                         <li>Find answers to your questions at the <a href="http://wordpress.orgs" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
    968                         </ul>';
    969 
    970                 $content_unfiltered = sprintf( $content, $img, $img_no_size, $img_no_size_id );
    971                 $content_filtered = sprintf( $content, $respimg, $respimg_no_size, $img_no_size_id );
     958                        <p>Image, no attachment ID class. Should NOT have srcset and sizes.</p>
     959                        %4$s';
     960
     961                $content_unfiltered = sprintf( $content, $img, $img_no_size_in_class, $img_no_width_height, $img_no_size_id );
     962                $content_filtered = sprintf( $content, $respimg, $respimg_no_size_in_class, $respimg_no_width_height, $img_no_size_id );
    972963
    973964                $this->assertSame( $content_filtered, wp_make_content_images_responsive( $content_unfiltered ) );
Note: See TracChangeset for help on using the changeset viewer.