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.

  • 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 Nov 28 '18 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.