Get your ticket! JETZT Ticket sichern! Contao Konferenz am 07. & 08. Juni 2018 & Contao College am 06. Juni 2018 im WYNDHAM GRAND Conference Center in Salzburg, Österreich
Ergebnis 1 bis 7 von 7

Thema: Meta-Daten von Bildern in der Lightbox anzeigen

  1. #1
    Contao-Nutzer
    Registriert seit
    10.04.2018.
    Beiträge
    3

    Standard Meta-Daten von Bildern in der Lightbox anzeigen

    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

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.459
    User beschenken
    Wunschliste

    Standard

    Du kannst diese Daten im Template holen, falls sie nicht schon angeboten werden. Schau mal mit diesem Code im Template nach.
    PHP-Code:
    <?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-Code:
    <?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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Nutzer
    Registriert seit
    10.04.2018.
    Beiträge
    3

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Du kannst diese Daten im Template holen, falls sie nicht schon angeboten werden. Schau mal mit diesem Code im Template nach.
    PHP-Code:
    <?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

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.459
    User beschenken
    Wunschliste

    Standard

    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.
    HTML-Code:
    <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:
    HTML-Code:
    <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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  5. #5
    Contao-Nutzer
    Registriert seit
    10.04.2018.
    Beiträge
    3

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    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-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

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.459
    User beschenken
    Wunschliste

    Standard

    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.
    PHP-Code:
    ...
            $(
    this).colorbox({
              
    // Put custom options here
               
    title: function(){
                return $(
    this).attr('data-rsts-name') + ' / ' + $(this).attr('class') + ' / ' + $(this).attr('title') + ' / ' + $(this).attr('href');
              },
              
    loopfalse,
    ... 
    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:+...".
    Geändert von Andreas (16.04.2018 um 16:28 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.459
    User beschenken
    Wunschliste

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •