web-dev-qa-db-ja.com

特定のカスタムフィールドのwp_get_attachment_image属性（srcとsrcset）を変更します。

私は Flickity と呼ばれる画像カルーセルで画像を出力するために _ acf _ を使用しています。 Flickity は遅延ロードを伴う画像srcsetをサポートします。

これが wp_get_attachment_image を使う私の基本的なACFマークアップです。

<?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 Docsdata-flickity-lazyload-srcsetとdata-flickity-lazyload-srcを使うように指定します。これは wp_get_attachment_image の出力を変更することを意味します。

私は（ source ）のようにfunctions.phpを通してこれを達成しました：

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関数を割り当ててサイト全体に適用されないようにすることは可能ですか？

custom-fieldwp-get-attachment-image
1
Sam

wp_get_attachment_image_attributesフィルタでどのコンテキストで画像が使用されているのかを実際に知ることはできませんが、4番目の引数を使ってテンプレートのwp_get_attachment_image()にカスタム属性を直接渡すことができます。その後、wp_get_attachment_image_url()とwp_get_attachment_image_srcset()を使ってこれらの属性の値を取得できます。

$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 ),
) );
1
Jacob Peattie