GLightbox mit Bildunterschrift

[pandroid]

Hallo zusammen,

da „Lightcase“ als Lightbox-Erweiterung nicht mehr länger gepflegt wird, bin ich zu GLightbox gewechselt. Leider lässt sich hier nicht so komfortabel einstellen, dass die für das Bild hinterlegte Bildunterschrift auch in der Lightbox angezeigt werden soll.

Nach meiner Recherche im Netz hätte ich im Moment nur die Lösung, die Templates für Bilder anzupassen. Das würde ich aber gern vermeiden.

Gibt es eine Möglichkeit, das im JS-Template von GLightbox einzustellen?

[Spooky]

Evt. kannst du's mit einem der Events per JavaScript setzen. Ansonsten kannst du folgende Template Anpassung machen:

<!-- templates/image.html5 -->
<?php

if ($this->caption) {
  $this->attributes .= ' data-caption="'.Contao\StringUtil::specialcharsAttribute(strip_tags($this->caption)).'"';
}

?>
<?php $this->extend('image'); ?>

[pandroid]

Danke Spooky, für die superschnelle Antwort. Ich schau mir mal die Lösung über das Template an. Beim Javascript komme ich leider nicht weiter.

[Niels H]

Habe es mit folgender templates/js_glightbox.html5 umgesetzt:

<?php

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(){
  'use strict';
  document.querySelectorAll('a[data-lightbox]').forEach((element) => {
    if (!!element.dataset.lightbox) {
      element.setAttribute('data-gallery', element.dataset.lightbox);
      const caption = element.nextElementSibling;
      if (!!caption) {
        element.setAttribute('data-glightbox', 'title: '+caption.textContent);
      }
    }
  });
  GLightbox({
    selector: 'a[data-lightbox]',
    zoomable: false
  });
})();
</script>

[Bennie]

Das Problem interessiert mich auch gerade da ich gerne auf GLightbox umstellen möchte
@Niels H
Deine Lösung funktioniert jedoch bei mir leider nicht, es wird nach wie vor der "title" ausgegeben nicht aber der Inhalt der figcaption .

[Bennie]

Ok, es liegt daran dass ich das nicht mit dem Galerie-Element getestet habe .
Wie würde das für ein Bild Element funktionieren? Ich bekomme das nicht hin :-(

[Bennie]

War ja doch einfach, ich war nur blind - also wenn man Zeile 14 und 20 ausblendet dann geht's ja auch außerhalb der Galerie.

Seltsam ist, dass wenn man z.B erst ein Einzelbild hat welches mit der Lightbox geöffnet werden kann und danach ein weiteres oder eine Galerie , dann verhält sich die Lightbox so als wäre es eine zusammenhängende Galerie - sprich man kann komplett "durchklicken" .

Passiert aber nur wenn man das Einzelbild zuerst anklickt- umgekehrt nicht.

Kann das jemand nachstellen und mir ggf. sagen wie ich das unterbinden kann?

[Bennie]

Hab da leider noch keine Lösung gefunden und hätte auch noch eine weitere Frage.
Wie kann ich das mit einem Counter erweitern (also Bild 1 von x usw...) ?

Ich habe zwar dazu eine Lösung gefunden
https://github.com/biati-digital/gli...ment-537288375

aber ich habe Schwierigkeiten dass in der Erweiterung zu realisieren.

Das Script habe ich ins Template integriert aber anscheinend muss da noch was angepasst werden was ich übersehe

[tblumrich]

War ja doch einfach, ich war nur blind - also wenn man Zeile 14 und 20 ausblendet dann geht's ja auch außerhalb der Galerie.

Seltsam ist, dass wenn man z.B erst ein Einzelbild hat welches mit der Lightbox geöffnet werden kann und danach ein weiteres oder eine Galerie , dann verhält sich die Lightbox so als wäre es eine zusammenhängende Galerie - sprich man kann komplett "durchklicken" .

Passiert aber nur wenn man das Einzelbild zuerst anklickt- umgekehrt nicht.

Kann das jemand nachstellen und mir ggf. sagen wie ich das unterbinden kann?

Danke für die Lösung, hatte auch schon rumprobiert… ansonsten kann ich das Verhalten bestätigen … es wird bei mehreren Bildern oder Galerien immer komplett durchgeblättert über mehrere Inhaltselemente hinweg.
Irgendwo im Forum war das auch schonmal als Hinweis aufgetaucht … ohne Lösungsansatz leider.

[Bennie]

@tblumrich danke du bis der Erste der mir das mal bestätigt
Anscheinend wird die GLightbox nicht so häufig genutzt.
Daraus ergibt sich für mich die Frage was denn die anderen hier so nutzen oder einbauen, wenn sie nicht! die (Standard) colorbox nutzen?

[Spooky]

Danke für die Lösung, hatte auch schon rumprobiert… ansonsten kann ich das Verhalten bestätigen … es wird bei mehreren Bildern oder Galerien immer komplett durchgeblättert über mehrere Inhaltselemente hinweg.
Irgendwo im Forum war das auch schonmal als Hinweis aufgetaucht … ohne Lösungsansatz leider.

https://github.com/contao/contao/issues/4029

[Bennie]

Und was heißt das jetzt? Ich lese das so, dass es keine (einfache) Lösung gibt ??

[Spooky]

Dazu machst du am besten einen anderen Thread auf oder postest in einem bestehenden Thread, wo das Problem bereits behandelt wird. In diesem Thread geht es um die Caption.

[Bennie]

@spooky ok - hab mal hier weitergemacht

[lebleucleu]

Standardmäßig fügt die mitgelieferte js_glightbox.html5 den Titel aus den Metadaten ein, mit diesem Ergebnis:

<div class="gdesc-inner">
  <h4 class="gslide-title" id="gSlideTitle_0">Dies ist der Titel aus den Metadaten</h4>
</div>

Bei der Umsetzung, die Niels H verwendet, wird dieses HTML erzeugt:

<div class="gdesc-inner">
  <h4 class="gslide-title" id="gSlideTitle_0">Dies ist der Untertitel (Bildunterschrift) aus den Metadaten</h4>
</div>

Der Titel wird nicht mehr angezeigt und in der H4-Überschrift steht anstelle des Titels die Bildunterschrift.

Auf der Beispiel-Website https://biati-digital.github.io/glightbox/#examples sieht der Quelltext zu "Images with Description" so aus:

<div class="gdesc-inner">
  <h4 class="gslide-title" id="gSlideTitle_0">Description Bottom</h4>
  <div class="gslide-desc" id="gSlideDesc_0">You can set the position of the description <a href="http://google.com">with a link to Google</a></div>
</div>

Weiß evtl. jemand, wie der Code in js_glightbox.html5 angepasst werden muss, damit sowohl der Titel als auch die Bildunterschrift ausgegeben werden?

[delirius]

Bei einer Contao 5 Installation mit Twig kannst du im Link das Attribute data-description ergänzen. Das Attribute wird von GLightbox übernommen.

{% extends "@Contao_ContaoCoreBundle/content_element/image.html.twig" %}

{% block media_link %}
  {% set link_attributes = attrs(figure.linkAttributes(true)|default)
  .setIfExists('data-description', figure.hasLightbox and figure.hasMetadata ? figure.metadata.caption : null)
%}
{{ parent() }}
{% endblock %}

<div class="gdesc-inner">
    <h4 class="gslide-title" id="gSlideTitle_0">Titel</h4>
    <div class="gslide-desc" id="gSlideDesc_0">Beschreibung</div>
</div>

[lebleucleu]

Besten Dank für die Erklärung und den Twig-Code! Er funktioniert sowohl im Bild-Element als auch im Galerie-Element.

Solche Code-Beispiele sind überaus hilfreich für Nicht-Entwickler und Twig-Neulinge, die sich mit den Twig-Templates näher vertraut machen wollen.

[lebleucleu]

Es gibt Erweiterungen, die (noch) nicht auf Twig-Templates basieren.

Beispielsweise steht in der Erweiterung "bwein-net/contao-gallery" im Template "album_full.html5":

<div class="ce_gallery block">
  <?php $this->insert('gallery_default', $this->arrData); ?>
</div>

Die GLightbox zeigt mit der alten Galerie nur den Titel an.

<div class="gdesc-inner">
  <h4 class="gslide-title" id="gSlideTitle_0">Dies ist der Titel aus den Metadaten</h4>
</div>>

Der Twig-Code zeigt hier keine Wirkung. In der Developer Documentation von Contao steht etwas von "Legacy-Interoperabilität", was sich für mich so anhört, als könnte dies vielleicht ein Ansatz sein. Ob dies so ist, dazu fehlt mir jedoch das Fachwissen.

Ich testete auch den

<!-- templates/image.html5 -->
<?php

if ($this->caption) {
  $this->attributes .= ' data-caption="'.Contao\StringUtil::specialcharsAttribute(strip_tags($this->caption)).'"';
}

?>
<?php $this->extend('image'); ?>

von Spooky, den ich in eine templates/image.html5 einfügte. Das zeigte leider ebenfalls keine Wirkung.

Gibt es evtl. für einen solchen Anwendungsfall in Contao 5.3 eine Möglichkeit, sowohl Titel als auch Bildunterschrift in der GLightbox auszugegeben?

[delirius]

Das obere Beispiel basiert darauf, dass GLightbox das Data-Attribute «data-description» übernimmt.

Ich kenne die Erweiterung bwein-net/contao-gallery nicht. Aber falls das template/image.html5 greift, kannst du versuchen das Data-Attribute auf «data-description» zu ändern.

  $this->attributes .= ' data-description="'.Contao\StringUtil::specialcharsAttribute(strip_tags($this->caption)).'"';

[lebleucleu]

Magic! Das funktioniert
Vielen Dank!