Xirdion / contao-photoswipe-bundle

Adding support for Photoswipe.js v5 to Contao
3 stars 1 forks source link

Support custom elements #1

Closed Xirdion closed 2 years ago

Xirdion commented 2 years ago

Elements that have been created with Rock Solid Custom Elements should be supported. Within the template the image must be added with $this->insert('image', $imageData); $imageData must contain some specific values so the listeners can handle the template correctly.

Xirdion commented 2 years ago

To enable the Photoswipe lightbox for custom elements, you must add some additional parameters to the image-function.

// Uuid of the image
$imageSrc = '';

// Add some extra image data
$imageData = [
    'fullsize' => true,
    'alt' => 'custom alt text',
    'caption' => 'custom caption',
];

// Create a \stdClass of the given image source and some additional parameters
$image = $this->getImageObject($imageSrc, ['0','0', '_ce_team'], null, null, $imageData);

if (null !== $image) {
    // Insert the image template with the generated image data
    $this->insert('image', json_decode(json_encode($image), true, 512, JSON_THROW_ON_ERROR));
}
JensenR commented 6 months ago

How have i to implementate that in my template?

<?php
use Contao\System;
use Symfony\Component\HttpFoundation\Request;
if (System::getContainer()->get('contao.routing.scope_matcher')
    ->isBackendRequest(System::getContainer()->get('request_stack')->getCurrentRequest() ?? Request::create(''))
)
?>
<div class="gallery">

    <?php foreach ($this->cuGa as $item): ?>

<section class="<?php echo $this->class ?> block"<?php echo $this->cssID ?>>

<section class="ce_accordionStart ce_accordion block">
<div class="toggler"><?= $item->datum?><br><span class="sklein"><?= $item->title ?></span></div>
<div class="accordion">
<div>

    <div class="cuGaBox">

        <h4><?= $item->title ?></h4>
        <?= $this->figure($item->mainimage, '18'); ?>

        <?= $item->description ?>

       <div class="rs-columns ce_rs_columns_start">
        <?php foreach ($item->images as $img): ?>
        <div class="rs-column -large-col-4-1 -medium-col-4-1 -small-col-4-1">
            <a href="<?= \Contao\FilesModel::findByUuid($img)->path; ?>" data-lightbox="bild-<?php echo $item->datum ?>">
        <?= $this->figure($img, '17'); ?>
            </a></div>
        <?php endforeach; ?>
        </div>
        </div></div></div></section>

    </section>

    <?php endforeach ?>

</div>
</div>