我正在使用ACF 要在名为Flickity. Flickity 支持延迟加载的图像srcset。

下面是我的基本ACF标记，它使用wp_get_attachment_image:

<?php
  $image = get_field(\'image\');
  $size = \'gallery\';
  echo wp_get_attachment_image( $image, $size );
?>

这很好地在前端输出，如下所示：

<img
  width="1164"
  height="450"
  src="image-1164x450.jpg"
  srcset="
          image.jpg 1164w,
          image-300x116.jpg 300w,
          image-768x297.jpg 768w,
          image-1024x396.jpg 1024w,
          image-2328x900.jpg 2328w,
          image-1680x649.jpg 1680w,
          image.jpg 3492w
        "
  sizes="(max-width: 1164px) 100vw, 1164px"
>

Flickity Docs 指定应使用的data-flickity-lazyload-srcset 和data-flickity-lazyload-src. 这意味着在wp_get_attachment_image.

我通过函数实现了这一点。php，就像这样(source):

function gs_change_attachment_image_markup($attributes){

    if (isset($attributes[\'src\'])) {
        $attributes[\'data-flickity-lazyload-src\'] = $attributes[\'src\'];
        $attributes[\'src\']      = \'\';
    }

    if (isset($attributes[\'srcset\'])) {
        $attributes[\'data-flickity-lazyload-srcset\'] = $attributes[\'srcset\'];
        $attributes[\'srcset\'] = \'\';
    }

    return $attributes;
}

add_filter( \'wp_get_attachment_image_attributes\', \'gs_change_attachment_image_markup\' );

这在前端非常有效，如下所示：

<img
  width="1164"
  height="450"
  srcset=""
  data-flickity-lazyload-src="image-1164x450.jpg"
  data-flickity-lazyload-srcset="
          image.jpg 1164w,
          image-300x116.jpg 300w,
          image-768x297.jpg 768w,
          image-1024x396.jpg 1024w,
          image-2328x900.jpg 2328w,
          image-1680x649.jpg 1680w,
          image.jpg 3492w
        "
  sizes="(max-width: 1164px) 100vw, 1164px"
>

不幸的是，这会使用wp_get_attachment_image.

是否可以分配gs_change_attachment_image_markup 功能到特定的自定义字段，以便不在站点范围内应用？

$image = get_field(\'image\');
$size = \'gallery\';

echo wp_get_attachment_image( $image, $size, false, array(
    \'src\' => \'\',
    \'srcset\' => \'\',
    \'data-flickity-lazyload-src\' => wp_get_attachment_image_url( $image, $size ),
    \'data-flickity-lazyload-srcset\' => wp_get_attachment_image_srcset( $image, $size ),
) );