Galerie

Im Galeriefeld können Redakteure eine ganze Reihe von Bildern gleichzeitig für ein benutzerdefiniertes Widget auswählen, das mit den Master-Add-ons erstellt wurde Widget-builder. Ihre Vorlage schleift über das Set und druckt ein Element pro Bild, so wächst oder schrumpft das Widget mit der Anzahl der Fotos Verwenden Sie es für Fotograster, Portfoliowände, Logozeilen und Bildschieber.

Galerie ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz Felder ist im Lieferumfang enthalten Master Addons Pro.

Was das Galeriefeld tut #

• Es fügt dem Panel Ihres Widgets in Elementor eine Galeriebox hinzu. Redakteure wählen mehrere Bilder aus der Mediathek in einem Rutsch aus.
• Die Bilder werden als Liste gespeichert, in der Reihenfolge, in der sie der Editor angeordnet hat Jedes Bild hat eine id und ein url.
• Ihre Vorlage druckt die Liste mit einem {% for %} Schleife.
• Layout liegt bei Ihrem CSS. Die Schleife druckt die Artikel und ein Gitter oder Flexcontainer ordnet sie an.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
• Einige Bilder in Ihrer Mediathek.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Photo Grid” - Widget mit einem Galeriefeld namens photos.

So fügen Sie ein Galeriefeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu, zum Beispiel “Galerie”.
3. Typ gallery Im Feldsuchfeld links.
4. Ziehen Galerie In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Galeriefeld Optionen erklärt #

• Etikett Ist der Text über der Galeriebox in Elementor, zum Beispiel “Fotos”.
• Name Ist die eindeutige ID des Feldes und die Liste, über die man z.B. loopt photos. Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Unter der Kontrolle in Elementor erscheint.
• Standardbilder hat ein Bilder hinzufügen Knopf, der einen Platzhalterschlitz hinzufügt Bewegen Sie den Mauszeiger über einen Schlitz, damit ein Kreuz es entfernt und ein Bleistift ein echtes Bild für diesen Schlitz auswählt.

In unseren Tests wurden die unter Standardbilder gesetzten Bilder nicht an Elementor übergeben Eine neue Kopie des Widgets startete stattdessen mit einem einzigen Platzhalter, den die Schleife als zwei leere Elemente lasDie Vorlage unten überspringt diese, also planen Sie, dass Redakteure ihre eigenen Bilder hinzufügen, nachdem sie das Widget auf einer Seite abgelegt haben.

Die gemeinsamen Einstellungen weiter unten funktionieren wie auf anderen Feldern.

Schleife über die Bilder in deiner Vorlage #

Eine Galerie ist eine Liste, also {{ photos }} Drucke für sich genommen nichts Nützliches Schleifen Sie darüber und drucken Sie jedes Bild innerhalb der Schleife aus:

{% 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 Der Name des Feldes ist. img Name ist, den Sie für das aktuelle Bild in der Schleife wählen.
• {{ img.url }} Bilddatei URL ist und {{ img.id }} Ist seine Mediathek-ID.
• Die äußere {% if photos %} Überspringt das gesamte Raster, wenn die Galerie leer ist.
• Das Innere {% if img.url %} Überspringt jedes Element ohne URL, z. B. den Platzhalter, mit dem ein neues Widget beginnt.

Ordnen Sie die Elemente in der Registerkarte CSS an Dieses Raster macht drei gleiche Spalten und fügt jedes Foto in die gleiche Form:

.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; }

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie den Galerie-Steuerelement in Elementor #

Das Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Das Galeriefeld zeigt an, wie viele Bilder ausgewählt sind und ein Miniaturbild von jedem Das Papierkorbsymbol löscht das ganze Set.

Klicken Sie auf die Miniaturansichten, um das Fenster der WordPress-Galerie zu öffnen Ziehen Sie Bilder, um ihre Reihenfolge zu ändern, klicken Sie Umgekehrte Reihenfolge Umdrehen, verwenden Zur Galerie hinzufügen Um weitere Bilder auszuwählen, klicken Sie auf das Kreuz auf einem Bild, um es zu entfernen Klicken Sie Galerie einfügen Satz zu speichern Das Raster aktualisiert sich in der gleichen Reihenfolge.

Häufige Anwendungsfälle #

• Foto - und Portfolioraster.
• Logo-Wände für Kunden oder Partner.
• Bildschieber, wobei die Schleife eine Folie pro Bild druckt.
• Vorher-Nachher- oder Produktbildsätze in einer Karte.

Tipps für die Arbeit mit dem Feld Galerie #

• Wickeln Sie den Markup immer ein {% if img.url %} Innerhalb der Schleife, so dass ein neues Widget keine leeren Bildfelder anzeigt.
• Verwenden aspect-ratio und object-fit: cover Also reihen sich Fotos in verschiedenen Größen an.
• Lassen Sie CSS die Spalten entscheiden Ein Raster umhüllt beliebig viele Bilder ohne Vorlagenänderungen.
• Fügen Sie ein hinzu alt Attribut Die Schleife gibt Ihnen die Bild-ID, wenn Sie eine Bildunterschrift oder einen Alt-Text aus einem anderen Feld drucken müssen.
• Für ein Bild verwenden Sie die Medienfeld. Für Bilder, die jeweils einen eigenen Text oder Link benötigen, verwenden Sie die Repeaterfeld.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Galeriefeld hinzu und schleifen Sie es mit {% for %}Leere Gegenstände überspringen mit {% if img.url %}Und lassen Sie ein CSS-Gitter das Layout verwalten Editoren fügen dann Bilder von Elementor hinzu, entfernen und neu anordnen Sehen Sie sich die Twig-Syntax-Guide Für mehr On-Loops und Checks, und Preisbildung Für das, was jeder Plan beinhaltet.