Galleri

The Gallerifelt lader en editor aflevere dit widget et helt sæt billeder i ét træk: Åbn mediebiblioteket, vælg ti billeder, udført. Inde i Master Addons Widget Builder, det er feltet for porteføljenet, fotovægge og karruseller, hvor som helst billedoptællingen tilhører webstedsejeren snarere end widgetforfatteren.

Gallerifeltet understøtter Betingelser som enhver kontrol, og dens billeder gengives gennem Twig-syntaks skabelon motor, den samme motor, der driver {% for %} sløjfer og {% if %} tjekker på tværs af din skabelon. Begge guider dækker opsætning og begrænsninger.

Fordi værdien er en række billeder, er forbindelsen til din HTML en løkke, ikke et token. A {% for %} block udskriver din billedmarkering én gang pr. foto, i den rækkefølge galleriet holder dem. Ti fotos gengiver ti elementer. Tilføj to mere fra panelet, og yderligere to elementer vises, ingen skabelonændringer.

Hvad feltet Galleri gør #

• Åbner WordPress mediebibliotek i multi-vælg tilstand fra Elementor-panelet.
• Gemmer en ordnet række billeder, der hver bærer sine id og url.
• Feeds din skabelon gennem en {% for %} loop, én iteration pr. billede.
• Efterlader layout til din CSS: løkken udskriver elementer, gitteret omslutter dem.
• Understøtter et standardbilledsæt og dynamiske værdier, så widget kan sende forudfyldt.

Hvis du er ny til at bygge widgets, skal du starte med Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en fotografering portefølje widget, der gengiver en 3-kolonne gitter, en celle pr galleri billede.

Sådan tilføjes et Galleri-felt #

Find the Galleri felt i panelet til venstre for Widget Builder-editoren, grupperet med de andre mediefelter.

Træk den ind i en sektion under Content fane. Når det lander, åbnes feltets muligheder til venstre.

Galleri felt muligheder forklaret #

• Etiket: teksten vist over kontrolelementet i Elementor, for eksempel “Porteføljebilleder”.
• Navn: den entydige identifikator for feltet, bogstaver, tal og understregninger kun. Din løkke henviser til dette navn, for eksempel portfolio_gallery.
• Standard: et startsæt af billeder, så gitteret har noget at vise i det øjeblik, widgetten tabes.
• Dynamisk: lader billedsættet komme fra en dynamisk kilde frem for et håndplukket udvalg.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus Betingelser for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Forbind Galleriet til din HTML med en loop #

Galleriet har ikke et token med en enkelt værdi. Dets værdi er en række medieelementer, så skabelonen ombryder markeringen pr. billede i en {% for %} blok, den samme form en Repeater bruger:

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

• portfolio_gallery er feltets navn.
• img er en løkkevariabel, du opfinder; kald det hvad som helst.
• Hvert element afslører sine egenskaber ved punktnotation: {{ img.url }} for fil- URL' en, {{ img.id }} for bilags-id'et.
• Blokken udskrives én gang pr. billede i galleriets rækkefølge.

Et tomt galleri sløjfer nul gange, hvilket normalt er den adfærd, du ønsker. Indpakningsdiven gengiver dog stadig, og en tom beholder med polstring eller en kant vises som en mystisk grå boks på siden. Når et tomt galleri ikke skal efterlade noget, skal du beskytte hele blokken:

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

Pas på at række ud efter en bar {{ portfolio_gallery }} af vane. På et Mediefelt udskriver genvejen en URL; her er værdien en liste over billeder, og kun løkken kommer efter dem. Hvis dit gitter gør tomt, mens panelet tydeligt holder fotos, mangler {% for %} er næsten altid hvorfor.

Layout bliver i fanen CSS. En gitterbeholder som f.eks grid-template-columns: repeat(3, 1fr) ombrydes, hvor mange celler løkken producerer, så tolv fotos laver fire rækker, uden at hverken skabelonen eller editoren tænker over det.

Brug kontrolelementet Galleri i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, genindlæser editoren, hvis siden allerede var åben. Feltet Galleri gengives som en tilføjelsesbilledeboks under din etiket, med miniaturer af det aktuelle sæt, når en findes.

Klik på det, og mediebiblioteket åbnes i multi-vælg-tilstand. Vælg sættet, bekræft, og gitteret udfyldes i forhåndsvisningen. Genåbning af galleriet lader editoren tilføje, fjerne og omarrangere billeder, og siden følger den nye rækkefølge ved næste gengivelse.

Almindelige brugstilfælde #

• Portefølje- og fotografigitre, en celle pr. billede, CSS-gitter, der håndterer rækkerne.
• Lightbox samlinger hvor hvert loop-element forbinder sin URL i fuld størrelse for et lightbox-script.
• Billedkarruseller, udskriver sløjfen slides, og widgettens JS-fane kører skyderen.
• Klientlogovægge vedligeholdes af webstedsejeren uden at røre widgetten.
• Før-og-efter eller projektgallerier der vokser med hvert færdigt job.

Tips til at arbejde med Galleri feltet #

• Sløjfen er forbindelsen. Der er ikke noget nyttigt direkte tryk af et galleri; kun {% for %}…{% endfor %} når billederne.
• Brug {{ img.url }} inde i løkken. Hvert element er et mediearray, og priknotation udvælger URL'en og ID'et.
• Lad CSS eje layoutet. Et gitter med faste kolonner absorberer enhver billedoptælling; skabelonen forbliver en enkelt figurblok.
• Bevogt omslaget, når det er tomt, betyder usynligt. {% if portfolio_gallery %} forhindrer en ufyldt widget i at gengive en tom beholder.
• Send et standardsæt. Selv tre pladsholderbilleder gør widgetten læselig ved første drop.
• Genbestil i panelet, ikke skabelonen. Sløjfen følger gallerirækkefølge, så træk i miniaturerne, og siden omarrangerer sig selv.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Gallery forvandler en widget til en beholder, som webstedsejeren udfylder: multi-select i biblioteket, en {% for %} sløjfe i skabelonen, og CSS beslutter, hvordan sættet flyder. For single-image slots, dens søskende den Mediefelt dækker helte, avatarer og logoer med de samme regler for punktnotation. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.