Skip to content

Instantly share code, notes, and snippets.

@piperhaywood
Last active November 28, 2021 23:24
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save piperhaywood/96ac07ea5f4999512275 to your computer and use it in GitHub Desktop.
Save piperhaywood/96ac07ea5f4999512275 to your computer and use it in GitHub Desktop.
WordPress function to create HTML5 image element with 'srcset' and 'sizes' attributes for JPEGs and PNGs. Paste in to functions.php for use elsewhere in theme.
/**
* WordPress function to create HTML5 image element with 'srcset' and 'sizes' attributes for JPEGs and PNGs.
* Paste in to functions.php for use elsewhere in theme. Images in 'srcset' are created from all WordPress registered image sizes.
* Mime types 'image/jpg', 'image/png', and 'image/gif' are returned appropriately.
*
* @author Piper Haywood <piper@approach.co.uk>
* @link http://piperhaywood.com
* @link https://gist.github.com/piperhaywood/96ac07ea5f4999512275
*
* @example https://gist.github.com/piperhaywood/686cc0c788bd9fc3fa6e
*
* @param int|string $image_id (required) ID of the desired attachment. Default: none
* @param string $img_src (optional) Name of the registered image size (i.e. thumbnail, medium, large, full) to be used in the image 'src' attribute. Default: full
* @param string $img_sizes (optional) String indicating media queries for use in image 'sizes' attribute. Default: 100vw
* @param string $class (optional) String of classnames for the image 'class' attribute. Default: empty string
*
* @return string $img Returns formatted image element string with 'src', 'alt' and 'class'. Returns 'srcset' and 'sizes' attributes for relevant image filetypes (JPEGs and PNGs at time of development). Returns an empty string if no 'src' is defined.
*
*/
function apprch_wp_srcset( $image_id, $src_size = 'full', $img_sizes = '100vw', $class = '' ) {
$alt = '';
$mime = '';
$image_src = array();
$src = '';
$wp_sizes = array();
$wp_size = '';
$srcset_arr = array();
$srcset = '';
$image = '';
if( $image_id ) {
$alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
$alt = !empty($alt) ? $alt : '';
$mime = get_post_mime_type( $image_id );
if( $mime === 'image/gif' ) { // GIFs require full image size for 'src' and no 'srcset'
$image_src = wp_get_attachment_image_src( $image_id, 'full' );
$src = $image_src[0];
} elseif( $mime === 'image/jpeg' || $mime === 'image/png' ) { // JPGs and PNGs allowed 'srcset'
$image_src = wp_get_attachment_image_src( $image_id, $src_size );
$src = $image_src[0];
$wp_sizes = get_intermediate_image_sizes();
foreach( $wp_sizes as $wp_size ) {
$size_src = wp_get_attachment_image_src($image_id, $wp_size);
if ( !empty( $size_src ) ) {
$width = $size_src[1];
$url = $size_src[0];
$srcset_arr[$width] = $url;
}
}
if( !empty( $srcset_arr ) ) {
ksort( $srcset_arr );
foreach( $srcset_arr as $width => $size ) {
$srcset .= $size . ' ' . $width . 'w, ';
}
}
$srcset = !empty( $srcset ) ? ' srcset="' . trim( $srcset, ', ' ) . '"' . ' sizes="' . $img_sizes . '"' : '';
}
$image = !empty( $src ) ? '<img class="' . $class . '" alt="' . $alt . '"' . $srcset . ' src="' . $src . '">' : '';
}
return $image;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment