Image filtering for slideshow

Kirby 3 Solved ✅
1

Hello!

I’ve decided to try out Kirby for a small website project. However, as I’m a designer by trade, I’m really inexperienced with PHP.

I’ve downloaded the starter kit, played around, and made some modifications.
Now, for the home page, I want to implement a slider showing a selection of cover images from my projects. The images to be displayed are indicated with a toggle field in the album.yml blueprint:

toggle:
label: Featured
type: toggle

The PHP code in the home.php template looks like this:

		<?php foreach ($projektePage->children()->listed() as $album): ?>
		<?php if ($cover = $album->cover()): ?>
			<img class="slide" src="<?= $cover->url() ?>">
		<?php endif ?>
		<?php endforeach ?>

I struggle to implement the following:

  1. Return only the toggled cover images
  2. For the slider to work, the first img tag would need an additional class, like so:
<img class="slide visible">

How would I achieve this?
Any help much appreciated!

2

Can probably use the e() helper to check for the first album

<?php foreach ($projektePage->children()->listed() as $album): ?>
    <?php if ($cover = $album->cover()): ?>
        <img class="slide <?php e($album->first(), 'visible', '') ?> " src="<?= $cover->url() ?>">
    <?php endif ?>
<?php endforeach ?>

For the toggle field you will need to check the toggle value like this

Untested, but something like this should do it

<?php foreach ($projektePage->children()->listed() as $album): ?>
    <?php foreach($album->images() as $image): ?>
        <?php if($image->feature()->bool() === true): ?>
            <img class="slide <?php e($album->first(), 'visible', '') ?> " src="<?= $cover->url() ?>">
         <?php endif ?>
    <?php endforeach ?>
<?php endforeach ?>
1 Like
3

Thanks for your reply!

Unfortunately, it doesn’t do the trick — all the img tags now get the ‘visible’ class assigned to them.

Yes — problem is, I’m not sure how to incorporate this in the code above :sweat_smile:

4

see my editied post above

5

Hrmm… try this

<?php foreach ($projektePage->children()->listed() as $album): ?>
    <?php foreach($album->images() as $image): ?>
        <?php if($image->feature()->bool() === true): ?>
            <img class="slide <?php e($album->isFirst(), 'visible', '') ?> " src="<?= $cover->url() ?>">
         <?php endif ?>
    <?php endforeach ?>
<?php endforeach ?>
1 Like
6

Hmm — this returns nothing. Is it checking the right object? The toggle is assigned to the album as a whole, not to each individual image (i.e., in the album.yml blueprint, not in image.yml).

7

Ah ok so if ive understood you this should do it i think

<?php foreach ($projektePage->children()->listed() as $album): ?>   
    <?php if($album->feature()->bool() === true): ?>

        <?php if($album->first() === true): ?>
            <img class="slide visible" src="<?= $album->url() ?>">
        <?php else: ?>
            <img class="slide " src="<?= $$album->url() ?>">
        <?php endif ?>
          
    <?php endif ?>
<?php endforeach ?>
1 Like
8

Worth noting that you can shorten that by using filtering to get all the featured albums in the outer loop, saving a couple of lines of code there

1 Like
9

Ah ok so if ive understood you this should do it i think

Still nothing :thinking:

10

Change

<?php if($album->first() === true): ?>

<?php if($album->isfirst() === true): ?>

I think one returns a page object, the other a boolean

1 Like
11

No luck … Regarding the second line in your code: Is there such a thing as a feature() method? And shouldn’t it be toBool()? Sorry if I’m just typing nonsense …

12

Ahh of course, its the wrong name… i missred your blueprint above

you need

<?php if($album->toggle()->toBool() === true): ?>

Becuase you named the toggle field toggle, i used the label value by mistake :person_facepalming:

1 Like
13

Yay, the toggle selection works!

But in the img tags, I’m getting the URL for the albums, not for the image files. Here’s the correct code in case anyone looks this thread up:

<?php foreach ($projektePage->children()->listed() as $album): ?>
    <?php if($album->toggle()->bool() === true): ?>
        <?php if($album->isfirst() === true): ?>
            <img class="slide visible" src="<?= $album->cover()->url() ?>">
        <?php else: ?>
            <img class="slide " src="<?= $album->cover()->url() ?>">
        <?php endif ?>
    <?php endif ?>
<?php endforeach ?>

Many thanks for helping me out!!

14

No worries. To do it with filtering and a little less code…

<?php foreach ($projektePage->children()->listed()->filterBy('toggle', true) as $album): ?>   
    <?php if($album->isFirst() === true): ?>
        <img class="slide visible" src="<?= $album->cover()->url() ?>">
    <?php else: ?>
        <img class="slide " src="<?= $album->cover()->url() ?>">
    <?php endif ?>
<?php endforeach ?>

Just means you can take an if check out.

1 Like
15

Awesome, thanks!