Masonry Gallery: Bildtitel oder andere Metadaten in Popup anzeigen &

[eblick]

Wie kann das isotope Template geändert werden, dass z.B. Bildtitel im Popup ausgegeben werden?

Weiterhin wäre für künftige Templates die WEBP Bilder unterstützt werden könnten. Ich habe diese aktuell manuell über

$col->picture['sources']['0']['src']

ausgegeben.

[Tim]

Die Galerie unterstützt die Meta-Daten der Bilder aus der Dateiverwaltung.

[eblick]

Beim Popup erscheint hier nichts in diesem Template gallery_default_isotope.html5
Metadaten sind eingerichtet.
Bei Mouse-Over sind die Daten sichtbar im Thumb. Bei Lightbox nicht.

Und die Thumbbilder sind alle jpg und nicht WEBP

[Tim]

Mhh... ich hab hier den alt. Text in der LB.
---
Contao erstellt die Thumbnails. Ich nehme an in diesem Prozess wird der Bildausschnitt konvertiert. Ist das Originalbild, das in der LB geöffnet wird, noch .webp?

[eblick]

Ja, Alt-Attribut wird angezeigt, ich will Bildunterschrift und -Titel nutzen.

[Tim]

Ja, Alt-Attribut wird angezeigt, ich will Bildunterschrift und -Titel nutzen.

Titel wird genutzt, wenn es keinen alt. Text gibt.

Hat die Lightbox/Colorbox überhaupt eine Bildunterschrift Funktion bzw. Ausgabe? Da muss glatt mal googlen

[Tim]

Here you go:

Basiert auf dem Eintrag im Contao-Forum, ist aber etwas getuned für die zusätzliche Höhenberechnung.

EX: j_colorbox

 [COLOR=#333333][SIZE=11px] <?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
$GLOBALS['TL_JAVASCRIPT'][] = TL_ASSETS_URL .'assets/colorbox/js/colorbox.min.js'.(\PCT\SEO::getProtocol() == 'http2' ? '' : '|static');
?>
<script>
jQuery(document).ready(function()  {
    jQuery('a[data-lightbox]').map(function()
    {
      jQuery(this).colorbox(
      {
        // Put custom options here
        loop: false,
        rel: jQuery(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
   });

    jQuery(document).bind('cbox_complete', function(e)
    {
        var text = jQuery.colorbox.element().next('.caption').text();
        var caption = jQuery('#cboxBottomLeft').append('<div id="cboxCaption">'+text+'</div>');
        jQuery('#colorbox').height( jQuery('#colorbox').height() + caption.height()  );
    });

  });
</script>
 [/SIZE][/COLOR]

customize.css

#cboxWrapper {height: inherit !important;}

[Tim]

Ich mach da noch einen Thread im Vorlagen-Pool draus.