web-dev-qa-db-fra.com

Modifier les attributs wp_get_attachment_image

J'utilise ACF pour générer des images dans un carrousel d'images appelé Flickity . Flickity supporte le jeu d'images avec un chargement différé.

Voici mon balisage ACF de base qui utilise wp_get_attachment_image :

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

Ceci sort bien sur le front-end, comme ceci:

<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"
>

Docs Flickity spécifiez que vous devez utiliser data-flickity-lazyload-srcset et data-flickity-lazyload-src. Cela signifie modifier la sortie sur wp_get_attachment_image .

J'ai réalisé cela via functions.php, comme suit ( 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' );

Cela a parfaitement fonctionné sur le front-end, comme ceci:

<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"
>

Malheureusement, cela casse les images sur d'autres champs personnalisés ou natifs à l'aide de wp_get_attachment_image .

Est-il possible d'attribuer la fonction gs_change_attachment_image_markup à un champ personnalisé spécifique pour qu'il ne soit pas appliqué à l'échelle du site?

custom-fieldwp-get-attachment-image
1
Sam

Vous ne pourrez pas vraiment savoir dans quel contexte l'image est utilisée dans le filtre wp_get_attachment_image_attributes, mais vous pouvez transmettre des attributs personnalisés à wp_get_attachment_image() dans le modèle directement avec le 4ème argument. Ensuite, vous pouvez utiliser wp_get_attachment_image_url() et wp_get_attachment_image_srcset() pour obtenir les valeurs de ces attributs:

$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