wp_image_add_srcset_and_sizes() WordPress Function
The wp_image_add_srcset_and_sizes() function allows you to automatically add srcset and sizes attributes to images. This can be useful for responsive design. The function can be added to your theme's functions.php file or a plugin.
wp_image_add_srcset_and_sizes( string $image, array $image_meta, int $attachment_id ) #
Adds ‘srcset’ and ‘sizes’ attributes to an existing ‘img’ element.
Description
See also
Parameters
- $image
(string)(Required)An HTML 'img' element to be filtered.
- $image_meta
(array)(Required)The image meta data as returned by 'wp_get_attachment_metadata()'.
- $attachment_id
(int)(Required)Image attachment ID.
Return
(string) Converted 'img' element with 'srcset' and 'sizes' attributes added.
Source
File: wp-includes/media.php
function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) { // Ensure the image meta exists. if ( empty( $image_meta['sizes'] ) ) { return $image; } $image_src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : ''; list( $image_src ) = explode( '?', $image_src ); // Return early if we couldn't get the image source. if ( ! $image_src ) { return $image; } // Bail early if an image has been inserted and later edited. if ( preg_match( '/-e[0-9]{13}/', $image_meta['file'], $img_edit_hash ) && strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) { return $image; } $width = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0; $height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0; if ( $width && $height ) { $size_array = array( $width, $height ); } else { $size_array = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id ); if ( ! $size_array ) { return $image; } } $srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id ); if ( $srcset ) { // Check if there is already a 'sizes' attribute. $sizes = strpos( $image, ' sizes=' ); if ( ! $sizes ) { $sizes = wp_calculate_image_sizes( $size_array, $image_src, $image_meta, $attachment_id ); } } if ( $srcset && $sizes ) { // Format the 'srcset' and 'sizes' string and escape attributes. $attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) ); if ( is_string( $sizes ) ) { $attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) ); } // Add the srcset and sizes attributes to the image markup. return preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image ); } return $image; }
Expand full source codeCollapse full source codeView on TracView on GitHub
Changelog
Version | Description |
---|---|
4.4.0 | Introduced. |