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
Lesezeichen