Galerie

Le Champ de galerie laisse un éditeur remettre à votre widget tout un ensemble d'images en un seul coup : ouvrez la médiathèque, sélectionnez dix photos, faites À l'intérieur des modules complémentaires principaux Constructeur de widgets(en), c'est le domaine des grilles de portfolio, des murs de photos et des carrousels, partout où le nombre d'images appartient au propriétaire du site plutôt qu'à l'auteur du widget.

Le champ Galerie prend en charge Conditions comme tout contrôle, et ses images restituent à travers le Moteur de modèles de syntaxe Twig1, le même moteur qui alimente {% for %} boucles et {% if %} vérifie sur votre modèle Les deux guides couvrent la configuration et les limitations.

Parce que la valeur est un tableau d'images, la connexion à votre HTML est une boucle, pas un jeton. UN {% for %} block imprime votre balisage d'image une fois par photo, dans l'ordre où la galerie les tient Dix photos rendent dix éléments Ajoutez-en deux de plus à partir du panneau et deux autres éléments apparaissent, aucun changement de modèle.

Ce que fait le champ Galerie #

• Ouvre la médiathèque WordPress en mode multi-sélection du panneau Élémenteur.
• Stocke un tableau ordonné d'images[TRADUCTION], chacun portant son id et url.
• Alimente votre modèle via un {% for %} boucle1, une itération par image.
• Laisse la mise en page à votre CSS: la boucle imprime les objets, la grille les enveloppe.
• Prend en charge un ensemble d'images par défaut et des valeurs dynamiques1, pour que le widget puisse être expédié pré-rempli.

Si vous débutez dans la création de widgets, commencez par le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de portfolio de photographies qui restitue une grille à 3 colonnes, une cellule par image de galerie.

Comment ajouter un champ Galerie #

Trouver le Galerie champ dans le panneau à gauche de l'éditeur Widget Builder, regroupé avec les autres champs multimédias.

Faites-le glisser dans une section sous le Contenu onglet. Une fois qu'il atterrit, les options du champ s'ouvrent à gauche.

Options du champ de la galerie expliquées #

• Étiquette: le texte affiché au-dessus du contrôle dans Elementor, par exemple “Portfolio Images”.
• Nom: l'identifiant unique pour le champ, les lettres, les chiffres et les traits de soulignement uniquement Votre boucle fait référence à ce nom, par exemple portfolio_gallery.
• Par défaut: un ensemble d'images de départ, la grille a donc quelque chose à montrer au moment où le widget tombe.
• Dynamique : permet à l'ensemble d'images de provenir d'une source dynamique plutôt que d'une sélection triée sur le volet.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez la Galerie à votre HTML avec une boucle #

La Galerie n'a pas de jeton à valeur unique Sa valeur est un tableau d'éléments multimédias, le modèle enveloppe donc le balisage par image dans un {% for %} bloc, la même forme qu'un Répéteur utilise :

<div class="portfolio-grid">
  {% for img in portfolio_gallery %}
  <figure class="portfolio-cell">
    <img src="{{ img.url }}">
  </figure>
  {% endfor %}
</div>

• portfolio_gallery est le Nom du champ.
• img est une variable de boucle que vous inventez ; appelez-le n'importe quoi.
• Chaque élément expose ses propriétés par notation de points : {{ img.url }} pour l'URL du fichier, {{ img.id }} pour l'ID de pièce jointe.
• Le bloc imprime une fois par image, dans l'ordre de la galerie.

Une galerie vide boucle zéro fois, ce qui est généralement le comportement que vous voulez Le div wrapper rend toujours, cependant, et un conteneur vide avec un rembourrage ou une bordure apparaît comme une mystérieuse boîte grise sur la page Quand une galerie vide ne doit rien laisser derrière elle, gardez tout le bloc :

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

Attention à tendre la main à un nu {{ portfolio_gallery }} par habitude. Sur un champ Média qui raccourcit imprime une URL ; ici la valeur est une liste d'images, et seule la boucle s'y met Si votre grille se vide alors que le panneau contient clairement des photos, les manquantes {% for %} est presque toujours pourquoi.

La disposition reste dans l'onglet CSS. Un conteneur de grille tel que grid-template-columns: repeat(3, 1fr) enveloppe le nombre de cellules produites par la boucle, donc douze photos font quatre lignes sans que le modèle ou l'éditeur n'y pense.

Utilisez le contrôle Galerie dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le champ Galerie se restitue sous forme de boîte d'images supplémentaires sous votre étiquette, avec les vignettes de l'ensemble actuel une fois qu'il en existe un.

Cliquez dessus et la médiathèque s'ouvre en mode multi-sélection Choisissez l'ensemble, confirmez et la grille se remplit dans l'aperçu La réouverture de la galerie permet à l'éditeur d'ajouter, de supprimer et de réorganiser des images, et la page suit le nouvel ordre lors du rendu suivant.

Cas d'utilisation courants #

• Grilles de portfolio et de photographie1, une cellule par image, grille CSS gérant les lignes.
• Collections Lightbox où chaque élément de boucle relie son URL pleine taille pour un script lightbox.
• Carrousels d'images4, la boucle imprime les diapositives et l'onglet JS du widget exécute le curseur.
• Murs du logo client maintenu par le propriétaire du site sans toucher au widget.
• Galeries avant-après ou projet cela grandit à chaque travail terminé.

Conseils pour travailler avec le domaine Galerie #

• La boucle est la connexion. Il n'y a pas d'impression directe utile d'une galerie ; seulement {% for %}…{% endfor %} atteint les images.
• Utilisation {{ img.url }} à l'intérieur de la boucle. Chaque élément est un tableau multimédia et la notation par points sélectionne l'URL et l'ID.
• Laissez CSS posséder la mise en page. Une grille avec des colonnes fixes absorbe tout nombre d'images ; le modèle reste un seul bloc de figures.
• Gardez l'emballage lorsqu'il est vide signifie invisible. {% if portfolio_gallery %} empêche un widget non rempli de restituer un conteneur vide.
• Expédier un ensemble par défaut. Même trois photos d'espace réservé rendent le widget lisible dès la première goutte.
• Réorganisez dans le panneau, pas dans le modèle. La boucle suit l'ordre de la galerie, alors faites glisser les vignettes et la page se réorganise.

Foire aux questions #

Envelopper #

Le champ Galerie des constructeurs de widgets transforme un widget en conteneur rempli par le propriétaire du site : multi-sélectionner dans la bibliothèque, a {% for %} bouclez dans le modèle, et CSS décidant comment l'ensemble circule Pour les emplacements à image unique, son frère le Domaine médiatique couvre les héros, les avatars et les logos avec les mêmes règles de notation de points. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.