wp_get_attachment_image_srcset()
Gets the value for the srcset attribute of the <img> HTML tag. The value will contain the names of all available sizes of the specified image (attachment) in the following format: image.jpg 1x, image-sm.jpg 640w"
.
The function retrieves all available sizes of the attachment image by its ID and creates a string for the srcset attribute from the obtained data.
The function will return nothing if:
-
the specified image is an animated GIF image. In this case, it is impossible to obtain intermediate sizes.
- only one intermediate size data could be obtained. At least two are needed for srcset.
When searching for intermediate sizes, the function skips images:
-
if the width of the intermediate image is greater than 1600px. This value can be changed via the filter
max_srcset_image_width
. -
that have been edited (originals).
- whose proportions differ from the main one. That is, height/width is not equal to height/width of the intermediate image. A margin of error of 0.002 is allowed in the comparison.
This function is used in conjunction with wp_get_attachment_image_sizes()
About the scrset attribute
srcset — contains a set of URLs for images (comma-separated) so that the browser can choose the most suitable option depending on the screen parameters of the device from which the page is viewed.
In srcset
, one or more URLs can be specified.
In srcset
, it is implied to specify different sizes of the same image. Different images can also be specified, but the logic of its operation implies the same image.
Each line in the list must contain a URL and a descriptor. If no descriptor is specified, the default is taken - 1x
.
The descriptor can be of two types:
Physical width of the image
in pixels (actual width). For example,600w
,1000w
.Device pixel density
(display density) - DPR (device pixel ratio), for example,2x
,3x
.
No Hooks.
Returns
String|false
. The value of the 'srcset' attribute or false.
Usage
wp_get_attachment_image_srcset( $attachment_id, $size, $image_meta );
- $attachment_id(number) (required)
- ID of the attachment image for which values need to be obtained.
- $size(array/string)
The size of the image for which the value of the srcset attribute will be built.
Can take any registered size or an array: array(100,150), where 100 is the width and 150 is the height in pixels.
The value is passed to the function wp_get_attachment_image_src() for further description, see there.
Default: 'medium'
- $image_meta(array)
Image metadata, in the format returned by the function: wp_get_attachment_metadata().
Or metadata of the attachment can be obtained like this:
get_post_meta( $attachment_id, '_wp_attachment_metadata', true );
Default: null
Examples
#1 Get the srcset
value for the full
size image
echo wp_get_attachment_image_srcset( 6587, 'full' ); // output: // http://example.com/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, http://example.com/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w
#2 Add the srcset
attribute to the image
$attachment_id = 6587; printf( '<img src="%s" srcset="%s">', wp_get_attachment_image_url( $attachment_id ), wp_get_attachment_image_srcset( $attachment_id, 'full' ) ); /* output: <img src="/wp-content/uploads/2015/12/WP-Recall-0-80x80.jpg" srcset="http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w" > */
#3 Adding the necessary attributes to the IMG
<img src="<?php echo wp_get_attachment_image_url( $attachment_id, 'large' ) ?>" srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ) ?>" sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'large' ) ?>" >
#4 Using $size as an array of width and height dimensions:
<?php // Specifying width of 400 (px) and height of 200 (px). $srcset = wp_get_attachment_image_srcset( $attachment_id, [ 400, 200 ] ); ?> <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( $srcset ); ?>">
Notes
Changelog
Since 4.4.0 | Introduced. |
wp_get_attachment_image_srcset() wp get attachment image srcset code WP 6.8.1
function wp_get_attachment_image_srcset( $attachment_id, $size = 'medium', $image_meta = null ) { $image = wp_get_attachment_image_src( $attachment_id, $size ); if ( ! $image ) { return false; } if ( ! is_array( $image_meta ) ) { $image_meta = wp_get_attachment_metadata( $attachment_id ); } $image_src = $image[0]; $size_array = array( absint( $image[1] ), absint( $image[2] ), ); return wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id ); }