Skip to content

Instantly share code, notes, and snippets.

@fgeierst
Last active December 27, 2020 14:19
Show Gist options
  • Save fgeierst/70df98736c3181005f550f79d2d6e84f to your computer and use it in GitHub Desktop.
Save fgeierst/70df98736c3181005f550f79d2d6e84f to your computer and use it in GitHub Desktop.
<img> srcset sizes calculation in different wordpress themes
/* https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/ */
function adjust_image_sizes_attr( $sizes, $size ) {
$sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );
/**
* Add custom sizes attribute to responsive image functionality for post thumbnails.
*
* @origin Twenty Nineteen 1.0
*
* @param array $attr Attributes for the image markup.
* @return string Value for use in post thumbnail 'sizes' attribute.
*/
function twentynineteen_post_thumbnail_sizes_attr( $attr ) {
if ( is_admin() ) {
return $attr;
}
if ( ! is_singular() ) {
$attr['sizes'] = '(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentynineteen_post_thumbnail_sizes_attr', 10, 1 );
@fgeierst
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment