Media

Mediefeltet føjer en billedvælger til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører vælger et billede fra Mediebiblioteket eller uploader et nyt i Elementor, og din skabelon udskriver dets URL, ID eller alt-tekst. Brug det til profilfotos, logoer, heltebilleder, produktbilleder og enhver anden enkelt billedplads.

Medier er et af de felter, du kan bruge i den gratis versions Widget Builder. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad Media-feltet gør #

• Det tilføjer Elementors billedboks til din widgets panel med en Vælg billede-knap.
• Vælg Billede åbner WordPress medievinduet, hvor redaktører uploader en fil, vælger en fra Mediebiblioteket eller indsætter en fra en URL.
• Feltet gemmer billedets url, id og alt tekst, og din skabelon udskriver, hvad den har brug for.
• Det virker i HTML-fanen og CSS-fanen, for eksempel som baggrundsbillede.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Profilkort” widget med et Mediefelt med navnet profile_photo og et Tekstfelt til navnet.

Sådan tilføjes et Media-felt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. På Content tab, tilføj en sektion, for eksempel “Profil”.
3. Type media i feltsøgefeltet til venstre.
4. Drag Media ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Mediefeltindstillinger forklaret #

• Label er teksten over billedboksen i Elementor, for eksempel “Profilfoto”.
• Name er feltets unikke ID og starten på dets tokens, så profile_photo giver {{ profile_photo.url }}. Kun bogstaver, tal og understregninger.
• Description vises under billedboksen i Elementor.
• Medietyper lister Billede (standard), Video, Audio, PDF, SVG, Regneark, Dokument, Præsentation og Arkiv. I vores test denne indstilling nåede ikke Elementor. Et felt indstillet til Video viste sig stadig som en normal billedvælger, så behandle Media feltet som et billedfelt.

Der er ingen standard billedindstilling, så en ny kopi af widget starter uden billede, før en editor vælger et. De almindelige indstillinger længere nede fungerer, som de gør på andre felter.

Udskriv billedet i din skabelon #

Feltet indeholder flere værdier, og du udskriver hver enkelt med en prik:

• {{ profile_photo.url }} er billedfilens URL. {{ profile_photo }} udskriver på egen hånd den samme URL.
• {{ profile_photo.id }} er billedets mediebiblioteks-id.
• {{ profile_photo.alt }} er den alternative tekst, billedet havde i Mediebiblioteket, da redaktøren valgte det.

Wrap the <img> tag i en check, så intet udskrives, mens feltet er tomt:

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

Tokenet fungerer også i CSS-fanen, for eksempel for et baggrundsbillede:

.profile-card {
  background-image: url('{{ profile_photo }}');
}

Hvis dine billedstile ikke gælder, så gør vælgeren mere specifik. Elementor har sine egne regler for billeder inde i widgets, og i vores tests .profile-photo alene vandt ikke mod dem, mens .profile-card .profile-photo gjorde.

Klik Gem indstillinger når du er færdig.

Brug Media-kontrolelementet i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Billedboksen viser det aktuelle billede. Hold markøren over det, og klik Vælg Billede for at ændre det, eller brug papirkurvsikonet til at rydde det.

Vinduet Indsæt medie åbnes. Upload en fil under Upload filer, vælge en under Mediebibliotek, eller brug Indsæt fra URL. Detaljeringspanelet til højre viser billedets Alt Text, hvilket er hvad {{ profile_photo.alt }} udskrifter. Fyld det derind, før du klikker Select.

Almindelige brugstilfælde #

• Profilbilleder og teammedlemskort.
• Logoer i sidehoveder, sidefødder og klientlister.
• Helte- og bannerbilleder, som en <img> tag eller en CSS-baggrund.
• Produkt- eller funktionsbilleder inde i kort.

Tips til at arbejde med Media feltet #

• Bevogt altid <img> tag med {% if profile_photo.url %} så et tomt felt efterlader ikke et ødelagt billede.
• Print {{ profile_photo.alt }} i attributten alt, og tilføj alternativ tekst i mediebiblioteket, før du vælger billedet.
• Brug object-fit: cover med en fast bredde og højde, når billeder af forskellige former skal opstilles.
• Giv billedregler to klasser, som f.eks .profile-card .profile-photo, så Elementors egne billedstile ikke tilsidesætter dem.
• For flere billeder, brug Gallerifelt. For ikoner eller SVG-symboler, brug den Ikoner felt.

Ofte stillede spørgsmål #

Indpakning #

Tilføj feltet Medier, udskriv {{ field_name.url }} og {{ field_name.alt }} inde i en {% if %} tjek, og give dine billedstile en bestemt vælger. Redaktører derefter vælge eller uploade billeder direkte fra Elementor. For et link til at gå med billedet, tilføje en URL-felt, og kontrollere prissætning for hvad hver plan indeholder.