WordPress.org

Make WordPress Core

Changeset 48272


Ignore:
Timestamp:
07/02/2020 02:01:28 AM (3 months ago)
Author:
flixos90
Message:

Media: Improve support for opting out of lazy-loading for template images.

With this changeset, in addition to the already present wp_lazy_loading_enabled filter, developers can now opt out of lazy-loading template images via wp_get_attachment_image() by passing a loading attribute with boolean value false. This can be used e.g. by theme developers on images which are very likely to be in the initial viewport.

This changeset also improves related test coverage.

Props adamsilverstein, azaozz, joemcgill, johnbillion.
See #50425, #44427.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r48239 r48272  
    10491049        $attr = wp_parse_args( $attr, $default_attr );
    10501050
     1051        // If `loading` attribute default of `lazy` is overridden for this
     1052        // image to omit the attribute, ensure it is not included.
     1053        if ( array_key_exists( 'loading', $attr ) && ! $attr['loading'] ) {
     1054            unset( $attr['loading'] );
     1055        }
     1056
    10511057        // Generate 'srcset' and 'sizes' if not already present.
    10521058        if ( empty( $attr['srcset'] ) ) {
     
    17261732     * @since 5.5.0
    17271733     *
    1728      * @param string $value   The `loading` attribute value, defaults to `lazy`.
    1729      * @param string $image   The HTML `img` tag to be filtered.
    1730      * @param string $context Additional context about how the function was called or where the img tag is.
     1734     * @param string|bool $value   The `loading` attribute value. Returning a false-y value will result in the
     1735     *                             attribute being omitted for the image. Default is `lazy`.
     1736     * @param string      $image   The HTML `img` tag to be filtered.
     1737     * @param string      $context Additional context about how the function was called or where the img tag is.
    17311738     */
    17321739    $value = apply_filters( 'wp_img_tag_add_loading_attr', 'lazy', $image, $context );
  • trunk/tests/phpunit/tests/media.php

    r48239 r48272  
    26762676
    26772677    /**
     2678     * @ticket 44427
     2679     * @ticket 50367
     2680     */
     2681    function test_wp_img_tag_add_loading_attr() {
     2682        $img = '<img src="example.png" alt=" width="300" height="225" />';
     2683        $img = wp_img_tag_add_loading_attr( $img, 'test' );
     2684
     2685        $this->assertContains( ' loading="lazy"', $img );
     2686    }
     2687
     2688    /**
     2689     * @ticket 44427
    26782690     * @ticket 50367
    26792691     */
     
    26822694        $img = wp_img_tag_add_loading_attr( $img, 'test' );
    26832695
    2684         $this->assertNotContains( ' loading="lazy"', $img );
    2685     }
    2686 
    2687     /**
     2696        $this->assertNotContains( ' loading=', $img );
     2697    }
     2698
     2699    /**
     2700     * @ticket 44427
    26882701     * @ticket 50367
    26892702     */
     
    26922705        $img = wp_img_tag_add_loading_attr( $img, 'test' );
    26932706
     2707        $this->assertNotContains( ' loading=', $img );
     2708
     2709        // Test specifically that the attribute is not there with double-quotes,
     2710        // to avoid regressions.
    26942711        $this->assertNotContains( ' loading="lazy"', $img );
     2712    }
     2713
     2714    /**
     2715     * @ticket 44427
     2716     * @ticket 50425
     2717     */
     2718    function test_wp_img_tag_add_loading_attr_opt_out() {
     2719        $img = '<img src="example.png" alt=" width="300" height="225" />';
     2720        add_filter( 'wp_img_tag_add_loading_attr', '__return_false' );
     2721
     2722        $this->assertNotContains( ' loading=', $img );
     2723    }
     2724
     2725    /**
     2726     * @ticket 44427
     2727     * @ticket 50425
     2728     */
     2729    function test_wp_get_attachment_image_loading() {
     2730        $img = wp_get_attachment_image( self::$large_id );
     2731
     2732        $this->assertContains( ' loading="lazy"', $img );
     2733    }
     2734
     2735    /**
     2736     * @ticket 44427
     2737     * @ticket 50425
     2738     */
     2739    function test_wp_get_attachment_image_loading_opt_out() {
     2740        add_filter( 'wp_lazy_loading_enabled', '__return_false' );
     2741        $img = wp_get_attachment_image( self::$large_id );
     2742
     2743        // There should not be any loading attribute in this case.
     2744        $this->assertNotContains( ' loading=', $img );
     2745    }
     2746
     2747    /**
     2748     * @ticket 44427
     2749     * @ticket 50425
     2750     */
     2751    function test_wp_get_attachment_image_loading_opt_out_individual() {
     2752        // The default is already tested above, the filter below ensures that
     2753        // lazy-loading is definitely enabled globally for images.
     2754        add_filter( 'wp_lazy_loading_enabled', '__return_true' );
     2755
     2756        $img = wp_get_attachment_image( self::$large_id, 'thumbnail', false, array( 'loading' => false ) );
     2757
     2758        // There should not be any loading attribute in this case.
     2759        $this->assertNotContains( ' loading=', $img );
     2760    }
     2761
     2762    /**
     2763     * @ticket 44427
     2764     * @ticket 50425
     2765     * @dataProvider data_wp_lazy_loading_enabled_tag_name_defaults
     2766     *
     2767     * @param string $tag_name  Function context.
     2768     * @param bool   $expected Expected return value.
     2769     */
     2770    function test_wp_lazy_loading_enabled_tag_name_defaults( $tag_name, $expected ) {
     2771        if ( $expected ) {
     2772            $this->assertTrue( wp_lazy_loading_enabled( $tag_name, 'the_content' ) );
     2773        } else {
     2774            $this->assertFalse( wp_lazy_loading_enabled( $tag_name, 'the_content' ) );
     2775        }
     2776    }
     2777
     2778    function data_wp_lazy_loading_enabled_tag_name_defaults() {
     2779        return array(
     2780            'img => true'            => array( 'img', true ),
     2781            'iframe => false'        => array( 'iframe', false ),
     2782            'arbitrary tag => false' => array( 'blink', false ),
     2783        );
     2784    }
     2785
     2786    /**
     2787     * @ticket 50425
     2788     * @dataProvider data_wp_lazy_loading_enabled_context_defaults
     2789     *
     2790     * @param string $context  Function context.
     2791     * @param bool   $expected Expected return value.
     2792     */
     2793    function test_wp_lazy_loading_enabled_context_defaults( $context, $expected ) {
     2794        if ( $expected ) {
     2795            $this->assertTrue( wp_lazy_loading_enabled( 'img', $context ) );
     2796        } else {
     2797            $this->assertFalse( wp_lazy_loading_enabled( 'img', $context ) );
     2798        }
     2799    }
     2800
     2801    function data_wp_lazy_loading_enabled_context_defaults() {
     2802        return array(
     2803            'wp_get_attachment_image => true' => array( 'wp_get_attachment_image', true ),
     2804            'the_content => true'             => array( 'the_content', true ),
     2805            'the_excerpt => true'             => array( 'the_excerpt', true ),
     2806            'widget_text_content => true'     => array( 'widget_text_content', true ),
     2807            'get_avatar => true'              => array( 'get_avatar', true ),
     2808            'arbitrary context => true'       => array( 'something_completely_arbitrary', true ),
     2809        );
    26952810    }
    26962811}
Note: See TracChangeset for help on using the changeset viewer.