Meta-Daten von Bildern in der Lightbox anzeigen

[rmfberlin]

Hallo,
ich hatte nur eine ähnliche Anfrage zu Contao 2.x gefunden, die nicht recht befriedigend war. Habe 4.4.x LTS installiert.

In der Dateiverwaltung kann man den Bildern einen Titel, einen Alternativen Text und eine Bildunterschrift mitgeben.
Wie kann ich diese drei Werte auch in der Lightbox anzeigen lassen?

Vielen herzlichen Dank!
Herzliche Grüße
Rainer

[Andreas]

Du kannst diese Daten im Template holen, falls sie nicht schon angeboten werden. Schau mal mit diesem Code im Template nach.

<?php $this->showTemplateVars() ?>

Ansonsten kannst du sie über ein FilesModel holen https://docs.contao.org/books/cookbook/de/Models.html. Irgendeinen eindeutigen Wert deines Files benötigst du dazu natürlich. Hier mal ein Beispiel, wenn du die UUID hast.

<?php

$myFilesModel = \FilesModel::findByUuid($myUuid);

$fileMetaData = $myFilesModel->meta;

$fileMetaData = deserialize($fileMetaData);

$feLanguage = $GLOBALS['TL_LANGUAGE'];

$fileCaption = $fileMetaData[$feLanguage]['caption'];

// Einzeiler (ungetestet):

$fileCaption = deserialize(\FilesModel::findByUuid($myUuid)->meta)[$GLOBALS['TL_LANGUAGE']]['caption'];

?>

Welche Möglichkeiten deine Lightbox besitzt um irgendwelche Textausgaben zu überlagern, liegt an deiner Lightbox und sollte in der Doku deiner Lightbox herausgefunden werden.

[rmfberlin]

Du kannst diese Daten im Template holen, falls sie nicht schon angeboten werden. Schau mal mit diesem Code im Template nach.

<?php $this->showTemplateVars() ?>

...
Welche Möglichkeiten deine Lightbox besitzt um irgendwelche Textausgaben zu überlagern, liegt an deiner Lightbox und sollte in der Doku deiner Lightbox herausgefunden werden.

Danke für die prompte Antwort. Nur in welchem Template? Für die Lightbox (m.E. die Standard Lightbox von Contao) kann ich kein Template finden.

Mit den Web-Entwickler-Tools kann man sehen, dass es eine ID "colorbox" und im Folgenden IDs beginnend mit "cbox..." wahrscheinlich per Javascript erzeugt werden. In meinem Fall wohl mit javascript im TAO-Theme von Rocksoild-Themes. An der Contao-Demo kann man aber sehen, dass der gleiche Code für die Lightbox erzeugt wird. Müsste also doch die contao-eigenen Lightbox sein.

Ich kann keine Dokumentation finden, die erklärt, wo die Meta-Daten der Dateiverwaltung abgelegt werden und wo ich dann (in JavaScript?) die Ausgabe dieser Daten aufrufen soll.

BTW: Werden diese Bild-Meta-Daten eigentlich auch irgendwo von den Suchmaschinen ausgelesen?

Herzliche Grüße
Rainer

[Andreas]

Das Template für die Colorbox wäre j_colorbox, welches man im Layout auswählt. Neues Template erstellen auf Grundlage von j_colorbox, umbenennen nach z.B. j_colorbox-mod und dann im Layout auswählen.

Contao bietet 3 Lightboxen an. Sie sind nicht Contao eigen, sondern Plugins von Fremdanbietern. http://www.jacklmoore.com/colorbox/

Die anderen Lightboxen wären die Mediabox oder die Slimbox, welche MooTools voraussetzen. Colorbox ist IMHO die richtige Wahl. Siehe auch hier https://github.com/contao/core-bundle/issues/1443.

Die Metadaten stehen in der DB in tl_files.meta als serialisiertes Array. Deswegen auch deserialize() um daraus wieder ein PHP-Array zu machen.

Von Suchmaschinen wird das ausgelesen, was sich im HTML-Code deiner Website befindet.

Eine Lightbox sucht gewöhnlich nach speziellen Links, in unserem Fall nach Links mit dem Attribut data-lightbox.

<a href="foobar.jpg" data-lightbox="foo">open in lightbox</a>

Das Javascript einer Lightbox kann (wenn überhaupt) nur etwas mit Daten unternehmen, welche bereits im HTML vorhanden sind. Beispiel:

<a href="foobar.jpg" data-lightbox="foo" data-caption="image caption">open in lightbox</a>

Wenn du so etwas benötigst, dann musst du das entsprechende Template anpassen, welches diesen Code erzeugt, z.b. gallery_default.

Zeige bitte einen Link zu deiner Seite und erkläre genau, welchen Wert du wo sehen möchtest.

[rmfberlin]

Das Template für die Colorbox wäre j_colorbox, welches man im Layout auswählt. Neues Template erstellen auf Grundlage von j_colorbox, umbenennen nach z.B. j_colorbox-mod und dann im Layout auswählen.

Wenn du so etwas benötigst, dann musst du das entsprechende Template anpassen, welches diesen Code erzeugt, z.b. gallery_default.

Zeige bitte einen Link zu deiner Seite und erkläre genau, welchen Wert du wo sehen möchtest.

Danke für die ausführliche Hilfe. Die Website an der ich arbeite ist unter https://contao.vorwerk-berlin.de/ zu finden. Im Quelltext findet man den Titel des Bildes und den alternativen Text
Oben läuft ein Slider. Wenn man auf ein Bild klickt, wird die Großansicht geöffnet und nur der Titel des Bildes angezeigt, wie er für das einzelne Bild im Rocksolid Slider eingetragen wurde. Dieser Titel überschreibt offensichtlich den Titel aus der Dateiverwaltung.

In der Dateiverwaltung kann man einem Bild auch eine Bildunterschrift zuordnen. Diese erscheint nirgends im Quelltext. Es wäre ein großer Fortschritt, wenn die Bildunterschrift als Bildunterschrift in der Lightbox erscheinen würde. Das wäre m.E. auch als ein Standard-feature in Contao zu sehen, oder?

Im template j_colorbox.html5 erscheinen nur diese wenigen Zeilen Code:

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';

?>

<script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script>
<script>
  jQuery(function($) {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop: false,
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
    });
  });
</script>

Hier kann man wohl eingene Optionen hinterlegen, leider weiß ich nicht wie.

Danke nochmals!
Herzliche Grüße
Rainer

[Andreas]

Default nimmt die Colorbox das TITLE-Attribut für die Anzeige des Titels. Dies kann man über die Optionen http://www.jacklmoore.com/colorbox/ in dem j_colorbox-Template ändern.

...
        $(this).colorbox({
          // Put custom options here
           title: function(){
            return $(this).attr('data-rsts-name') + ' / ' + $(this).attr('class') + ' / ' + $(this).attr('title') + ' / ' + $(this).attr('href');
          },
          loop: false,
... 

Der Rocksolid-Slider ist ja etwas komplex, deswegen kann ich hier erstmal nichts näheres dazu sagen. Aber wenn du ein Feld hast, wo du einen Bildtitel eingeben kannst, dann sollte dies so sein, dass wenn das Feld leer gelassen wird, dann im Template der Titel von den Metadaten ausgegeben wird. Wenn dem nicht so ist, oder wenn dem so ist und du möchtest aber die Caption, dann muss das entsprechende Template (nicht das j_colorbox), welches im FE den Slider generiert angepasst werden.

Siehe auch hier die Beispiele zur Anpassung eines j_colorbox-Templates. https://github.com/contao/core-bundle/issues/1443

ps Benutze keine Leerzeichen in den Dateinamen der Bilder und anderen Dateien. Escape das Pluszeichen bei deinen Links mit href="tel:+...".

[Andreas]

Achtung! Der RS-Slider initialisiert die Colorbox nochmal neu, da die Lightboxlinks zum Zeitpunkt wo j_colorbox ausgeführt wird noch nicht vorhanden sind. Siehe auch hier https://community.contao.org/de/show...l=1#post453681

Deswegen musst du die Colorbox-Optionen in dem Slidertemplate anpassen, so ähnlich wie in dem verlinkten Post gezeigt.

[rmfberlin]

Erst einmal vielen dank für die hilfreichen Antworten.

Im Template j_colorbox.html5 können hinter

title: function(){

eigene Werte ausgegeben werden

return $(this).attr('data-rsts-name') + ' / ' + $(this).attr('class') + ' / ' + $(this).attr('title') + ' / ' + $(this).attr('href');

Die colorbox gibt jedoch nur den Titel aus, wie er beim einzelnen Slide im RockSloid Slider hinterlegt wurde.
$(this).attr('title') greift jedoch auf den Titel des einzelnen Slide zu und nicht auf den Titel der Meta-Daten der Dateiverwaltung.

Mir gelingt es nicht auf die Metadaten der Dateiverwaltung, nämlich Titel, alternativer Text und Bildunterschrift zuzugreifen.
Gibt man die Daten im Template aus, sind "altContent" und "rsts_captions" und "useCaption" leer oder null.

Wie kann ich die Metadaten der Dateiverwaltung - wie im Bild gezeigt - erreichen und ausgeben?
Bildschirmfoto 2018-07-22 um 08.26.48.png

Im Seitenquelltext ist zu erkennen, dass wenigstens das alt-Attribut ausgegeben wird. Wie kann ich wenigstens darauf zurückgreifen?

Vielen herzlichen Dank!
Herzliche Grüße
Rainer

[Andreas]

Wird wahrscheinlich das sein, worauf ich in #7 bereits hingewiesen habe. Um das zu untersuchen bräuchte man einen Link auf die Seite.

[rmfberlin]

Wird wahrscheinlich das sein, worauf ich in #7 bereits hingewiesen habe. Um das zu untersuchen bräuchte man einen Link auf die Seite.

https://contao.vorwerk-berlin.de/vibratec-clean-Teppichreinigung-Teppichbodenreinigung-ohne-Trocknungszeit.html Um die Seite vor den Suchmaschinen noch zu verbergen, liegt ein Verzeichnisschutz drauf (contao, contao).

Statt des Titel der Slides »vibratec-clean | optimale regelmäßige Unterhaltsreinigung für Teppichboden ohne Trocknungszeit...« soll »Ein Titel«, »Ein alternativer Text« und »Eine Bildunterschrift« aus der Dateiverwaltung erscheinen.

Die Lösung unter #7 überfordert mich leider.

Rocksolid hat mir geantwortet

Auf die Daten der Bilder kann im *rsts_default.html5*-Template folgendermaßen zugegriffen werden:
$slide['image']->caption
$slide['image']->picture['alt']
$slide['image']->href
$slide['image']->linkTitle

Diese Werte haben im Template j_colorbox.html5 nach meinen stolpernden Versuchen jedoch keine Wirkung. Oder ich habe nicht den richtigen Weg für den Zugriff gefunden.

Im Rocksolid Slider kann kein alt-Atrribut eingetragen werden, so dass im Seitenquelltext das alt-Atrribut leer bleibt. Für SEO wohl nicht gerade ideal.

Danke für die Hilfe bis hierher!

[Andreas]

Ok, hier also nochmal extra für dich.

"vibratec-clean | optimale regelmäßige Unterhaltsreinigung für Teppichboden ohne Trocknungszeit..." habe ich auf der Seite nicht gefunden.

Ich habe gesehen, dass du in der Lage bist, das j_colorbox Template anzupassen.

Was du jetzt noch machen musst sind 2 Sachen.

1. Das j_colorbox Template greift nicht im Slider. Die Colorbox-Konfiguration für Links innerhalb des Sliders findest du in einem Template des Sliders.

...
// Fix missing lightbox links
$(function() {
  if (!$.fn.colorbox) {
    return;
  }
  // colorbox config
  var lightboxConfig = {
    loop: false,
    rel: function() {
      return $(this).attr('data-lightbox');
    },
    maxWidth: '95%',
    maxHeight: '95%'
  };
  // colorbox config - END
  ... 

Hier musst du also die Anpassung vornehmen, damit aus den Links entsprechende Attribute abgegriffen werden. (Templatename weiß ich grad nicht auswendig.)

2. Die Attributwerte, welche du per JS aus den Links im Slider abgreifen möchtest, müssen in diesen Links natürlich auch vorhanden sein, z.B.

<a data-caption="my caption" data-alt="my alt text" ...

Diese Werte kannst du, so wie Rocksolid es beschrieben hat, über das Ausgabetemplate rsts_default in die Links bringen.

Bringe zuerst deine gewünschten Werte in die Links und prüfe im FE mit den Devtools, ob sie dort auch ankommen. Validiere das HTML um sicherzustellen, dass du keinen Fehler eingebaut hast.

Sind alle Attribute mit den gewünschten Werten in den Links vorhanden, kannst du dich an die Colorbox-Config machen, um diese Werte für deinen zusammengesetzten Titel abzugreifen.

ps Bei Contao 4 muss man in einem Core CE Typ Text/Bild u.a. darauf achten, dass der Haken "Metadaten überschreiben" nicht angehakt ist. Bekommst du die Daten aus der Dateiverwaltung partout nicht ins Template, dann würde ich mir dies gerne mal kurz im BE ansehen.