Champ de la galerie ACF : Guide d’utilisation et d’affichage

Le champ Galerie ACF est un type de champ du plugin Advanced Custom Fields (ACF). Le champ ACF Gallery vous permet de sélectionner plusieurs images pour un seul champ à partir de la médiathèque de WordPress (contrairement au champ ACF Image, qui ne prend en charge qu'une seule image). Les développeurs l'utilisent couramment pour toutes sortes de galeries, ou lorsqu'ils doivent afficher un ensemble personnalisé d'images sur une page.

L'extension des fichiers constitue une limitation importante. Vous ne pouvez télécharger que des fichiers dont l'extension est autorisée. Pour les images, les extensions autorisées sont .jpg, .jpeg, .png, .gif, et .ico. Vous trouverez la liste des extensions autorisées pour tous les types de fichiers sur la page de wordpress.org. Si vous souhaitez autoriser le téléchargement par exemple .svg, vous devrez utiliser des crochets spéciaux.

Donc, si vous voulez connaître les noms des crochets pour ajouter une autre extension d'image que celle listée ci-dessus, nous fournissons un extrait de code, qui permet .svg de télécharger sur votre site web. Vous pouvez le modifier pour votre extension cible ou l'utiliser tel quel pour .svg. Le code peut être ajouté à votre functions.php.

<?php
         add_filter('upload_mimes', function ($mimes) {
            $mimes['svg'] = 'image/svg+xml';

            return $mimes;
        });

        add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {
            $filetype = wp_check_filetype($filename, $mimes);

            return [
                'ext' => $filetype['ext'],
                'type' => $filetype['type'],
                'proper_filename' => $data['proper_filename']
            ];
        }, 10, 4);

Le champ ACF Gallery a 3 formats de retour différents : Image Array, Image URL et Image ID. C'est exactement comme pour le champ Image, mais la réponse est toujours un tableau. Avec un tableau, les éléments ont un type lié au format de retour choisi. Cela n'affecte pas l'aspect du champ ni les options pour l'administrateur du site. En effet, le format de retour de la galerie contrôle les données que vous obtenez dans le code. Nous parlons ici de la requête du champ ACF Gallery dans la base de données de WordPress à l'aide de la fonction get_field.

Nous vous conseillons d'utiliser l'option "Image ID", car c'est l'option préférée qui offre les meilleures performances. Évitez d'utiliser l'option "Image URL", sauf si vous en avez besoin pour une raison spécifique. En effet, elle ne vous permet pas de recevoir des détails sur l'image, mais seulement l'URL, ce qui n'est pas suffisant dans la plupart des cas.

Le champ ACF Gallery se comporte exactement comme le champ ACF Image, avec une différence majeure, il stocke un tableau d'ID d'images dans le méta de la page ou de l'article, alors que le champ Image ne stocke qu'un seul ID d'image.

De cette manière, le champ ACF Gallery fonctionne comme un médiateur entre la médiathèque et vous-même. Il fournit une interface intuitive pour choisir plusieurs images dans votre bibliothèque multimédia. Mais à l'intérieur, il ne stocke pas réellement les images séparément. Il utilise une sorte de marque pour "attacher" ou "relier" les images (ou les pièces jointes si vous voulez) de la médiathèque à la page ou à l'article.

Maintenant, je vais vous montrer comment afficher un champ Galerie ACF à l'aide d'un shortcode.

Nous pouvons résoudre ce problème en utilisant les fameux shortcodes de WordPress. Ils se ressemblent, mais ils contiennent également des mots en anglais entre crochets : [some-name]. De plus, ils peuvent accepter des "arguments" et, en coulisses, WordPress associe chaque shortcode à une fonction PHP.

Aucun codage n'est nécessaire pour aujourd'hui, ce qui signifie que nous n'écrirons pas non plus de fonctions PHP. A la place, nous utiliserons un excellent plugin gratuit, appelé ACF Views. Il permet d'afficher un champ de galerie ACF à l'aide de shortcodes générés automatiquement.

Le plugin prend en charge tous les champs ACF et vous permet également d'afficher les articles par défaut et les articles personnalisés sur les pages. Mais nous allons nous concentrer sur le champ ACF Gallery pour l'instant. Lisez comment afficher les champs ACF sans codage pour connaître tous les avantages de l'approche par shortcode.

Nous avons joint ci-dessous un tutoriel vidéo qui montre comment afficher les champs ACF sur une seule page à l'aide d'un shortcode. La vidéo est commune à tous les types de champs ACF. Plus de tutoriels vidéo sur la chaîne YouTube officielle .

Mais n'hésitez pas à sauter la vidéo car nous fournissons ci-dessous un guide complet étape par étape exactement pour le champ de la Galerie ACF.

Pour suivre ce guide, vous devez installer le plugin ACF Views sur votre site WordPress, sans oublier de l'activer. Vous devez également installer et activer le plugin ACF (gratuit). Passez ensuite aux étapes suivantes.

Dès que vous avez activé le plugin ACF Views, un nouvel onglet est disponible dans votre menu d'administration, appelé "ACF Views", cliquez dessus.

Cliquez sur le bouton "Ajouter nouveau" pour créer une vue.

Note : Le terme "View" est le nom donné au type de message spécial fourni par le plugin. Chaque Vue a une liste de champs ACF qui lui est assignée, il est donc possible de créer plusieurs Vues qui affichent différents champs (ou un ensemble de champs) pour différents articles/pages.

Nommez votre Vue, il doit être court et descriptif car c'est aussi le nom qui sera affiché dans la liste des Vues, ce qui facilitera sa recherche. Nous avons appelé notre vue "Galerie de pages".

Lorsque vous attribuez de nouveaux champs dans votre Vue. Cliquez sur le bouton "Ajouter un champ" et sélectionnez votre "Groupe" dans la liste déroulante. Dans mon cas, le groupe s'appelle "Page fields". Sélectionnez maintenant le champ cible dans la liste déroulante, nous avons sélectionné "Page gallery".

Note : Le type de champ est indiqué entre parenthèses pour faciliter l'identification. Vous pouvez ainsi facilement connaître le type de chaque champ de la liste déroulante.

Dans ce cas, vous devriez voir "(galerie)". Continuez en sélectionnant une 'Taille d'image' dans le menu déroulant, nous avons choisi 'Pleine'.

Si vous utilisez la version Pro du plugin, les options Masonry et Lightbox sont également disponibles. Voir la capture d'écran ci-dessous.

Chaque vue supporte un nombre illimité de champs ACF, mais dans notre cas, nous n'en assignerons qu'un seul.

Cliquez sur le bouton "Publier" pour enregistrer et publier votre Vue. Lorsque votre vue est publiée, vous remarquerez que des codes courts ont été générés et sont disponibles dans un bloc sur le côté droit de votre vue écran d'édition. Chaque Vue a son propre shortcode avec un ID unique (la structure du shortcode est la même pour toutes les Vues, mais les arguments sont uniques).

[acf_views view-id="xxxx" name="x"]

Appuyez sur le bouton 'Copier dans le presse-papiers' pour le premier shortcode.

Nous y sommes presque, maintenant que tout est prêt, nous sommes prêts à afficher le champ Galerie ACF.

Visitez votre page cible qui a le champ Galerie ACF, (assurez-vous de joindre quelques images), puis collez le shortcode copié où vous le souhaitez dans le contenu de la page. Vous pouvez coller le shortcode en utilisant l'éditeur Gutenberg, cliquez sur le bouton plus et choisissez le bloc "Shortcode" dans la liste. Collez votre shortcode dans le bloc et cliquez sur le bouton "Mettre à jour" pour enregistrer votre article/page.

Ouvrez la page pour voir le résultat, dans le cas où tout a été fait correctement vous devriez voir toutes les images attachées du champ ACF Gallery affichées.

Si vous ne voyez pas votre galerie, vous devrez revenir en arrière et éditer la page. Confirmez que vous avez attaché des images au champ Galerie ACF, puis rechargez la page. Si, pour une raison quelconque, vous ne voyez toujours rien, retournez à l'édition de votre vue et confirmez que vous avez sélectionné le bon champ "Groupe" dans la liste.

Pour afficher le champ Galerie, nous devons transformer les images sélectionnées dans le champ en balises img.

Le code sera différent selon le type de retour sélectionné. Nous avons fourni ci-dessous des exemples qui vous aideront à créer la sortie. Mais gardez à l'esprit que pour la transformer en galerie interactive, vous devrez écrire votre propre code CSS/JavaScript.

1. Code PHP pour afficher le champ Galerie avec le format de retour "ID" :

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageId) {
        echo wp_get_attachment_image($imageId, $size);
    }
}

2) Code PHP pour afficher le champ "Galerie" avec le "Tableau" Format de retour :

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';
if ($images) {
    foreach ($images as $imageData) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s' alt='%s'>",
            esc_url($imageData['sizes'][$size]), esc_attr($imageData['alt']));
    }
}

3. Code PHP pour afficher le champ "Galerie" avec l' "URL" Format de retour :

<?php

// don't forget to replace 'gallery' with your field name
$images = get_field('gallery');
if ($images) {
    foreach ($images as $imageURL) {
        // displays the image. Each %s in the string will be replaced with the related argument
        printf("<img src='%s'>",
            esc_url($imageURL));
    }
}

Avec le format de retour "URL", nous ne pouvons pas contrôler la taille de l'image et nous ne pouvons pas obtenir d'autres informations que l'URL. Il est préférable d'éviter cette option et de choisir le format de retour "ID".

Pour plus de détails, vous pouvez regarder la vidéo ci-dessous et lire l'article officiel d'ACF.

Nous vous avons montré comment utiliser le champ Galerie ACF, ses options et deux façons de l'afficher. Vous pouvez maintenant utiliser ce champ n'importe où.

N'oubliez pas qu'une vue dans le plugin ACF Views supporte tous les types de champs et que vous pouvez styliser la sortie en ajoutant des règles CSS dans la vue (voir le champ de code CSS dans l'onglet "Avancé"). Ce qui est génial, c'est que le CSS n'est chargé que sur les pages où vous utilisez le shortcode.

Dans le même onglet, vous pouvez ajouter du code JS, ce qui est également très utile dans le cas des galeries. Avec la version Basic, vous devrez utiliser votre propre CSS (et probablement du JavaScript) pour transformer l'apparence par défaut en une galerie interactive. Avec la version Pro, les options Masonry et Lightbox seront disponibles dès le départ, c'est-à-dire sans aucun codage.

Nous espérons que cet article vous a été utile. Pour plus d'informations sur le plugin ACF Views, visitez le site officiel .