Sorting only the two images found within subpage's child folder

Kirby 2 Solved ✅
1

I have a blog ($page) that directs to an article template ($member), with which lies two images (01.jpg and 02.jpg) along with their sorting files (01.jpg.txt and 02.jpg.txt).

I successfully overlapped these two images using the twentytwenty js drag slider code, but now want to display multiple instances of this in a gallery. I’m trying to figure out why my code isn’t letting that happen:

    <div class="container">
      <div class="columns is-multiline gallery-container">
        <?php
        foreach($page->children()->visible() as $member): ?>
        <div id= "container1" class= "twentytwenty-wrapper">
          <div class= "twentytwentycontainer">
            <img class = "twentytwenty-before" src="<?=$member->images()->sortBy('sort', '1')->url() ?>" style="clip: rect(0px, 800px, 800px, 0px);"/>
            <img class = "twentytwenty-after" src="<?=$member->images()->sortBy('sort', '2')->url() ?>"/>
          </div>
        </div>
      </div>
    <?php endforeach ?>
  </div>

Any ideas?

2

sortBy() only sorts your collection, but you will still have a collection (the second argument you pass to sortBy() is not valid, it should be asc or desc).

You therefore have to sort and the pick the first/last to get a single item from the collection

<?php if($firstImage = $member->images()->sortBy('sort')->first()): ?>
<img class = "twentytwenty-before" src="<?php echo $firstImage->url() ?>" style="clip: rect(0px, 800px, 800px, 0px);"/>
<?php endif ?>
<?php if($secondImage = $member->images()->sortBy('sort')->last()): ?>
<img class = "twentytwenty-before" src="<?php echo $lastImage->url() ?>" style="clip: rect(0px, 800px, 800px, 0px);"/>
<?php endif ?>

Or–if there are more images–use nth(2)etc.

3

Thank you for that rapid and helpful response texnixe!

So, I implemented your advice into the code (only changing “$secondImage” to “$lastImage” for consistency), and the photos are still not appearing…could there be another reason for why this is happening?

  <div class="container">
      <div class="columns is-multiline gallery-container">
        <?php
        foreach($page->children()->visible() as $member): ?>
        <div id= "container1" class= "twentytwenty-wrapper">
          <div class= "twentytwentycontainer">
            <?php if($firstImage = $member->images()->sortBy('sort')->first()): ?>
              <img class = "twentytwenty-before" src="<?php echo $firstImage->url() ?>" style="clip: rect(0px, 800px, 800px, 0px);"/>
            <?php endif ?>
            <?php if($lastImage = $member->images()->sortBy('sort')->last()): ?>
              <img class = "twentytwenty-before" src="<?php echo $lastImage->url() ?>"/>
            <?php endif ?>
          </div>
        </div>
      </div>
    <?php endforeach ?>
  </div>
4

Should be ->first() and ->last()

1 Like
5

Thank you for your input!
Fixed, but still nada

6

Please check if the images turn up alright without your JavaScript stuff, so we can narrow it down a bit.

7

Images not turning up when I implement this code (without Javascript):

  <div class="container">
      <div class="columns is-multiline gallery-container">
        <?php
        foreach($page->children()->visible() as $member): ?>
          <div class= "column is-4">
            <?php if($firstImage = $member->images()->sortBy('sort')->first()): ?>
              <img src="<?php echo $firstImage->url() ?>" />
            <?php endif ?>
          </div>
        </div>
    <?php endforeach ?>
  </div>

Hmmm…I’ve double checked all my organization, and it seems to make sense. Blog ($page) -> Article ($member) -> Images…

When I use the code below to organize photos in a gallery above the one I’m experiencing issues with, I get the expected results: photos are visible and are arranged as they should be ($page -> images)…

<div class="container">
        <div class="columns is-multiline gallery-container">

          <?php
          // Images for the "project" template are sortable. You
          // can change the display by clicking the 'edit' button
          // above the files list in the sidebar.
          foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
            <div class="column is-4">
                <figure class="showcase-container">
                    <div href="#" class="showcase-link">
                        <img data-action="zoom" src="<?= $image->crop(800,800)->url() ?>" alt="<?= $page->title()->html() ?>" class="showcase-image" />
                    </div>
                </figure>
            </div>
          <?php endforeach ?>

        </div>
    </div>
8

What do you get if you dump the images like this?

<?php foreach($page->children()->visible() as $member): ?>
  <?php dump($member->images()) ?>
<?php endforeach ?>
9

I realized why it wasn’t working texnixe…my page was set to invisible: most embarassing newbie mistake. I learned a lot in the process, but I feel as though I’ve wasted your time, and for that I am terribly sorry.

10

No problem at all. Glad it’s sorted out now.

1 Like