Galleri

Feltet Galleri lader redaktører vælge et helt sæt billeder på én gang for en brugerdefineret widget bygget med Master Addons Widget Builder. Din skabelon sløjfer over sættet og udskriver et element pr. billede, så widgetten vokser eller krymper med antallet af fotos. Brug den til fotogitter, porteføljevægge, logorækker og billedskydere.

Galleri er et Pro-felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt felter leveres med Master Addons Pro.

Hvad feltet Galleri gør #

• Det tilføjer en galleriboks til din widgets panel i Elementor. Redaktører vælger flere billeder fra Mediebiblioteket på én gang.
• Billederne gemmes som en liste, i den rækkefølge redaktøren arrangerede dem. Hvert billede har en id og a url.
• Din skabelon udskriver listen med en {% for %} loop.
• Layout er op til din CSS. Sløjfen udskriver emnerne, og et gitter eller en flexbeholder arrangerer dem.

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 og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• Nogle billeder i dit mediebibliotek.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Photo Grid” widget med et Galleri felt navngivet photos.

Sådan tilføjes et Galleri-felt #

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

Galleri felt muligheder forklaret #

• Label er teksten over galleriboksen i Elementor, for eksempel “Fotos”.
• Name er feltets unikke ID og den liste, du for eksempel sløjfer over photos. Kun bogstaver, tal og understregninger.
• Description vises under kontrol i Elementor.
• Standardbilleder har en Tilføj billeder knap, der tilføjer en pladsholderplads. Hold markøren over en plads til et kryds for at fjerne det, og en blyant for at vælge et rigtigt billede til den pågældende plads.

I vores test blev billederne sat under Standardbilleder ikke videregivet til Elementor. En ny kopi af widgetten startede med en enkelt pladsholder i stedet, som løkken læste som to tomme elementer. Skabelonen nedenfor springer dem over, så planlæg for redaktører at tilføje deres egne billeder efter at have droppet widgetten på en side.

De fælles indstillinger længere nede fungerer, som de gør på andre felter.

Sløjfe hen over billederne i din skabelon #

Et galleri er en liste, så {{ photos }} på sine egne udskrifter intet nyttigt. Løkke over det og udskrive hvert billede inde i løkken:

{% 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 er feltets navn. img er et navn, du vælger til det aktuelle billede i løkken.
• {{ img.url }} er billedfilens URL og {{ img.id }} er dets mediebiblioteks-id.
• Det ydre {% if photos %} springer hele gitteret over, når galleriet er tomt.
• Det indre {% if img.url %} springer ethvert element over uden en URL, såsom pladsholderen en ny widget starter med.

Arranger emnerne i fanen CSS. Dette gitter gør tre lige store kolonner og beskærer hvert foto til samme 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; }

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

Brug kontrolelementet Galleri i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Galleriboksen viser, hvor mange billeder der er valgt, og et miniaturebillede af hver enkelt. Papirkurvsikonet rydder hele sættet.

Klik på miniaturerne for at åbne WordPress galleri vinduet. Træk billeder for at ændre deres rækkefølge, klik Omvendt rækkefølge for at vende det, brug Tilføj til galleri for at vælge flere billeder, og klik på krydset på et billede for at fjerne det. Klik Indsæt galleri for at gemme sættet. Gitteret opdateres i samme rækkefølge.

Almindelige brugstilfælde #

• Foto- og porteføljenet.
• Logovægge til kunder eller partnere.
• Billedskydere, hvor løkken udskriver en slide pr. billede.
• Før-og-efter eller produktbillede sætter sig inde i et kort.

Tips til at arbejde med Galleri feltet #

• Pak altid markeringen ind {% if img.url %} inde i løkken, så en ny widget ikke viser tomme billedbokse.
• Brug aspect-ratio og object-fit: cover så fotos i forskellige størrelser står i kø.
• Lad CSS bestemme kolonnerne. Et gitter ombryder et vilkårligt antal billeder uden skabelonændringer.
• Tilføj en alt attribut. Sløjfen giver dig billed-id'et, hvis du skal udskrive en billedtekst eller alternativ tekst fra et andet felt.
• For ét billede skal du bruge Mediefelt. For billeder, der hver har brug for deres egen tekst eller link, skal du bruge Repeaterfelt.

Ofte stillede spørgsmål #

Indpakning #

Tilføj feltet Galleri, sløjf over det med {% for %}, springe tomme elementer med {% if img.url %}, og lad et CSS-gitter håndtere layoutet. Redaktører tilføjer, fjerner og omarrangerer derefter billeder fra Elementor. Se den Kvistsyntaksguide for mere på sløjfer og checks, og prissætning for hvad hver plan indeholder.