Medien

Die Medienfeld Verbindet ein benutzerdefiniertes Widget mit der WordPress-Mediathek Das Feld einwerfen, und jeder, der das Widget in Elementor bearbeitet, bekommt den bekannten Bildauswahlschalter: klicken, auswählen oder hochladen, fertig. In den Master-Addons Widget-builderEs ist das Feld hinter Heldenbildern, Avataren, Logos und jedem anderen Einzelbild-Slot, den ein Widget benötigt.

Wie jedes Widget Builder-Feld unterstützt Media Bedingungen Für Panel-Sichtbarkeit. Sein Token rendert durch die Twig-Syntax-Vorlagen-Engine, die die Datei-URL automatisch ausgibt, also <img src="{{ photo }}"> Funktioniert einfach Beide Ratgeber behandeln die Details.

Im Gegensatz zu einem Textfeld ist der Wert des Medienfelds nicht eine Zeichenfolge. Es handelt sich um ein Array, das die Datei trägt url, id, alt, und mehr, und Ihre Vorlage erreicht jedes Stück mit Punktnotation Es gibt eine freundliche Verknüpfung: Das direkte Drucken des Feldes gibt Ihnen die URL Und eine Gewohnheit, die es wert ist, vom ersten Tag an aufgebaut zu werden und das Markup mit einem zu schützen {% if %} Ein leeres Feld hinterlässt also kein gebrochenes Bild.

Was der Medienbereich tut #

• Öffnet die WordPress Mediathek Laden Sie vorhandene Dateien aus dem Elementor-Panel hoch oder wählen Sie sie aus.
• Speichert die Auswahl als Array Mit url, id, und alt Unter seinen Schlüsseln.
• Druckt die URL auf einem direkten Token: {{ hero_image }} Gibt die Datei-URL als Verknüpfung aus.
• Legt jede Eigenschaft durch Punktnotation frei: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• Kann die Bibliothek nach Medientyp filternBild, Video oder Audio und unterstützt dynamische Werte.

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 Restaurant-Helden-Widget mit einem einzelnen Medienfeld namens hero_image Das füllt das Banner.

So fügen Sie ein Medienfeld hinzu #

Im Widget Builder-Editor finden Sie die Medien Feld im Panel links, gruppiert mit den anderen Medienfeldern.

Ziehen Sie es in einen Abschnitt unter dem Inhalt Tab; ein Bild ist Inhalt, auch wenn es als CSS-Hintergrund landet, sobald es landet, öffnen sich links die Optionen des Feldes.

Medienfeldoptionen erklärt #

• Etikett: Der über dem Chooser in Elementor gezeigte Text, zum Beispiel “Hero Image”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche, zum Beispiel hero_image.
• Standard: Eine Startdatei als URL- und ID-Paar, sodass das Widget auf die Seite abfällt, die bereits fertig aussieht.
• Medientyp: Filtert das Angebot der Bibliothek, Bild, Video oder Audio, um zu verhindern, dass Redakteure einen MP3-Anschluss an ein Img-Tag übertragen.
• Dynamisch: Lassen Sie den Wert von einer dynamischen Quelle und nicht von einer festen 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 das Medienfeld mit Ihrer Vorlage #

Der Wert ist ein Array, und daraus folgen die Vorlagenregeln Der direkte Token ist eine Verknüpfung für den häufigsten Bedarf:

<img src="{{ hero_image }}">

Das Drucken eines Array-Werts gibt ihn direkt aus url Schlüssel, so rendert dieser die Datei-URL Das explizite Formular tut es ihm gleich und liest deutlicher neben seinen Geschwistern:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

Nun die Gewohnheit, die aufgeräumte Widgets von defekten Widgets trennt: der leere Guard Ein Medienfeld mit nichts ausgewählt macht leere Attribute und <img src=""> Bild als gebrochen anzeigen Wickeln Sie das Markup ein:

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

Das Feld funktioniert auch im CSS-Tab Ein Hintergrund-Slot ist eine Zeile:

.hero-banner {
  background-image: url('{{ hero_image }}');
}

Achten Sie darauf, dass Alttext unberührt durchläuft. {{ hero_image.alt }} Druckt, was die Mediathek bereithält, und Bibliotheken sind voll mit Bildern mit leeren Alt-Feldern Der Guard hält das Attribut präsent, aber er kann den Text nicht erfinden Widgets, die für Clients erstellt wurden, verdienen eine Notiz, in der Redakteure aufgefordert werden, Alt-Text in der Bibliothek zu füllen.

Verwenden Sie die Mediensteuerung 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 Medienfeld wird als Standard-Bildauswahlbox von Elementor unter Ihrem Label gerendert.

Klicken Sie auf das Kästchen und die WordPress-Mediathek öffnet sich, gefiltert nach dem von Ihnen festgelegten Medientyp Wählen oder laden Sie eine Datei hoch, bestätigen Sie, und die Vorschau aktualisiert sich in dem Moment, in dem die Auswahl landet.

Das Bild später zu tauschen ist der gleiche Klick, das Entfernen leert den Wert, was genau der Fall ist, den Ihr {% if %} Schutzhüllen.

Häufige Anwendungsfälle #

• Helden - und Bannerbilder„als img-Tag oder CSS-Hintergrund.
• Avatare und Kopfschüsse In Testimonial - und Team-Widgets.
• Logos In Header-, Footer- und Client-Strip-Widgets.
• Karten-thumbnails Dabei bietet jede Widget-Instanz ein Bild.
• Dekorative Abschnittshintergründe Durchsetzen background-image Im Reiter CSS.

Tipps für die Arbeit mit dem Bereich Medien #

• Immer Wache mit {% if hero_image.url %}. Ein nicht gesetztes Feld rendert ansonsten ein leeres src und ein Symbol für gebrochene Bilder.
• Drucken Sie die Alt. alt="{{ hero_image.alt }}" Kostet nichts und trägt den Alt-Text der Bibliothek in dein Markup.
• Verwenden Sie das direkte Token für CSS-Hintergründe. url('{{ hero_image }}') CSS-Tab lesbar hält.
• Legen Sie ein Standardbild fest. Ein Widget, das mit einem echten Foto auf die Seite fällt, verkauft sich von selbst; ein grauer Platzhalter nicht.
• Filtern Sie mit Medientyp. Wenn der Slot ein Bild ist, sagen Sie es, und die Bibliothek wird keine Videos anbieten.
• Denken Sie daran, dass die Verknüpfung nur URL-fähig ist. Jede andere Eigenschaft als die URL benötigt eine Punktnotation; Es gibt keine Verknüpfung für id oder alt.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Media ist das Einzelbild-Arbeitstier Ein Bibliothekspicker im Panel, ein URL-Verknüpfungspunkt in der Vorlage, Punktnotation für id und alt, und ein {% if %} Wache, die zwischen Ihrem Widget und einem Symbol für gebrochene Bilder steht Wenn aus einem Bild viele werden, gehen Sie zum Bild hinauf Galeriefeld und seine Schleife Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.