Galerie

Le champ Galerie permet aux éditeurs de choisir un ensemble complet d'images à la fois pour un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Votre modèle boucle sur l'ensemble et imprime un élément par image, de sorte que le widget grandit ou rétrécit avec le nombre de photos Utilisez-le pour les grilles de photos, les murs du portfolio, les lignes de logo et les curseurs d'images.

Gallery est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Galerie #

• Il ajoute une boîte de galerie au panneau de votre widget dans Elementor Les éditeurs choisissent plusieurs images de la Médiathèque en une seule fois.
• Les images sont stockées sous forme de liste, dans l'ordre dans lequel l'éditeur les a disposées Chaque image possède un id et un url.
• Votre modèle imprime la liste avec un {% for %} boucle.
• La mise en page dépend de votre CSS. La boucle imprime les éléments et une grille ou un conteneur flexible les dispose.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Quelques images dans votre Médiathèque.
• Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Photo Grid” avec un champ Gallery nommé photos.

Comment ajouter un champ Galerie #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Sur le Contenu onglet, ajouter une section, par exemple“Gallery”.
3. Type gallery dans le champ champ rechercher box à gauche.
4. Glisser Galerie dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

Options du champ de la galerie expliquées #

• Étiquette est le texte au-dessus de la boîte de galerie dans Elementor, par exemple “Photos”.
• Nom est l'ID unique du champ et la liste sur laquelle vous bouclez, par exemple photos. Lettres, chiffres et soulignements uniquement.
• Description apparaît sous le contrôle dans Elementor.
• Images par défaut a un Ajouter des Images bouton qui ajoute une fente pour espace réservé Passez au-dessus d'une fente pour qu'une croix la retire et un crayon pour choisir une image réelle pour cette fente.

Dans nos tests, les images définies sous Images par défaut n'ont pas été transmises à Elementor Une nouvelle copie du widget a commencé avec un seul espace réservé à la place, que la boucle a lu comme deux éléments vides Le modèle ci-dessous saute ceux-ci, donc prévoyez que les éditeurs ajoutent leurs propres images après avoir laissé tomber le widget sur une page.

Les paramètres communs plus bas fonctionnent comme ils le font dans d’autres domaines.

Bouclez sur les images de votre modèle #

Une galerie est une liste, donc {{ photos }} sur ses propres impressions rien d'utile Bouclez dessus et imprimez chaque image à l'intérieur de la boucle :

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

• photos est le Nom du champ. img est un nom que vous choisissez pour l'image actuelle dans la boucle.
• {{ img.url }} est l'URL du fichier image et {{ img.id }} est son identifiant de bibliothèque multimédia.
• L'extérieur {% if photos %} saute toute la grille lorsque la galerie est vide.
• L'intérieur {% if img.url %} ignore tout élément sans URL, comme l'espace réservé avec lequel un nouveau widget commence.

Disposez les éléments dans l'onglet CSS Cette grille fait trois colonnes égales et recadre chaque photo à la même forme :

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Galerie dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte La boîte de galerie montre combien d'images sont sélectionnées et une vignette de chacune L'icône de la corbeille efface l'ensemble.

Cliquez sur les vignettes pour ouvrir la fenêtre de la galerie WordPress Faites glisser les images pour modifier leur commande, cliquez sur Ordre inverse pour le retourner, utilisez Ajouter à la galerie pour choisir plus d'images, et cliquez sur la croix sur une image pour la supprimer Cliquez sur Insérer galerie pour sauvegarder l'ensemble La grille se met à jour dans le même ordre.

Cas d'utilisation courants #

• Grilles photos et portfolio.
• Murs de logo pour clients ou partenaires.
• Curseurs d'images, la boucle imprimant une diapositive par image.
• Avant-après ou ensembles d'images de produits à l'intérieur d'une carte.

Conseils pour travailler avec le domaine Galerie #

• Enveloppez toujours le balisage {% if img.url %} à l'intérieur de la boucle, un nouveau widget n'affiche donc pas les cases d'image vides.
• Utilisation aspect-ratio et object-fit: cover donc des photos de différentes tailles s'alignent.
• Laissez CSS décider des colonnes Une grille enveloppe n'importe quel nombre d'images sans changement de modèle.
• Ajouter un alt attribut. La boucle vous donne l'ID de l'image si vous devez imprimer une légende ou un texte alternatif à partir d'un autre champ.
• Pour une image, utilisez le Domaine médiatique. Pour les images qui ont chacune besoin de leur propre texte ou lien, utilisez le Champ répéteur.

Foire aux questions #

Envelopper #

Ajoutez le champ Galerie, bouclez dessus avec {% for %}, sautez les éléments vides avec {% if img.url %}(en), et laissez une grille CSS gérer la mise en page (en anglais) Les éditeurs ajoutent, suppriment et réordonnent les images de Elementor Voir le Guide syntaxique Twig pour en savoir plus sur les boucles et les contrôles, et tarification pour ce que chaque plan comprend.