函数文档

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.

Return

string The filtered image tag markup.

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.