6

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
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.com/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.com/responsive-images-and-how-to-implement-them-in-wordpress/

  • There's more details in the last article on how to implement it. – Ciprian Jun 18 at 14:54
  • This looks like the solution. Will test it in a few days and mark this as the solution if successful. Thanks a lot! – Playnary Jun 19 at 19:43
  • You're welcome! – Ciprian Jun 20 at 9:46

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.