Galerie

Die Galeriefeld Lassen Sie einen Editor Ihrem Widget einen ganzen Satz Bilder in einem Zug übergeben: Öffnen Sie die Mediathek, wählen Sie zehn Fotos aus, fertig. Innerhalb der Master-Addons Widget-builder„Es ist das Feld für Portfolioraster, Fotowände und Karussells, überall dort, wo die Bildanzahl dem Websitebesitzer und nicht dem Widget-Autor gehört.

Das Galeriefeld unterstützt Bedingungen Wie jedes Steuerelement und seine Bilder werden durch das gerendert Twig-Syntax-Vorlagen-EngineDerselbe Motor, der antreibt {% for %} Schleifen und {% if %} Prüft über Ihre Vorlage hinweg Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Da der Wert ein Array von Bildern ist, ist die Verbindung zu Ihrem HTML eine Schleife, kein Token A {% for %} Block druckt Ihr Bild-Markup einmal pro Foto, in der Reihenfolge, in der die Galerie sie hält Zehn Fotos rendern zehn Artikel Hinzufügen von zwei weiteren aus dem Panel und zwei weitere Elemente erscheinen, keine Vorlagenänderungen.

Was das Galeriefeld tut #

• Öffnet die WordPress Mediathek im Multi-Select-Modus vom Elementor-Panel.
• Speichert eine geordnete Reihe von BildernJeder trägt seine id und url.
• Füttert Ihre Vorlage durch eine {% for %} Schleife„Eine Iteration pro Bild.
• Überlässt Layout Ihrem CSS: Die Schleife druckt Gegenstände, das Gitter umhüllt sie.
• Unterstützt einen Standardbildsatz und dynamische Werte„Damit das Widget vorgefüllt versendet werden kann.

Wenn Sie neu im Erstellen von Widgets sind, beginnen Sie mit dem Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird. Unser Beispiel ist ein Fotoportfolio-Widget, das ein 3-Spalten-Raster rendert, eine Zelle pro Galeriebild.

So fügen Sie ein Galeriefeld hinzu #

Finden Sie die Galerie Feld im Panel links vom Widget Builder-Editor, gruppiert mit den anderen Medienfeldern.

Ziehen Sie es in einen Abschnitt unter dem Inhalt Tab. Sobald es landet, öffnen sich links die Optionen des Feldes.

Galeriefeld Optionen erklärt #

• Etikett: Der über dem Steuerelement in Elementor gezeigte Text, zum Beispiel “Portfolio Images”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen, und Unterstriche nur Ihre Schleife bezieht sich auf diesen Namen, zum Beispiel portfolio_gallery.
• Standard: Ein Startsatz von Bildern, sodass das Raster etwas anzeigen kann, sobald das Widget weggelassen wird.
• Dynamisch: Lassen Sie den Bildsatz von einer dynamischen Quelle und nicht von einer handverlesenen Auswahl stammen.
• Beschreibung, Etikett anzeigen, Trenner: Die Standard-Anzeigeeinstellungen sowie Bedingungen für die Anzeige des Feldes nur dann, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Verbinden Sie die Galerie mit einer Schleife mit Ihrem HTML #

Die Galerie hat keinen Einzelwert-Token. Sein Wert ist ein Array von Medienelementen, daher umhüllt die Vorlage das Markup pro Bild in a {% for %} Block, die gleiche Form, die ein Repeater verwendet:

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

• portfolio_gallery Der Name des Feldes ist.
• img Schleifenvariable ist, die Sie erfinden; nennen Sie es alles.
• Jedes Element legt seine Eigenschaften durch Punktnotation offen: {{ img.url }} Für die Datei-URL, die {{ img.id }} Für die Anhang-ID.
• Der Block druckt einmal pro Bild, in der Reihenfolge der Galerie.

Eine leere Galerie schleift null mal, was normalerweise das gewünschte Verhalten ist. Der Wrapper-Div rendert jedoch immer noch, und ein leerer Behälter mit Polsterung oder einem Rand erscheint als mysteriöser grauer Kasten auf der Seite. Wenn eine leere Galerie nichts zurücklassen sollte, bewachen Sie den gesamten Block:

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

Achten Sie darauf, nach einem Nackten zu greifen {{ portfolio_gallery }} Aus Gewohnheit Auf einem Medienfeld, das eine URL abkürzt; hier ist der Wert eine Liste von Bildern, und nur die Schleife kommt auf sie Wenn Ihr Raster leer wird, während das Panel eindeutig Fotos enthält, fehlt das {% for %} Ist fast immer der Grund.

Layout bleibt im Reiter CSS. Ein Gittercontainer wie grid-template-columns: repeat(3, 1fr) Wraps, wie viele Zellen die Schleife auch produziert, also machen zwölf Fotos vier Zeilen, ohne dass die Vorlage oder der Editor darüber nachdenken.

Verwenden Sie den Galerie-Steuerelement in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu und laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Galeriefeld wird als Add-Bildfeld unter Ihrem Etikett gerendert, mit Miniaturansichten des aktuellen Satzes, sobald eines vorhanden ist.

Klicken Sie darauf und die Mediathek öffnet sich im Mehrauswahlmodus Wählen Sie das Set aus, bestätigen Sie, und das Raster füllt die Vorschau auf Das Wiedereröffnen der Galerie lässt den Editor Bilder hinzufügen, entfernen und neu anordnen, und die Seite folgt der neuen Reihenfolge beim nächsten Render.

Häufige Anwendungsfälle #

• Portfolio - und Fotographen„Eine Zelle pro Bild, CSS-Gitter, das die Zeilen verarbeitet.
• Lightbox-sammlungen Dabei verknüpft jedes Schleifenelement seine URL in voller Größe für ein Lightbox-Skript.
• BildkarussellsIn „die Schleife werden Folien gedruckt und auf der JS-Registerkarte des Widgets wird der Schieberegler ausgeführt.
• Kundenlogowände Wird vom Websitebesitzer verwaltet, ohne das Widget zu berühren.
• Vorher-Nachher - oder Projektgalerien Die mit jedem fertigen Job wachsen.

Tipps für die Arbeit mit dem Feld Galerie #

• Die Schleife ist die Verbindung. Es gibt keinen sinnvollen Direktdruck einer Galerie; nur {% for %}…{% endfor %} Bilder erreicht.
• Verwenden {{ img.url }} Innern der Schleife. Jedes Element ist ein Medienarray und die Punktnotation wählt die URL und ID aus.
• Lassen Sie CSS das Layout besitzen. Ein Raster mit festen Spalten absorbiert jede Bildanzahl; Die Vorlage bleibt ein einzelner Figurenblock.
• Bewachen Sie die Hülle, wenn leer unsichtbar bedeutet. {% if portfolio_gallery %} Verhindert, dass ein ungefülltes Widget einen leeren Container rendert.
• Versenden Sie einen Standardsatz. Sogar drei Platzhalterfotos machen das Widget beim ersten Drop lesbar.
• Im Panel nachbestellen, nicht die Vorlage. Die Schleife folgt der Reihenfolge der Galerie, also ziehen Sie die Miniaturansichten und die Seite ordnet sich neu.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Gallery verwandelt ein Widget in einen Container, den der Websitebesitzer ausfüllt: Multiselect in der Bibliothek, a {% for %} Schleife in der Vorlage, und CSS entscheidet, wie die Menge fließt Bei Einzelbild-Slots wird sein Geschwister die Medienfeld Bedeckt Helden, Avatare und Logos mit denselben Punktnotationsregeln. Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.