Photoswipe Galerie Beispiel

Erstellung einer Galerie

Beautifulhugo Customized beinhaltet Shortcodes von Li-Wen Yip und Gert-Jan van den Berg, um eine Galerie mit PhotoSwipe zu erstellen.

Individuelle Bilder

Beispiel

Die Galerie oben wurde mit folgendem shortcode erstellt:

{{< gallery caption-effect="fade" hover-effect="grow" >}}
  {{< figure thumb="-thumb" link="/img/pexels-bess-hamiti-36487.jpg" caption="Photo by Bess Hamiti from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-pok-rie-5799946.jpg" caption="Photo by Pok Rie from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-sharon-mccutcheon-1174932.jpg" caption="Photo by Sharon McCutcheon from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-sharon-mccutcheon-1174952.jpg" caption="Photo by Sharon McCutcheon from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-tim-mossholder-3578593.jpg" caption="Photo by Tim Mossholder from Pexels" >}}
  {{< figure thumb="-thumb" link="/img/pexels-tomasz-filipek-1637438.jpg" caption="Photo by Tomasz Filipek from Pexels" alt="Nintendo Entertainment System" >}}
{{< /gallery >}}

Full directory

Beispiel

Die Galerie oben wurde mit folgendem shortcode erstellt:

{{< gallery dir="/img/" />}}

Nutzung

Für alle Details, schau dir bitte die hugo-easy-gallery GitHub Seite an. Grundlagen vom Beispiel oben sind:

  • Beginne und ende eine Galerie mit den Tags {{< gallery >}} und {{< /gallery >}}
  • {{< figure src="image.jpg" >}} wird image.jpg für Vorschau- und voll-Bild nutzen
  • {{< figure src="thumb.jpg" link="image.jpg" >}} benutzt thumb.jpg Für die Vorschau und image.jpg für das volle Bild
  • {{< figure thumb="-small" link="image.jpg" >}} wird image-small.jpg für die Vorschau und image.jpg für das volle Bild nutzen
  • Alle Features / Parameter von Hugo’s eingebautem figure shortcode funktionieren wie gewohnt, z.B. src, link, title, caption, class, attr (attribution), attrlink, alt
  • {{< gallery caption-effect="fade" >}} wird die Elemente einblenden anstatt dem üblichen slide-up Effekt
  • Viele verschiedenen Stile für Beschreibungen und Hover Effekte sind verfügbar, schau dir hugo-easy-gallery auf GitHub für alle Optionen an
  • Beachte das dieses Theme die photoswipe Galerie und Skripte automatisch lädt, photoswipe muss nicht zusätzlich geladen werden

Siehe auch