[inspiredminds/contao-glightbox] - Galerie und Bild

[derRenner]

Hallo,

Contao 4.13.35
php81
lokale Installation, laragon
[inspiredminds/contao-glightbox] 1.0.3

ich habe hier eine Installation bei der
- CE Bild kein data-Attribut erzeugt und damit auch die Glightbox nicht öffnet
- CE Galerie MIT CE Bild im gleichen Artikel ebenfalls kein data-Attribut erzeugt
- CE Galerie OHNE CE Bild im gleichen Artikel wird das data-Attribut 'data-gallery' erzeugt und somit klappt die Glightbox

CE Galerie, OHNE Bild im gleichen Artikel:

<figure class="image_container">
      <a href="files/layout/img/news/2018/crosslauf/crosslauf-2018-vorbereitung_004.jpg" data-lightbox="lb1618" data-gallery="lb1618">

CE Galerie, MIT Bild im gleichen Artikel:

<figure class="image_container">
      <a href="files/layout/img/news/2018/crosslauf/crosslauf-2018-vorbereitung_004.jpg" data-lightbox="lb1618">

CE Bild, OHNE Galerie im gleichen Artikel:

<figure class="image_container">
      <a href="files/layout/img/news/2018/crosslauf/organisationsteam_2018.jpg" data-lightbox="">

CE Bild, MIT Galerie im gleichen Artikel:

<figure class="image_container">
      <a href="files/layout/img/news/2018/crosslauf/organisationsteam_2018.jpg" data-lightbox="">

Ich habe keine angepassten Galerie- oder Bildertemplates.

Jemand eine Idee, wo ich hier anpacken kann/muss?

[Spooky]

Laut deiner Ausgabe wird das data-lightbox Attribut erzeugt, somit sollte es auch funktionieren. Falls du meinst, dass das Attribut tlw. keinen Inhalt hat: Contao setzt keinen Inhalt bei Einzelbildern - nur bei Galerien, die in der Lightbox dann anhand des Werts des data-lightbox Attributs gruppiert werden sollen.

[derRenner]

Nein, ich meine, dass die Bilder nicht in einer Lightbox geöffnet werden.
Bilder werden NUR aus der Galerie heraus in einer Lightbox geöffnet und auch nur dann, wenn kein zusätzlichen CE Bild im Artikel ist

[Spooky]

Poste einen Link zur Seite.

[derRenner]

lokale Installation, laragon

leider noch lokal

[derRenner]

Wenn ich das CE Bild einfüge, sehe ich in den DEV Tools einen Fehler:
Uncaught TypeError: crypto.randomUUID is not a function
der auf element.setAttribute('data-gallery', crypto.randomUUID()); verweisst:

<!-- TEMPLATE START: vendor/inspiredminds/contao-glightbox/contao/templates/js_glightbox.html5 -->
<script src="bundles/contaoglightbox/js/glightbox.min.js?v=81833d3f"></script><script>
(function(){
  'use strict';
  document.querySelectorAll('a[data-lightbox]').forEach((element) => {
    if (!!element.dataset.lightbox) {
      element.setAttribute('data-gallery', element.dataset.lightbox);
    } else {
      element.setAttribute('data-gallery', crypto.randomUUID());
    }
  });
  GLightbox({
    selector: 'a[data-lightbox]'
  });
})();
</script> 

[Spooky]

Welcher Browser?

[derRenner]

Firefox 121.0.1
Chrome 120.0.6099.217
weitere habe ich nicht mehr getestet

[Spooky]

Sehr seltsam. Aus irgendeinem Grund fehlt bei dir https://developer.mozilla.org/en-US/docs/Web/API/Crypto

[derRenner]

mmh - OK, aber ...
es funktioniert die Lightbox im Einzelbild ja nicht.
Die Lightbox in der Galerie (ohne weiteres Einzelbild) selbst funktioniert ja - und ich vermute mal, dass das auch auf das gleiche Skript zugreift.
Erst wenn ein Einzelbild + Galerie im Artikel ist, funktioniert auch die Lightbox der Galerie nicht mehr ... und im Einzelbild sowieso nicht.

Die Fehlermeldung kommt auch erst wenn ich nur ein Einzelbild eingefügt habe.
Die Fehlermeldung kommt nicht, wenn ich nur eine Galerie einfüge.

Kann das mal jemand versuchen nachzustellen? Dann könnte ich zumindest sicher gehen, dass es nur an meiner Installation liegt » und ich muss mir eine Alternative dazu einfallen lassen

[Spooky]

es funktioniert die Lightbox im Einzelbild ja nicht.

Genau, weil in deinen Browsern https://developer.mozilla.org/en-US/docs/Web/API/Crypto fehlt - und das wird für die Einzelbilder im neuesten Template benötigt.

[derRenner]

Und die Galerie greift auf crypto.randomUUID() nicht zu?

bzw. muss ich also davon ausgehen, dass
- obwohl ich die letzte Browserversion in Chrome und Firefox nutze, den Fehler meine Arbeitsumgebung verursacht?
- das Skript bei anderen Besuchern der Webseite auch nicht funktoniert? Auch nicht mit den letztgültigen Browserversionen?
- bei Nutzern mit älteren Browsern (kleiner FF 95) auch nicht funktioniert?

mmmh - schöne sch....
Dann werde ich mich wohl mal auf die Suche nach einer Alternative machen müssen.
Danke trotzdem für die Hilfestellung!

[Spooky]

Und die Galerie greift auf crypto.randomUUID() nicht zu?

Korrekt, da trifft dann der andere Zweig in der if-Abfrage zu.

- obwohl ich die letzte Browserversion in Chrome und Firefox nutze, den Fehler meine Arbeitsumgebung verursacht?

Genau, dem müsstest du nachgehen. Ich bin eigentlich davon ausgegangen, dass das überall zur Verfügung steht, solange man die neueste Browser Version nutzt.

- das Skript bei anderen Besuchern der Webseite auch nicht funktoniert? Auch nicht mit den letztgültigen Browserversionen?

Siehe oben - eigentlich sollte das in allen modernen Browsern zur Verfügung stehen. Falls es Umstände gibt, wo das nicht der Fall ist, muss für dieses Problem doch eine andere Lösung gefunden werden.

- bei Nutzern mit älteren Browsern (kleiner FF 95) auch nicht funktioniert?

Genau, ja, aber die kann man ja ignorieren .

Dann werde ich mich wohl mal auf die Suche nach einer Alternative machen müssen.

Du kannst ja auch die oben gepostete Änderung Rückgängig machen. Aber dann tritt das oben erwähnte Problem wieder auf.

[derRenner]

Ich habe mich jetzt mal - um im Projekt voran zu kommen - für einen workaround entschieden:
Ich überschreibe das Template und generiere eine UUID
und ersetze damit crypto.randomUUID() durch die generateUUID().

<?php

// /templates/js_glightbox.html5

use Contao\Template;

$GLOBALS['TL_CSS']['glightbox'] = 'bundles/contaoglightbox/css/glightbox.min.css|static';
echo Template::generateScriptTag('bundles/contaoglightbox/js/glightbox.min.js', false, null);

?>
<script>

function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

(function(){
  'use strict';
  document.querySelectorAll('a[data-lightbox]').forEach((element) => {
    if (!!element.dataset.lightbox) {
      element.setAttribute('data-gallery', element.dataset.lightbox);
    } else {
      element.setAttribute('data-gallery', generateUUID());
    }
  });
  GLightbox({
    selector: 'a[data-lightbox]'
  });
})();
</script>

Das klappt soweit:
CE Bild mit Lightbox öffnet sich
CE Bild + CE Galerie (im gleichen Artikel), mit jeweils Lightbox öffnen sich. CE Bild wird als "Einzelelement" erkannt und ist nicht in der Galerie mit integriert.

[lbableck]

Genau, dem müsstest du nachgehen. Ich bin eigentlich davon ausgegangen, dass das überall zur Verfügung steht, solange man die neueste Browser Version nutzt.

crypto.randomUUID steht nur zur Verfügung wenn das Dokument über HTTPS geladen wird, wahrscheinlich funktioniert es deshalb in dem Fall nicht, da lokale Installation mit Laragon ohne SSL.

[derRenner]

crypto.randomUUID steht nur zur Verfügung wenn das Dokument über HTTPS geladen wird, wahrscheinlich funktioniert es deshalb in dem Fall nicht, da lokale Installation mit Laragon ohne SSL.

Sehr guter Input!
Dann werde ich nach dem Onlinestellen hier nochmals berichten

[Spooky]

crypto.randomUUID steht nur zur Verfügung wenn das Dokument über HTTPS geladen wird, wahrscheinlich funktioniert es deshalb in dem Fall nicht, da lokale Installation mit Laragon ohne SSL.

Aaah ok. Ja ich denke dann muss doch generell eine andere Funktion her. Muss ja eh nicht kryptografisch sicher sein.