I am looking for a way to adress the responsive srcset and sizes attributes on Gutenberg image blocks - like image, cover and gallery.

Usually one would do this with the 'wp_get_attachment_image_attributes' filter, like:

function new_img_sizes( $attr, $attachment, $size ) {
    if ( is_array( $size ) ) {
        $attr['sizes'] = $size[0] . 'px';
    } elseif ( $size == 'large') {
        $attr['sizes'] = '99999px';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'new_img_sizes', 25, 3 );

But Gutenberg blocks don't react to that. Is there any other way or a method to utilize this filter to change their srcset-behaviour? I don't want to go all the way and create a custom block for this.

I am looking for a way to adress the responsive srcset and sizes attributes on Gutenberg image blocks - like image, cover and gallery.

Usually one would do this with the 'wp_get_attachment_image_attributes' filter, like:

function new_img_sizes( $attr, $attachment, $size ) {
    if ( is_array( $size ) ) {
        $attr['sizes'] = $size[0] . 'px';
    } elseif ( $size == 'large') {
        $attr['sizes'] = '99999px';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'new_img_sizes', 25, 3 );

But Gutenberg blocks don't react to that. Is there any other way or a method to utilize this filter to change their srcset-behaviour? I don't want to go all the way and create a custom block for this.

• theme-development
• filters
• rest-api
• images
• block-editor

Share Improve this question asked Nov 28, 2018 at 13:12 PlaynaryPlaynary 32533 silver badges1212 bronze badges 1

• 1 For what its worth, my temporary fix uses Javascript to amend the attribute in a ugly way: // srcset Sizes Gutenberg Gallery Fix var hasGalleries = document.getElementsByClassName('wp-block-gallery'); if (hasGalleries.length > 0) { jQuery('.wp-block-gallery').each(function() { var images = jQuery('.blocks-gallery-item img', this); jQuery.each(images, function(n, image) { console.log(image); image.sizes = '(max-width: 767px) 600px, (max-width: 1000px) 1024px, 1400px'; }); }); } – Playnary Commented Nov 28, 2018 at 13:13

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Try the suggestion below:

This assumes the <figure> element holding an image has a data-display-alignment attribute to match the alignment class applied attached that is somehow surfaced as a parameter in the wp_calculate_image_sizes hook:

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images.
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                                      values in pixels (in that order).
 * @param string $data-display-alignment The alignment of the image.
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function my_content_image_sizes_attr( $sizes, $size, $alignment ) {
    $width = $size[0];

    // If image is as wide as main content, nothing special is needed.
    if ( 720 <= $width ) {
        $sizes = '100vw';
    } else {

        // Images displayed inside the regular content area.
        $sizes = '(min-width: 720px) 720px, 100vw';

        // Wide images: 720+50% of the available extra space.
        if ( 'wide' === $alignment ) ) {
            $sizes = '(min-width: 720) calc(50% + 720px), 100vw';
        }

        // Full images: 100% of the available extra space.
        if ( 'wide' === $alignment ) ) {
            $sizes = '100vw';
        }

        // If there's a sidebar kicking in at 720px and taking up 25% of the available width.
        if ( is_active_sidebar( 'sidebar-1' ) ) {

            // Images displayed inside the regular content area.
            $sizes = '(min-width: 720px) 720px, 100vw';

            // Wide images
            if ( 'wide' === $alignment ) ) {
                $sizes = '(min-width: 960px) calc(50% + 720px), (min-width: 720px) 75vw, 100vw';
            }

            // Full images
            if ( 'wide' === $alignment ) ) {
                $sizes = '(min-width: 720px) 75vw, 100vw';
            }
        }
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'my_content_image_sizes_attr', 10, 3 );

Source: https://github/WordPress/gutenberg/issues/6131

Here's another option:

/**
 * Configure the "sizes" attribute of images.
 */
function THEMENAME_content_image_sizes_attr($sizes, $size) {
    $width = $size[0];
    if ($width > 640) {
        return '(min-width: 840px) 640px, (min-width: 720px) calc(100vw - 200px), 100vw';
    } else {
        return $sizes;
    }
}
add_filter('wp_calculate_image_sizes', 'THEMENAME_content_image_sizes_attr', 10 , 2);

Source: https://www.malthemilthers/responsive-images-and-how-to-implement-them-in-wordpress/