Search / Filter images by name

1

I have a bit of a problem and i’m not sure how to solve it:
I have a grid-wrapper that contains multiple image-grids from different projects.
The grid shows the image and on hover it shows the name() of the image (in this case the image name is a number, so 1.jpg gets displayed as 1).

<div class="grid-wrapper">
      <?php foreach($projects as $project):?>
            <div class="image-grid">
               <?php foreach($images as $image): ?>
                  <div class="tile">
                       <div class="image-grid-number"><?= $image->name()?></div>
                       <img class="image-grid-img" src="<?= $image->url() ?>" alt="">
                  </div>
               <?php endforeach ?>
             </div>
      <?php endforeach ?>
</div>

What I want to do is having a input field like this

<input  type="text" id="searchInput" placeholder="Search Number">

where the user can type in a number and only sees the image with the corresponding number.

<?php
        $projects = page('projects')->children()->listed();
        $images = $projects->images();
        $filtered = $images->filterBy('name', '*=', '12345');
    ?>

If I replace $images with $filtered in the foreach-loop it works as intended and shows me only the images with the number 12345 but i would love to have this work with the input field and without the fixed number.

Any help would be greatly appreciated :slightly_smiling_face:

2

As far as I understood your problem correctly, a JavaScript solution (Isotope) would be the best way for you:

3

That would indeed work and would def. be an alternative if I can’t make it work in Kirby.

4

Download the code from CodePen and look at the structure of index.html. Integrate the three scripts into your template: jQuery, Isotope and the additional script script.js. Adjust the structure of your template:

<div class="grid-wrapper grid">
<!-- "grid" added -->
      <?php foreach($projects as $project):?>
            <div class="image-grid element-item">
            <!-- "element-item" added. The content from this div will be included for the search. -->
               <?php foreach($images as $image): ?>
                  <div class="tile">
                       <div class="image-grid-number"><?= $image->name()?></div>
                       <img class="image-grid-img" src="<?= $image->url() ?>" alt="">
                  </div>
               <?php endforeach ?>
             </div>
      <?php endforeach ?>
</div>

Search field:

<input type="text" id="quicksearch" placeholder="Search Number" />

You definitely won’t need the filter buttons from the CodePen example, and they are too complex for now.

The additional code
$projects = page('projects')->children()->listed() ...
is not needed for this, because the search result is displayed using JavaScript and not processed with PHP.

My code is not tested, because I don’t know your further structure. But it is an approach to experiment with it. Maybe the solution meets your requirement.

1 Like
5

If you’re a bit familiar with CSS and Javascript, there are also quite neat and lightweight solutions that don’t require such huge libraries like jQuery:

1 Like