hey there…
i’m using Zero One-template by @mrfreedom with the following code i made a “staff/member”-like block
<?php // using the `toStructure()` method, we create a structure collection
if($data->gridShuffle() == "true") {
$items = $data->cards()->toStructure()->shuffle();
} else {
$items = $data->cards()->toStructure();
}
$gettags = $items->pluck('tags', ',', true);
?>
<section class="uk-section<?= $data->sectionSize() ?><?= $data->sectionColor() ?><?= $data->sectionRemovePadding() ?>">
<div class="uk-container<?= $data->gridWidth() ?>" uk-filter="target: .js-filter">
<div class="uk-grid uk-grid-divider uk-child-width-auto <?= $data->cardGap() ?>" uk-grid>
<?php if(!empty($gettags)): ?>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li class="uk-active" uk-filter-control><a href="#">Alle</a></li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<?php foreach ($gettags as $tag): ?>
<li uk-filter-control="[data-tags*='<?= $tag ?>']"><a href="#"><?= $tag ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
</div>
<ul class="js-filter <?php e($data->cardsDivider() == "true", ' uk-grid-divider') ?><?= $data->griddColumns() ?><?= $data->gridsColumns() ?><?= $data->gridmColumns() ?><?= $data->gridlColumns() ?><?= $data->gridxlColumns() ?>" uk-grid="masonry: <?= $data->gridMasonry() ?> <?php e($data->cardParallax() == "true", '; parallax: 90') ?>">
<?php
// we can then loop through the entries and render the individual fields
foreach ($items as $item): ?>
<li data-tags="<?= $item->tags() ?>">
<div class="uk-card <?= $data->cardColor() ?>">
<div class="uk-card-media-top uk-inline-clip uk-transition-toggle">
<?php if($mediaImage1 = $item->mediaImage1()->toFile()): ?><img data-src="<?= $mediaImage1->url() ?>" width="<?= $mediaImage1->width() ?>" height="<?= $mediaImage1->height() ?>" alt="<?= $mediaImage1->alt() ?>" uk-img><?php endif ?>
<?php if($mediaImage2 = $item->mediaImage2()->toFile()): ?><img data-src="<?= $mediaImage2->url() ?>" width="<?= $mediaImage2->width() ?>" height="<?= $mediaImage2->height() ?>" alt="<?= $mediaImage2->alt() ?>" class="uk-transition-scale-up uk-position-cover" uk-img><?php endif ?>
</div>
<?php if($item->quoteText()->isNotEmpty()): ?>
<div class="uk-card-body uk-padding-small">
<em>"<?= $item->quoteText()->kirbytextinline() ?>"</em>
</div>
<?php endif ?>
<?php if($item->nameText()->isNotEmpty()): ?>
<div class="uk-card-footer uk-padding-small">
<p><strong><?= $item->nameText()->kirbytextinline() ?></strong><br />
<?php if($item->descriptionText()->isNotEmpty()): ?>
— <em><?= $item->descriptionText()->kirbytextinline() ?></em></p>
<?php endif ?>
</div>
<?php endif ?>
</div>
</li>
<?php endforeach ?>
</ul>
</div>
</section>
as you can see, i try to use ‘uk-img’ for getting lazy-load the images on the cards…
question: did i something wrong? or is lazy loading not usable together with filtering?