From cc6c5e5168af658c26c3f08a4dc0ba04fc4c4f37 Mon Sep 17 00:00:00 2001 From: Morten Rand-Hendriksen Date: Fri, 16 Nov 2018 21:56:40 -0800 Subject: [PATCH] Addresses #50. Add custom sizes attribute to body images. Relies on Gutenberg #11973. --- inc/template-functions.php | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/inc/template-functions.php b/inc/template-functions.php index 8ee4f0d4..85896dd8 100644 --- a/inc/template-functions.php +++ b/inc/template-functions.php @@ -134,6 +134,36 @@ function twentynineteen_post_thumbnail_sizes_attr( $attr ) { } add_filter( 'wp_get_attachment_image_attributes', 'twentynineteen_post_thumbnail_sizes_attr', 10, 1 ); +/** + * Add custom sizes attribute to responsive image functionality for regular images. + * + * @origin Twenty Nineteen 1.0 + * + * @param array $image_attr Attributes for the image markup. + * @param array $block_attr Attributes for the containing block. + * @return string Value for use in post thumbnail 'sizes' attribute. + */ +function twentynineteen_calculate_image_sizes_attr( $image_attr, $block_attr ) { + + if ( is_admin() ) { + return $image_attr; + } + + $align = $block_attr[align]; + + if ( '' === $align ) { + $image_attr['sizes'] = '(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw'; + } elseif ( 'wide' === $align ) { + $image_attr['sizes'] = '(max-width: 34.9rem) calc(100vw - 2rem), (min-width: 35rem) 80vw, 100vw'; + } elseif ( 'full' === $align ) { + // Use default. + } + + return $image_attr; + +} +add_filter( 'render_block_core_image_tag_attributes', 'twentynineteen_calculate_image_sizes_attr', 10, 2 ); + /** * Returns the size for avatars used in the theme. */