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

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.

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 (0 !== 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($href, PATHINFO_EXTENSION);

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

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


---

;)

Zitat:

---

Zitat von Spooky

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 :D