README

一个通过CDN提供动态图片大小的插件

要求

一个调整大小服务，此插件目前支持

• 启用图片调整大小的Cloudflare CDN区域。
• 已配置拉取区域的KeyCDN
• 启用图片优化器的Fastly

注意，您需要自己管理loading属性。只有具有loading="lazy"属性的标签将被重写以使用lozad.js。您应确保LCP块具有loading="eager"或根本不带loading属性。

需要IMAGERESIZER_ZONE环境变量。

环境变量

IMAGERESIZER_ZONE='https://myapp.com/cdn-cgi/image/'
IMAGERESIZER_DISABLED=false

功能

• 使用lozad.js来延迟加载图片、iframe和视频
• 通过data-sizes="auto"支持sizes="auto"
• 预加载第一个块图片
• 重写图片URL以使用Cloudflare CDN
• 将所有WP srcset替换为我们的Cloudflare Image Resizing URL

API

有关转换选项，请参阅Cloudflare文档、KeyCDN文档或Fastly文档。

传递自定义选项

您可以通过设置data-resizer-args（支持wp_parse_args类型的字符串）来在使用wp_get_attachment_image时传递自定义选项给调整大小器。

wp_get_attachment_image($profileImage, 'full', false, [
  'data-resizer-args' => 'crop=1:1&quality=50',
  'sizes' => '(min-width: 40em) 48px, (min-width: 68.75em) 56px, (min-width: 87.5em) 64px, 40px'
])

从URL生成src和srcset

use GeneroWP\ImageResizer\Image;

$image = new Image($url, [
    'blur' => 50,
]);

return sprintf(
    '<img loading="eager" class="wp-block-cover__image-background" src="%s" srcset="%s" sizes="%s">',
    $image->src(),
    $image->srcset(),
    '100vw'
);

从附件生成src和srcset

use GeneroWP\ImageResizer\Image;

$image = Image::fromAttachment($bannerImageId, 'full', [
    'fit' => 'cover',
    'height' => 350 * 2,
]);

return sprintf(
    '<img loading="eager" class="wp-block-cover__image-background" src="%s" srcset="%s" sizes="%s">',
    $image->src(),
    $image->srcset(),
    '100vw'
);

向head添加预加载链接标签

use GeneroWP\ImageResizer\Rewriters\Preload;

add_action('wp_head', function () {
    if (is_singular('recipe')) {
        $composer = new ContentRecipe();
        $featured = $composer->featuredImageHtml(get_post());
        echo Preload::buildLink($featured);
    }
}, 2);

过滤器

// Alter rewriters
add_filter('wp-image-resizer/rewriters', function (array $rewriters) {
    $rewriters[] = MyCustomRewriter::class;
    return $rewriters;
});

// Alter resizer URLs
add_filter('wp-image-resizer/image/url', function (string $url) {
    if (defined('WP_ENV') && WP_ENV === 'development') {
        $url = str_replace('development-domain.ddev.site', 'production-domain.com', $url);
    }
    return $url;
});

// Alter blocks that should be considered for preloading
add_filter('wp-image-resizer/preload/blocks', function (array $blockTypes) {
    $blockTypes[] = 'my-theme/hero-banner';
    return $blockTypes;
});

// Alter if preload should stop iterating blocks
add_filter('wp-image-resizer/preload/should_stop', function (bool $stop, array $block, array $blocks) {
    if ($block['blockType'] === 'my-theme/breadcrumb') {
        return false;
    }
    return $stop;
}, 10, 3);

// Alter srcset breakpoints
add_filter('wp-image-resizer/config/breakpoints', function (array $breakpoints) {
    return [
        ...range(50, 500, 50),
        ...range(600, 2000, 100),
    ];
});

// Alter default resizing settings
add_filter('wp-image-resizer/config/default', function (array $breakpoints) {
    return [
        'quality' => 90
    ];
});

开发

安装依赖项

composer install
npm install

运行测试

npm run test

构建资源

# Minified assets which are to be committed to git
npm run build:production

# Watch for changes and re-compile while developing the plugin
npm run start