wp_image_add_srcset_and_sizes

Adds 'srcset' and 'sizes' attributes to an existing 'img' element.

Description

(string) wp_image_add_srcset_and_sizes( (string) $image, (array) $image_meta, (int) $attachment_id ); 

Returns (string)

Converted 'img' element with 'srcset' and 'sizes' attributes added.

Parameters (3)

0. $image (string)
An HTML img element to be filtered.
1. $image_meta (array)
The image meta data as returned by wp_get_attachment_metadata()..
2. $attachment_id (int)
Image attachment ID.

Usage

  1. if ( !function_exists( 'wp_image_add_srcset_and_sizes' ) ) { 
  2. require_once ABSPATH . WPINC . '/media.php'; 
  3.  
  4. // An HTML 'img' element to be filtered. 
  5. $image = ''; 
  6.  
  7. // The image meta data as returned by 'wp_get_attachment_metadata()'. 
  8. $image_meta = array(); 
  9.  
  10. // Image attachment ID. 
  11. $attachment_id = -1; 
  12.  
  13. // NOTICE! Understand what this does before running. 
  14. $result = wp_image_add_srcset_and_sizes($image, $image_meta, $attachment_id); 
  15.  

Defined (1)

The function is defined in the following location(s).

/wp-includes/media.php  
  1. function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) { 
  2. // Ensure the image meta exists. 
  3. if ( empty( $image_meta['sizes'] ) ) { 
  4. return $image; 
  5.  
  6. $image_src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : ''; 
  7. list( $image_src ) = explode( '?', $image_src ); 
  8.  
  9. // Return early if we couldn't get the image source. 
  10. if ( ! $image_src ) { 
  11. return $image; 
  12.  
  13. // Bail early if an image has been inserted and later edited. 
  14. if ( preg_match( '/-e[0-9]{13}/', $image_meta['file'], $img_edit_hash ) && 
  15. strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) { 
  16.  
  17. return $image; 
  18.  
  19. $width = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0; 
  20. $height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0; 
  21.  
  22. if ( ! $width || ! $height ) { 
  23. /** 
  24. * If attempts to parse the size value failed, attempt to use the image meta data to match 
  25. * the image file name from 'src' against the available sizes for an attachment. 
  26. */ 
  27. $image_filename = wp_basename( $image_src ); 
  28.  
  29. if ( $image_filename === wp_basename( $image_meta['file'] ) ) { 
  30. $width = (int) $image_meta['width']; 
  31. $height = (int) $image_meta['height']; 
  32. } else { 
  33. foreach( $image_meta['sizes'] as $image_size_data ) { 
  34. if ( $image_filename === $image_size_data['file'] ) { 
  35. $width = (int) $image_size_data['width']; 
  36. $height = (int) $image_size_data['height']; 
  37. break; 
  38.  
  39. if ( ! $width || ! $height ) { 
  40. return $image; 
  41.  
  42. $size_array = array( $width, $height ); 
  43. $srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id ); 
  44.  
  45. if ( $srcset ) { 
  46. // Check if there is already a 'sizes' attribute. 
  47. $sizes = strpos( $image, ' sizes=' ); 
  48.  
  49. if ( ! $sizes ) { 
  50. $sizes = wp_calculate_image_sizes( $size_array, $image_src, $image_meta, $attachment_id ); 
  51.  
  52. if ( $srcset && $sizes ) { 
  53. // Format the 'srcset' and 'sizes' string and escape attributes. 
  54. $attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) ); 
  55.  
  56. if ( is_string( $sizes ) ) { 
  57. $attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) ); 
  58.  
  59. // Add 'srcset' and 'sizes' attributes to the image markup. 
  60. $image = preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image ); 
  61.  
  62. return $image;