Changeset 59008 for trunk/src/wp-includes/media.php

Timestamp:

09/10/2024 11:59:54 PM (4 months ago)

Author:

joemcgill

Message:

Media: Add auto sizes for lazy-loaded images.

This implements the HTML spec for applying auto sizes to lazy-loaded images by prepending auto to the sizes attribute generated by WordPress if the image has a loading attribute set to lazy. For browser that support this HTML spec, the image's size value will be set to the concrete object size of the image. For browsers that don't support the spec, the word "auto" will be ignored when parsing the sizes value.

References:

• ​https://html.spec.whatwg.org/multipage/images.html#sizes-attributes
• ​https://github.com/whatwg/html/pull/8008

Props mukesh27, flixos90, joemcgill, westonruter, peterwilsoncc.
Fixes #61847.

File:

• trunk/src/wp-includes/media.php (modified) (3 diffs)

trunk/src/wp-includes/media.php

@@ -1138 +1138 @@
         }
 
+        // Adds 'auto' to the sizes attribute if applicable.
+        if (
+            isset( $attr['loading'] ) &&
+            'lazy' === $attr['loading'] &&
+            isset( $attr['sizes'] ) &&
+            ! wp_sizes_attribute_includes_valid_auto( $attr['sizes'] )
+        ) {
+            $attr['sizes'] = 'auto, ' . $attr['sizes'];
+        }
+
         /**
          * Filters the list of attachment image attributes.
@@ -1918 +1928 @@
             $filtered_image = wp_img_tag_add_loading_optimization_attrs( $filtered_image, $context );
 
+            // Adds 'auto' to the sizes attribute if applicable.
+            $filtered_image = wp_img_tag_add_auto_sizes( $filtered_image );
+
             /**
              * Filters an img tag within the content for a given context.
@@ -1962 +1975 @@
 
     return $content;
+}
+
+/**
+ * Adds 'auto' to the sizes attribute to the image, if the image is lazy loaded and does not already include it.
+ *
+ * @since 6.7.0
+ *
+ * @param string $image The image tag markup being filtered.
+ * @return string The filtered image tag markup.
+ */
+function wp_img_tag_add_auto_sizes( string $image ): string {
+    $processor = new WP_HTML_Tag_Processor( $image );
+
+    // Bail if there is no IMG tag.
+    if ( ! $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
+        return $image;
+    }
+
+    // Bail early if the image is not lazy-loaded.
+    $value = $processor->get_attribute( 'loading' );
+    if ( ! is_string( $value ) || 'lazy' !== strtolower( trim( $value, " \t\f\r\n" ) ) ) {
+        return $image;
+    }
+
+    $sizes = $processor->get_attribute( 'sizes' );
+
+    // Bail early if the image is not responsive.
+    if ( ! is_string( $sizes ) ) {
+        return $image;
+    }
+
+    // Don't add 'auto' to the sizes attribute if it already exists.
+    if ( wp_sizes_attribute_includes_valid_auto( $sizes ) ) {
+        return $image;
+    }
+
+    $processor->set_attribute( 'sizes', "auto, $sizes" );
+    return $processor->get_updated_html();
+}
+
+/**
+ * Checks whether the given 'sizes' attribute includes the 'auto' keyword as the first item in the list.
+ *
+ * Per the HTML spec, if present it must be the first entry.
+ *
+ * @since 6.7.0
+ *
+ * @param string $sizes_attr The 'sizes' attribute value.
+ * @return bool True if the 'auto' keyword is present, false otherwise.
+ */
+function wp_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
+    list( $first_size ) = explode( ',', $sizes_attr, 2 );
+    return 'auto' === strtolower( trim( $first_size, " \t\f\r\n" ) );
 }