Rock Solid Custom Elements installlieren.
Dann ein neues Frontend Modul im template Ordner erstellen
rsce_gallery_config.php
Code:
<?php
return array(
'label' => array('Bildergalerie',''),
'types' => array('content'),
'contentCategory' => 'texts',
'standardFields' => array(),
'fields' => array(
'multiSRC' => array (
'label' => array('Bilder und Ordner', 'Bitte wählen Sie ein oder mehrere Bilder oder einen Ordner aus. Wenn Sie einen Ordner auswählen, werden alle darin enthaltenen Bilder eingefügt.'),
'inputType' => 'standardField',
'eval' => array (
'isGallery' => true, 'multiple' => true, 'fieldType' => 'checkbox', 'orderField' => 'orderSRC', 'files' => true, 'mandatory' => true, 'extensions' => \Config::get('validImageTypes'),
),
),
)
);
und bspw. das HTML für rsce_gallery.html5
Code:
<div class="swiper-container pb-5" id="galerie">
<div class="swiper-wrapper">
<?php
$dataSorted_slider = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true));
foreach ( $dataSorted_slider as $data_slider ) {
$uuid_slider = $data_slider;
$objFile_slider = \FilesModel::findByUuid($uuid_slider);
$strPath_slider = $objFile_slider->path;
$mimeType_slider = mime_content_type($strPath_slider);
$fileType_slider = explode('/', $mimeType_slider)[0];
if ($image = $this->getImageObject($data_slider, array('', '', 7))) {
echo "<a class='swiper-slide' href='";
echo $strPath_slider;
echo "'>";
$this->insert('picture_gallery', $image->picture);
echo "</a>";
}
}
?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
$(document).ready(function () {
var swiper<?php echo $random; ?> = new Swiper("#galerie", {
slidesPerView: 2,
spaceBetween: 30,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
});
</script>