web-dev-qa-db-ja.com

グーテンベルクの画像、カバー、ギャラリーの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-behaviourを変更する他の方法または方法はありますか？私はずっと行きたくないし、このためのカスタムブロックを作成したくありません。

theme-developmentfiltersrest-apiimagesblock-editor
6
Playnary

以下の提案を試してください：

これは、画像を保持する<figure>要素に、wp_calculate_image_sizesフックのパラメーターとして何らかの形で表面化された適用されたアラインメントクラスに一致するdata-display-alignment属性があることを前提としています。

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

1
Ciprian