wp_img_tag_add_auto_sizes()
云策文档标注
概述
wp_img_tag_add_auto_sizes() 是一个 WordPress 函数,用于在图片懒加载且未包含 'auto' 时,向 sizes 属性添加 'auto' 值。它通过 WP_HTML_Tag_Processor 处理图片标签,并受过滤器控制。
关键要点
- 函数作用:为懒加载的图片添加 'auto' 到 sizes 属性,前提是图片有 width 属性且 sizes 属性存在。
- 参数:接受一个字符串参数 $image,表示图片标签的标记。
- 返回值:返回过滤后的图片标签标记字符串。
- 过滤器:通过 apply_filters('wp_img_tag_add_auto_sizes', true) 控制是否启用此功能。
- 依赖函数:使用 wp_sizes_attribute_includes_valid_auto() 检查 sizes 属性是否已包含 'auto'。
- 使用场景:主要用于 wp_filter_content_tags() 函数中,处理文章内容中的图片标签。
代码示例
function wp_img_tag_add_auto_sizes( string $image ): string {
if ( ! apply_filters( 'wp_img_tag_add_auto_sizes', true ) ) {
return $image;
}
$processor = new WP_HTML_Tag_Processor( $image );
if ( ! $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
return $image;
}
$loading = $processor->get_attribute( 'loading' );
if ( ! is_string( $loading ) || 'lazy' !== strtolower( trim( $loading, " tfrn" ) ) ) {
return $image;
}
$width = $processor->get_attribute( 'width' );
if ( ! is_string( $width ) || '' === $width ) {
return $image;
}
$sizes = $processor->get_attribute( 'sizes' );
if ( ! is_string( $sizes ) ) {
return $image;
}
if ( wp_sizes_attribute_includes_valid_auto( $sizes ) ) {
return $image;
}
$processor->set_attribute( 'sizes', "auto, $sizes" );
return $processor->get_updated_html();
}注意事项
- 函数仅在图片懒加载(loading='lazy')且有 width 属性时生效。
- 如果 sizes 属性已包含有效的 'auto' 关键字,则不会重复添加。
- 此功能从 WordPress 6.7.0 版本引入。
原文内容
Adds ‘auto’ to the sizes attribute to the image, if the image is lazy loaded and does not already include it.
Parameters
$imagestringrequired-
The image tag markup being filtered.
Source
function wp_img_tag_add_auto_sizes( string $image ): string {
/**
* Filters whether auto-sizes for lazy loaded images is enabled.
*
* @since 6.7.1
*
* @param boolean $enabled Whether auto-sizes for lazy loaded images is enabled.
*/
if ( ! apply_filters( 'wp_img_tag_add_auto_sizes', true ) ) {
return $image;
}
$processor = new WP_HTML_Tag_Processor( $image );
// Bail if there is no IMG tag.
if ( ! $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
return $image;
}
// Bail early if the image is not lazy-loaded.
$loading = $processor->get_attribute( 'loading' );
if ( ! is_string( $loading ) || 'lazy' !== strtolower( trim( $loading, " tfrn" ) ) ) {
return $image;
}
/*
* Bail early if the image doesn't have a width attribute.
* Per WordPress Core itself, lazy-loaded images should always have a width attribute.
* However, it is possible that lazy-loading could be added by a plugin, where we don't have that guarantee.
* As such, it still makes sense to ensure presence of a width attribute here in order to use `sizes=auto`.
*/
$width = $processor->get_attribute( 'width' );
if ( ! is_string( $width ) || '' === $width ) {
return $image;
}
$sizes = $processor->get_attribute( 'sizes' );
// Bail early if the image is not responsive.
if ( ! is_string( $sizes ) ) {
return $image;
}
// Don't add 'auto' to the sizes attribute if it already exists.
if ( wp_sizes_attribute_includes_valid_auto( $sizes ) ) {
return $image;
}
$processor->set_attribute( 'sizes', "auto, $sizes" );
return $processor->get_updated_html();
}
Hooks
- apply_filters( ‘wp_img_tag_add_auto_sizes’, boolean $enabled )
-
Filters whether auto-sizes for lazy loaded images is enabled.
Changelog
| Version | Description |
|---|---|
| 6.7.0 | Introduced. |