Last active
December 27, 2020 14:19
-
-
Save fgeierst/70df98736c3181005f550f79d2d6e84f to your computer and use it in GitHub Desktop.
<img> srcset sizes calculation in different wordpress themes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 ); |
Author
fgeierst
commented
Dec 27, 2020
- https://via.studio/journal/optimizing-your-theme-for-wordpress-4-4s-responsive-images
- https://pineco.de/controlling-responsive-image-sizes-in-wordpress/
- Apply a filter to the wp_calculate_image_sizes to enable sizes attribute for srcsets (for largo theme) WPBuddy/largo#1577
- "WP adds proper srcset attribute, but the sizes attribute is pretty useless" WordPress/gutenberg#6177
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment