Champ d’image ACF : Guide d’utilisation et d’affichage

Le champ Image est l'un des nombreux types de champs possibles dans le plugin Advanced Custom Fields (ACF). Le champ Image vous permet de sélectionner n'importe quelle image dans la médiathèque de WordPress ou d'en télécharger une nouvelle.

Bien que les articles et les pages de WordPress disposent d'un champ "Featured Image" intégré, ce champ n'autorise qu'une seule image pour l'ensemble de l'article ou de la page, ce qui est restrictif. En utilisant les champs d'image ACF, vous pouvez "attacher" plusieurs images à votre article/page ou même à la page d'options.

Mais gardez à l'esprit qu'un champ "Image" ne permet de sélectionner qu'une seule image. Pour ajouter une nouvelle image à votre page, vous devez donc créer un nouveau champ. Si vous souhaitez sélectionner et stocker plusieurs images dans un seul champ, utilisez le champ ACF Gallery, qui est conçu à cet effet.

Une autre limitation importante est l'extension du fichier. 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.

Il n'est pas possible de télécharger des fichiers autres que des images dans le champ Image du formulaire ACF. Par exemple, vous ne pouvez pas télécharger .doc, ou .pdf même avec les crochets. Pour ce faire, vous devez utiliser le champ Fichier ACF, qui est conçu à cet effet.

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 type de champ Image a trois formats de retour différents : Image Array, Image URL et Image ID. Cela n'a pas d'incidence sur l'aspect du champ ou sur les options proposées aux administrateurs du site. Cependant, le format de retour de l'image contrôle les données que vous recevez dans le code lorsque vous demandez cette image à la base de données de WordPress en utilisant la fonction get_field.

Je vous suggère de choisir l'option 'Image ID', car c'est la meilleure option pour les performances. Ne choisissez pas l'option 'Image URL' (sauf si vous en avez besoin pour une raison spécifique) car elle ne vous permettra pas d'obtenir des détails sur l'image, seulement l'url, ce qui n'est vraiment pas suffisant.

Voici un aperçu des coulisses. Lorsque vous choisissez une image, l'ID de l'image sélectionnée est sauvegardé dans le Post Meta de la page (ou de l'élément Post/CPT) en cours. Vous pouvez donc sélectionner la même image sur plusieurs pages différentes sans que cela ne crée de doublons.

Lorsque vous ajoutez une nouvelle image à l'aide d'un champ image, ACF télécharge physiquement cette image dans votre installation WordPress (dans le dossier wp-content/uploads). Il crée ensuite une nouvelle pièce jointe (avec cette image) et enregistre l'ID de la pièce jointe dans les méta de l'article ou de la page en cours.

L'identifiant d'une image est enregistré dans la base de données indépendamment de l'option "Format de retour". L'option "Format de retour" ne contrôle donc que les données que vous recevez dans le code. Mais dans tous les cas, seul l'identifiant d'une image (pièce jointe) sera enregistré dans la base de données. C'est pourquoi j'ai recommandé d'utiliser le format de retour 'ID', car il correspond au format de la base de données et ne nécessite pas de travail supplémentaire de la part du plugin ACF pour le récupérer.

Ainsi, chaque nouveau téléchargement crée une nouvelle pièce jointe dans votre bibliothèque multimédia. WordPress ne peut pas comparer la nouvelle image à celles déjà téléchargées, ce qui signifie qu'il créera une nouvelle pièce jointe même si vous téléchargez à nouveau la même image. C'est pourquoi il est si important de donner des noms clairs aux images et d'effectuer une recherche dans la médiathèque avant de télécharger une nouvelle image. Sinon, vous aurez un grand nombre de doublons de la même image, ce qui augmentera l'espace disponible sur votre compte d'hébergement, sans parler des maux de tête qui en résulteront.

L'attribution d'une image à partir d'un champ d'image ne supprime pas l'image de votre installation WordPress. Le fichier image restera dans votre bibliothèque multimédia, même si vous l'avez supprimé de toutes les pages/postes où se trouve le champ image. En fait, il n'y a que quelques raisons pour lesquelles vous devez supprimer complètement une image de votre bibliothèque WordPress. Mais elles sortent du cadre de l'article d'aujourd'hui.

Les shortcodes sont une fonctionnalité puissante de WordPress. Il s'agit en fait de phrases clés que WordPress associe à une fonction PHP. Ils ressemblent à ceci avec les mots entre crochets : [some-name] et peuvent accepter des arguments par exemple [some-name first-argument="first-value"].

Mais nous n'allons pas écrire de code PHP. Nous allons utiliser un excellent plugin gratuit appelé ACF Views pour afficher des champs d'images sans codage en utilisant des shortcodes générés.

Le plugin ACF Views vous permet d'afficher les articles et leurs champs ACF à l'aide de shortcodes. Comme vous pouvez l'imaginer, le plugin a un large éventail de possibilités et supporte également tous les types de champs ACF. Mais nous allons nous concentrer sur l'affichage des images pour aujourd'hui. Lisez comment afficher les champs ACF sans codage pour connaître tous les avantages de l'approche par shortcodes.

Nous avons joint ci-dessous un tutoriel vidéo qui montre comment afficher les champs ACF sur une seule page en utilisant la méthode des shortcodes. 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 vous trouverez ci-dessous un guide complet, étape par étape, pour le champ d'image de l'ACF.

Pour suivre, installez le plugin ACF Views sur votre site WordPress et n'oubliez pas de l'activer. Vous devez également installer et activer le plugin ACF (gratuit). Passez ensuite aux étapes suivantes.

Lorsque vous avez activé le plugin ACF Views, vous verrez un nouvel élément dans votre menu d'administration, appelé "ACF Views".

Dans le sous-menu, il y a plusieurs éléments, mais nous n'aurons besoin que de celui appelé "ACF Views".

Dans l'onglet Vues ACF, 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 est une liste de champs ACF à afficher, vous pouvez donc avoir plusieurs Vues différentes pour afficher différents champs (ou ensembles de champs) pour différents articles/pages.

Donnez un nom à votre Vue. Il peut s'agir de tout ce qui décrit la vue , c'est le nom qui sera affiché dans la liste des vues , ce qui permettra de la trouver plus facilement. J'ai appelé ma vue "Image de côté de page".

Vous devez maintenant attribuer un nouveau champ à votre vue . Cliquez sur le bouton "Ajouter un champ" et sélectionnez votre "Groupe" dans la liste déroulante. Dans notre cas, le groupe s'appelle "Champs de page". Sélectionnez ensuite le champ cible dans la liste. Dans notre cas, le champ s'appelle "Side image". (Remarque : le type de champ est indiqué entre parenthèses pour faciliter l'identification). Dans ce cas, vous devriez voir que le type est une "image", continuez à choisir une "Taille d'image" dans la liste des tailles disponibles, dans notre cas nous avons choisi "Pleine".

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

Cliquez sur le bouton "Publier" pour enregistrer et publier votre Vue. Une fois la vue publiée, vous remarquerez que des codes courts ont été générés dans un bloc situé à droite de l'écran d'édition de la vue. Chaque Vue a son propre shortcode avec un ID unique. La structure du shortcode est donc la même pour toutes les vues , mais les arguments sont uniques.

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

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

Ok, maintenant tout devrait être prêt pour afficher le champ image. Visitez la page cible avec le champ image. Assurez-vous que le champ a une image attachée, puis collez le shortcode où vous le souhaitez dans le contenu de la page. Pour coller le shortcode avec 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.

Visitez la page pour voir le résultat, et si vous avez tout fait correctement, vous devriez voir votre image ACF affichée dans le contenu.

Si vous ne voyez pas votre image, revenez en arrière et modifiez la page. Assurez-vous que vous avez attaché une image au champ d'image ACF, car si le champ est vide, il n'y aura rien à afficher.

Pour afficher le champ Image, nous devons transformer l'image sélectionnée en balise img.

Le code sera différent en fonction du type de retour sélectionné. Des exemples sont donnés ci-dessous.

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

// don't forget to replace 'image' with your field name
$imageID = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageID) {
    // creates the img tag
    echo wp_get_attachment_image($imageID, $size);
}

2) Code PHP pour afficher le champ Image avec le "Array" Format de retour :

<?php

// don't forget to replace 'image' with your field name
$imageData = get_field('image');
// can be one of the built-in sizes ('thumbnail', 'medium', 'large', 'full' or a custom size)
$size = 'full';

if ($imageData) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s' alt='%s'>",
        esc_attr($imageData['size'][$size]), esc_attr($imageData['alt']));
}

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

// don't forget to replace 'image' with your field name
$imageURL = get_field('image');

if ($imageURL) {
    // displays the image. Each %s in the string will be replaced with the related argument
    printf("<img src='%s'>",
        esc_attr($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 faut donc éviter cette option. Il est préférable de toujours choisir le format de retour "ID".

Pour plus de détails, regardez la vidéo ci-dessous et lisez l'article officiel d'ACF.

Vous avez appris à utiliser le champ Image ACF, ses options et deux façons de l'afficher. Vous pouvez maintenant utiliser facilement ce champ n'importe où.

N'oubliez pas que vous pouvez ajouter d'autres champs de types différents à votre Vue . Par exemple, si vous souhaitez afficher plusieurs images avec des titres sur une page. Les valeurs des champs peuvent être stylisées à l'aide du champ de code CSS, voir l'onglet Avancé de la vue. Ce CSS ne sera imprimé que sur les pages où vous utilisez le shortcode.

J'espère que cet article vous a été utile. Vous pouvez trouver plus d'informations sur le plugin ACF Views sur le site officiel , vous y trouverez des liens vers la chaîne YouTube pour des tutoriels vidéo et des liens vers la Documentation du plugin qui vous aidera pour toutes les questions que vous pourriez avoir.