Contao-Camp 2024
Ergebnis 1 bis 4 von 4

Thema: Angepasstes Gallery-template $col->href

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard Angepasstes Gallery-template $col->href

    Hallo,

    ich habe ein angepasstes Galerie-template, in dem ich (mit Auslesen der Dateiendung von $col->href) eine zusätzliche Klasse einfüge
    HTML-Code:
    <li class="grid-item media-is-<?= pathinfo(($col->href), PATHINFO_EXTENSION); ?>">
    Dies bringt die Klasse 'media-is-jpg' solange es sich um ein Bild handelt.
    Nun habe ich in der Galerie Vorschaubilder eingefügt, die über einen Link ein Video eingefügt bekommen: Dateiverwaltung > Metadaten > Link > Videolink eingefügt
    Beim Klick auf das Vorschaubild öffnet sich auch wie gewünscht das Video (in meinem Fall in der Lightbox)

    Aber sobald ich ein Video verlinke, wird nur 'media-is-' ausgegeben. Ziel wäre hier ein 'media-is-mp4'.
    (ich möchte diese Klasse verwenden, damit ich in der Galerie dieses Vorschaubild gesondert stylen kann und damit hinweise, dass es sich hier um ein Video handelt)

    HTML im Frontend mit einem Bild:
    HTML-Code:
    <li class="grid-item media-is-jpg" style="position: absolute; left: 75.2%; top: 453.833px;">
    <figure class="image_container">
    <a href="files/oneo/img/foh-galerie/camp-2020/camp-4/1-sonntag/16%20%282%29.jpg" data-lightbox="lb3657" data-caption="" data-fancybox="3657">
    <img src="files/oneo/img/foh-galerie/camp-2020/camp-4/1-sonntag/16%20%282%29.jpg" alt="" itemprop="image" width="768" height="1024">
    </a>
    </figure>
    </li>
    HTML im Frontend mit einem Video Link:
    HTML-Code:
    <li class="grid-item media-is-" style="position: absolute; left: 56.4%; top: 455.317px;">
    <figure class="image_container">
    <a href="files/oneo/img/foh-galerie/camp-2020/camp-4/1-sonntag/6.mp4" target="_blank" data-caption="" data-fancybox="3657">
    <img src="files/oneo/img/foh-galerie/camp-2020/camp-4/1-sonntag/test.jpg" alt="" itemprop="image" width="397" height="701">
    </a>
    </figure>
    </li>
    Ist '$col->href' hier falsch? Falls ja, warum? Bzw. welche Variable wäre richtig?

    Mein template:
    PHP-Code:
    <ul class="cols_<?= $this->perRow ?> grid" itemscope itemtype="http://schema.org/ImageGallery">
      <li class="grid-sizer"></li>
        <?php foreach ($this->body as $class => $row): ?>
          <?php foreach ($row as $col): ?>
            <?php if ($col->addImage): ?>
              <!-- <li class="<?= $class ?> <?= $col->class ?> grid-item"> -->
              <li class="grid-item media-is-<?= pathinfo(($col->href), PATHINFO_EXTENSION); ?>">            
                <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                  <?php if ($col->href): ?>
                    <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?> data-caption="<?= $col->caption ?>" data-fancybox="<?= $this->id ?>"><?php $this->insert('picture_default'$col->picture); ?></a>
                  <?php else: ?>
                    <?php $this->insert('picture_default'$col->picture); ?>
                  <?php endif; ?>
                  <?php if ($col->caption): ?>
                    <figcaption class="caption"><?= $col->caption ?></figcaption>
                  <?php endif; ?>
                </figure>
              </li>
            <?php endif; ?>
          <?php endforeach; ?>
        <?php endforeach; ?>
      </ul>

      
      <script>
        // init Isotope after all images have loaded
        var $grid = $('.grid').imagesLoaded( function() {
          $grid.isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            masonry: {
              columnWidth: '.grid-sizer'
            }
          });
        });
        </script>
    Link zur Aktivseite - Gleich unter "Sonntag - 1.Tag - Herzlich Willkommen" das Bild mit Jungen vor dem 'Ferien ohne Handicap'-Rollup ist ein Video
    Grüsse
    Bernhard


  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Wie hast du den Link eingefügt? Nachdem das ein Link auf eine "interne" Datei ist: hast du evt. einen Insert Tag verwendet? Dann funktioniert das so natürlich nicht. Du müsstest den Insert Tag vorher replacen lassen.

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Statt einer Template Anpassung würde ich es übrigens so machen:
    PHP-Code:
    // src/EventListener/GalleryTemplateListener.php
    namespace App\EventListener;

    use 
    Contao\Controller;
    use 
    Contao\CoreBundle\ServiceAnnotation\Hook;
    use 
    Contao\Template;

    /**
     * @Hook("parseTemplate")
     */
    class GalleryTemplateListener
    {
        public function 
    __invoke(Template $template): void
        
    {
            if (
    !== stripos($template->getName(), 'gallery_')) {
                return;
            }

            if (!\
    is_array($template->body)) {
                return;
            }

            foreach (
    $template->body as &$row) {
                foreach (
    $row as &$col) {
                    if (empty(
    $col->href)) {
                        continue;
                    }

                    
    $href Controller::replaceInsertTags($col->href);
                    
    $ext pathinfo($hrefPATHINFO_EXTENSION);

                    if (empty(
    $ext)) {
                        continue;
                    }

                    
    $col->class .= ' ext-'.$ext;
                }
            }
        }


  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Wie hast du den Link eingefügt? Nachdem das ein Link auf eine "interne" Datei ist: hast du evt. einen Insert Tag verwendet? Dann funktioniert das so natürlich nicht. Du müsstest den Insert Tag vorher replacen lassen.
    Danke dir schon mal!
    Ja, ist direkt über die Dateiauswahl gewählt worden ... also ein Insert Tag {{file::blablabla-irgendwas-nummer}}
    Setze ich den direkten link ein 'files/oneo/img/foh-galerie/camp-2020/camp-4/1-sonntag/6.mp4', dann klappt das auch

    Aber, ich werde das dann die Tage noch über deinen best-practice-way einfügen, sodass das auch noch seine Richtigkeit bekommt
    Grüsse
    Bernhard


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
  •