Zitat von
Spooky
Ungetestet. So oder ähnlich könnte man das machen.
Vielen Dank Spooky. Ungetestet hat funktioniert 
.
Hier mal meine modifizierte gallery_default.html5 Datei aus Contao 4.4.8:
HTML-Code:
<div class="fleximages_<?= $this->id; ?> flex-images" itemscope itemtype="http://schema.org/ImageGallery">
<?php foreach ($this->body as $class=>$row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<?php list($width, $height, $type, $attr) = getimagesize($col->src); $col->picture['attributes'].= ' data-w="'.$width.'" data-h="'.$height.'"'; ?>
<?php if ($col->href): ?>
<a class="item" href="<?= $col->href ?>"<?= $col->attributes ?> data-w="<?= $width ?>" data-h="<?= $height ?>" <?php if ($col->linkTitle) echo ' title="' . $col->linkTitle . '"'; ?> itemprop="contentUrl" itemscope itemtype="http://schema.org/ImageObject">
<?php $this->insert('picture_default', $col->picture); ?>
</a>
<?php else: ?>
<figure class="image_container item" data-w="<?= $width ?>" data-h="<?= $height ?>" <?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?> itemscope itemtype="http://schema.org/ImageObject">
<?php $this->insert('picture_default', $col->picture); ?>
</figure>
<?php endif; ?>
<?php if ($col->caption): ?>
<figcaption class="caption" itemprop="caption"><?= $col->caption ?></figcaption>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<?php { $GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/theme/plugins/jQuery-flexImages-master/jquery.flex-images.css">'; } ?>
<script src="files/theme/plugins/jQuery-flexImages-master/jquery.flex-images.js"></script>
<script> $('.fleximages_<?= $this->id; ?>').flexImages({rowHeight: <?= $height ?>}); </script>
Der Pfad zu den Dateien jquery.flex-images.css und jquery.flex-images.js muss natürlich ggf. angepasst werden und jQuery muss aktiviert sein. In der Galerie muss die Bildgröße auf Proportional gestellt und nur eine Höhe eingetragen werden. Beide Dateien können hier heruntergeladen werden.
Gallerien, die sich der Breite anpassen...
Zitieren
Lesezeichen