编辑古腾堡图像、封面和画廊块中的源集和大小属性

时间：2018-11-28 作者：Playnary

我正在寻找一种方法来处理古腾堡图像块上的响应srcset和size属性，如image、cover和gallery。

通常，可以使用“wp\\u get\\u attachment\\u image\\u 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行为？我不想一直为此创建自定义块。

1 个回复
最合适的回答,由SO网友:Ciprian 整理而成

Try the suggestion below:

这假设<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

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);
资料来源：https://www.malthemilthers.com/responsive-images-and-how-to-implement-them-in-wordpress/

结束
标签： theme-development   filters   rest-api   images   block-editor   小码农  

相关推荐

使用Apply_Filters()的要点

当我试图开发一个插件时，我试图看到其他插件也能完成我的插件将要实现的功能，然后我看到开发人员在大多数功能中使用该功能apply_filters() 我不明白为什么。下面是一个示例：public static function myFunction() { return apply_filters( \'du/class/method\' array( \'index\' => \'value\', \'index\' =&g