Редактирование атрибутов srcset и размеров в блоках изображений, обложек и галерей Гутенберга

Question

Редактирование атрибутов srcset и размеров в блоках изображений, обложек и галерей Гутенберга

Я ищу способ адресации адаптивных атрибутов srcset и размеров в блоках изображений Гутенберга, таких как изображение, обложка и галерея.

Обычно это делается с помощью фильтра "wp_get_attachment_image_attributes", например:

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 );

Но блоки Гутенберга на это не реагируют. Есть ли какой-либо другой способ или метод использования этого фильтра для изменения их поведения srcset? Я не хочу идти до конца и создавать для этого собственный блок.

6

theme-development block-editor filters rest-api images

Author: Playnary, 2018-11-28

Source

1 answers

score 1 · Accepted Answer

Попробуйте следующее предложение:

Это предполагает, что элемент <figure>, содержащий изображение, имеет атрибут выравнивания отображения данных, соответствующий приложенному классу выравнивания, который каким-то образом отображается в качестве параметра в крючке wp_calculate_image_sizes:

/**
 * 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 );

Источник: https://github.com/WordPress/gutenberg/issues/6131

Вот еще один вариант:

/**
 * 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);

Источник: https://www.malthemilthers.com/responsive-images-and-how-to-implement-them-in-wordpress/