Contao Bundle: Dalley IT - PhotoSwipe

von Oliver Dalley (Kommentare: 5)

Contao Erweiterung zur Integration von Photoswipe innerhalb der Contao Galerie

Das Bundle erweitert das Contao Inhaltselement Galerie um eine Templateauswahl für eine Photoswipe-Galerie. Hierfür wird zusätzlich ein Inhaltstyp 'Dait Photoswipe' eingebunden, welcher eine einfache Steuerung einiger Optionen der Javascript Bibliothek 'Photoswipe' ermöglicht.

Installation

Die einfachste Methode das Bundle zu installieren ist die Verwendung des Contao Managers.

Sollte der Contao Manager nicht installiert, oder das Bundle hierüber noch nicht verfügbar sein, kann alternativ auch eine Installation via Composer erfolgen:
composer require dalley-it/contao-photoswipe

Schnellstart

  • Contao Inhaltselement 'Galerie' in einem beliebigen Artikel anlegen.
  • Template 'gallery_photoswipe' in der Galerie auswählen.
  • Option 'Großansicht/Neues Fenster' wählen.
  • j_colorbox und moo_mediabox im Seitenlayout ggfs. deaktivieren.

Verwendung/Optionen

Nach erfolgter Installation des Bundles befindet sich ein neuer Menüpunkt 'Dait Photoswipe' innerhalb des Bereiches 'INHALTE' des Contao backends.

Hierüber kann eine neue Photoswipe Galerie angelegt werden, um darin Einstellungen für die Steuerung und das Verhalten von PhotoSwipe vorzunehmen.

Innerhalb der Photoswipe Galerie können diverse Optionen für die Galerie eingestellt werden:

Optionen:
  • Name der Galerie: Der Name wird innerhalb der Contao Galerie zur Auswahl angezeigt.
  • Transparenz: Einstellung der Opacity der sich modal öffnenden Galeriebilder (Großansicht).
  • Pinch Funktion: Schließen der Galerie durch Zusammenziehen zweier Finger (mobil).
  • Schließen durch vertikales Wischen: Schließen der Galerie durch vertikales Scrollen (mobil).
  • Mit Pfeiltasten weiterblättern: Navigieren durch die Galerie mit der Tastatur aktivieren.
  • Elemente verstecken: Ausblenden der Steuerungselemente bei Inaktivität der Maus.
  • Schließen durch Scrollen: Schließen der Galerie mit dem Mausrad.
  • Schließen mit ESC: Schließen der Galerie mit der ESC-Taste.
Zuordnen:

Sobald eine Photoswipe Galerie erstellt wurde, kann diese im Contao Inhaltselement 'Galerie' zugeordnet werden. Damit die Galeriebilder als modale Großansicht geöffnet werden können, muss zuerst die Option 'Großansicht/Neues Fenster' innerhalb der Contao Galerie ausgewählt werden:

Achtung: j_colorbox bzw. moo_mediabox müssen im betreffenden Layout der Seite deaktiviert sein. Andernfalls werden diese vor der Photoswipe Galerie geladen und als modales Fenster angezeigt! Sobald keines der beiden Lightboxen aktiv ist, wird eine Warnung im Backend der Contao-Galerie angezeigt. Da Photoswipe die Großansicht der Bilder übernimmt, kann der Hinweis ignoriert werden.

Damit Photoswipe aktiv ist, muss im Folgenden das Galerietemplate 'gallery_photoswipe' ausgewählt werden:

Zuletzt kann eine zuvor erstellte Photoswipe Galerie ausgewählt werden. Jede erstellte Photoswipe Gallerie steht für ein 'Optionenpaket', welches hier zugeordnet werden kann. Es werden die Defaulteinstellungen von Photoswipe verwendet, falls keine Photoswipe Galerie zugeordnet wird.

Position Lightbox

Sollte die Position der Lightbox, insbesondere bei zugrundeliegenden Bezugsseiten mit Seitenhöhe größer der Browserhöhe, falsch dargestellt werden, so kann es hilfreich sein, die Höhe der Klasse '.pswp' von 100% auf 100vh zu ändern:

.pswp {
    height: 100vw;
}

Lizenzbestimmung

The bundle dalley-it/contao-photoswipe is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Copyright © Dalley IT 2018 | www.dalley-it.com

 

Zurück

Einen Kommentar schreiben

Kommentar von Maximilian Schmidt |

Lieber Herr Oliver Dalley,

vielen Dank für dieses Tutorial, zu dieser Gallerie Erweiterung.
Vielleicht könnten Sie mir aufzeigen wo mein Problem liegen könnte.
Ich habe diese Erweiterung nun auf 2 unabhängigen Servern mit dem neusten Contao installiert und alle Punkte beachtet. Leider wird da aber keine Javascript Gallerie geladen , bei Klick auf eines der Bilder. Das einzelne Bild wird lediglich nativ geöffnet. Mittlerweile glaube ich alle Kombinationen an JS Templates im Seitenlayout durchprobiert zu haben aber ich komme nicht drauf, was mein Fehler ist.
Können Sie mir bitte sagen welche von den Contao JS Templates benötigt werden, damit diese Gallerie läd? Folgende stehen mir zur Verfügung:

jQuery-Templates:
j_accordion
j_colorbox
j_lightbox4ward (global)
j_mediaelement (Open Sauce)
j_modernizr (Open Sauce)
j_tablesort

MooTools-Templates:
Alle auswählen
moo_accordion
moo_modernizr (Open Sauce)
moo_mediabox (Open Sauce)
moo_accordion_closed (global)
moo_chosen
moo_tablesort

JavaScript-Templates:
Alle auswählen
js_slider
js_autofocus
js_highlight
js_mediaelement (Open Sauce)
js_modernizr (Open Sauce)

Vielen Dank!

Antwort von Oliver Dalley

Lieber Maximilian Schmidt,

Innerhalb der Galerie (Inhaltelement Galerie) unbedingt das Galerietemplate 'gallery_photoswipe' auswählen:

Ist zusätzlich die Option 'Großansicht' ausgewählt, sollte bereits alles funktionieren.

Weitere Templates werden für die Großansicht nicht benötigt. Im Gegenteitl -> j_colorbox und moo_mediabox sollten im Layout deaktiviert sein, damit es keine Überschneidung gibt.

Hoffe, ich konnte helfen.

Kommentar von Thomas Gellenbeck |

Hallo Oliver Dalley,

ich habe PhotoSwipe installiert und es läuft auch ganz problemlos.
Jedoch finde ich die Einstellung für das Autoplay nicht. Wie kann ich dies aktivieren?
Auf einigen Webseiten habe ich diese Funktion mit PhotoSwipe bereits gesehen und würde es gerne auch bei uns umsetzen.
Muss das Autoplay vielleicht im Template aktiviert werden? Einen entsprechenden Eintrag habe ich dort leider nicht finden können.

Vielen Dank!

Antwort von Oliver Dalley

Hallo Thomas Gellenbeck,

wenn ich Dich richtig verstehe, möchtest Du eine Art Slideshow implementieren?!

Meines Wissens nach hat der Autor von PhotoSwipe (Dimitry Semenov) noch keine Funktion für eine Slideshow implementiert. Vielleicht hilft Dir der folgernde Eintrag auf GitHub weiter: https://github.com/dimsemenov/PhotoSwipe/issues/753

Falls Du PhotoSwipe entsprechend des Feature-Requests auf GitHub anpassen möchtest, würde ich Dir eine direkte Einbindung der Bibliothek (also ohne unser Modul) empfehlen.

Kommentar von Reto Mächler |

Guten Tag Oliver

Besten Dank für die implementierung von PhotoSwipe in contao; ich nutze diese Erweiterung oft und gerne.
Zwei Fragen dazu: Wie kann ich updatesichere Anpassungen an der 'default-skin.css' vornehemen; bzw. wie kann ich eine alternative skin bereitstellen, die ich im Contao Backend auswählen kann?
Vielen dank im Voraus für Tipps und Hinweise.

Mit besten Grüssen, Reto

Antwort von Oliver Dalley

Hallo Reto,

vielen Dank für Dein Feedback :-)

Momentan gibt es keine Möglichkeit eine alternative CSS-Datei für die Photoswipe "default-skin.css" innerhalb des Backends auszuwählen. Jedoch kannst Du innerhalb von Contao ja jederzeit eigene CSS-Definitionen, welche die originalen Definitionen überschreiben angeben.

Beispiel:
Gib für

.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../images/default-skin.png) 0 0 no-repeat; }

einfach ein eigenes PNG  in einer neuen CSS-Datei innerhalb von Contao an. Die originalen Definitionen der default-skin.css werden dann überschrieben. (Natürlich musst Du dann evtl. auch die jeweiligen background-positions anpassen)

Solange die CSS-Selektoren innerhalb der default-skin.css sich syntaktisch nicht ändern, sollte dies auch update-sicher funktionieren.

Ich hoffe, dass ich Dir helfen konnte. Falls nein - schreib mich bitte über unsere allgemeine E-Mail-Adresse an. Eventuell können wir Dein Anliegen dann gemeinsam lösen :-)

Ansonsten kannst Du auch gerne einen entsprechenden Pull request über Git einstellen.

 

Viele Grüße
Oliver

Kommentar von Martin Gottwald |

Hallo Oliver,

vielen Dank für das Contao Bundle, das ich problemlos in Betrieb nehmen konnte. Prinzipiell bin ich begeistert, weil es genau das ist, was ich gesucht hatte, aber leider wird nur die in Contao hinterlegte Bildunterschrift angezeigt. Die ist gut für die Thumbnails, aber unter der Großansicht brauche ich den in Contao hinterlegten Titel. Ist das irgendwie möglich?

Viele Grüße
Martin

Antwort von Oliver Dalley

Hallo Martin,

herzlichen Dank für Dein Feedback :-)

Standardmäßig wird leider nur das angezeigt was im Template gallery_photoswipe.html5 innerhalb von <figcaption class="caption"><?= $col->caption ?></figcaption> steht. Also hier $col->caption, was wiederum im Contao Backend der Bildunterschrift entspricht.

Wenn Du auch mit dem Bildtitel bei den Thumbnails leben kannst, könntest Du Dir einfach ein eigenes Template auf Basis von gallery_photoswipe.html5 erstellen und innerhalb des figcaption-Tags den Contao Linktitel des Bildes laden. Also: <figcaption class="caption"><?= $col->linkTitle ?></figcaption>

Diese Lösung sollte update-sicher funktionieren. Schwieriger wird es, falls Du sowohl die Bildunterschrift in den Thumbnails, als auch den Bildtitel innerhalb der Großansicht benötigst. Dann müsstest Du die im Bundle mitgelieferte Datei dait_photoswipe.js anpassen. Hier ist dann leider keine Update-Sicherheit mehr gegeben. Bedeutet - Du müsstest die Änderung bei jedem Update des Bundles erneut einpflegen.

Beispiel für eine entsprechende Anpassung:
Ändere die folgende Codestelle:

if(figureEl.children.length > 1) {
   // <figcaption> content
   item.title = figureEl.children[1].innerHTML;
}

if(linkEl.children.length > 0) {
   // <img> thumbnail element, retrieving thumbnail url
   item.msrc = linkEl.children[0].getAttribute('src');
}

wie nachfolgend ab:

if(figureEl.children.length > 1) {
   // <figcaption> content
   // item.title = figureEl.children[1].innerHTML;
}

if(linkEl.children.length > 0) {
   // <img> thumbnail element, retrieving thumbnail url
   item.msrc = linkEl.children[0].getAttribute('src');
   item.title = linkEl.getAttribute('title');
}

Damit hättest Du dann (bei unverändertem Template) die Bildunterschrift in den Thumbnails und den Bildtitel in der Großansicht der Bilder. Aber eben nicht update-sicher.

Gerne kannst Du auf Git  auch einen entsprechenden Pull request einstellen. Mal sehen, ob noch mehr Nutzer eine entsprechende Änderung des Bundles wünschen. Eventuell könnte ich es dann als Option in einer künftigen Version einbinden.

 

Ich hoffe, dass ich Dir helfen konnte. Falls nein - schreib mich bitte über unsere allgemeine E-Mail-Adresse an. Eventuell können wir Dein Anliegen dann gemeinsam lösen :-)

 

Viele Grüße
Oliver

Kommentar von Matthias |

Hallo Reto

herzlichen Dank für Deine Arbeit, welche nun Photoswipe als eine wirklich gute Gallerie/Lightbox in Contao zugänglich macht.
Habe es ohne Mühe in Contao 4.9 LTS integriert und sieht ohne viel Zusatzarbeit prächtig aus.

Danke, dass Du es uns Contao-Fans zur Verfügung stellst.

Was ist die Summe aus 4 und 2?