# Display gallery of images

**URL:** <https://forum.getkirby.com/t/display-gallery-of-images/16038>\
**Category:** Questions\
**Tags:** v3\
**Created:** [October 22, 2019, 11:28pm UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038 "2019-10-22T23:28:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdavid](https://avatars.discourse-cdn.com/v4/letter/m/a9adbd/32.png) [@mdavid](https://forum.getkirby.com/u/mdavid)\
**Post date:** [October 22, 2019, 11:28pm UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/1 "2019-10-22T23:28:12Z")

</div>

Hi,  
Trying to display all images in a folder together with their Title and size as a gallery with the following code:

```auto
  <div class="pic">
    <?php foreach($page->images() as $image): ?>
  <figure>
    <?php if($image = $page->image()): ?>
      <div class="box">
       <img src="<?= $image->url() ?>" alt="missing image">
    </div>
         <?php endif ?>

    <div class="inline">
      <span class="pic-tit">
            <?= $image->Title() ?>
      </span>
      <span class="pic-siz">
          <?= $image->WxH() ?>
      </span>
        </div>
  </figure>
  <?php endforeach ?>
</div>

```

but I’m only getting the first image in the folder.  
How do I change this to get all images in folder on the page.

Thanks for any help

---

<div class="post-metadata">

**Author:** ![bvdputte](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/bvdputte/32/8179_2.png) [@bvdputte](https://forum.getkirby.com/u/bvdputte)\
**Post date:** [October 23, 2019, 6:30am UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/2 "2019-10-23T06:30:54Z")

</div>

Hi,

Your additional `if` is not needed, because you’re already working with a collection of images (set in your `for`-loop). In that `if`-clause you’re basically saying _when the current `$image` is equal to the first image of the `$page`, go ahead_.

This should work (untested):

```auto
<div class="pic">
    <?php foreach($page->images() as $image): ?>
        <figure>
            <div class="box">
                <img src="<?= $image->url() ?>" alt="missing image">
            </div>

            <div class="inline">
                <span class="pic-tit">
                    <?= $image->Title() ?>
                </span>
                <span class="pic-siz">
                    <?= $image->WxH() ?>
                </span>
            </div>
        </figure>
    <?php endforeach ?>
</div>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 23, 2019, 6:58am UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/3 "2019-10-23T06:58:01Z")

</div>

In addition to @bvdputte’s solution, you probably only want to show a gallery if the page has images:

```auto

<?php if ($page->hasImages()) : ?>

<div class="pic">
    <?php foreach($page->images() as $image): ?>
        <figure>
            <div class="box">
                <img src="<?= $image->url() ?>" alt="missing image">
            </div>

            <div class="inline">
                <span class="pic-tit">
                    <?= $image->Title() ?>
                </span>
                <span class="pic-siz">
                    <?= $image->WxH() ?>
                </span>
            </div>
        </figure>
    <?php endforeach ?>
</div>
<?php endif ?>

```

Consider using a figcaption element instead of the div inside your figure for semantic HTML: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure). You probably don’t need the div wrapper around your image.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [October 23, 2019, 7:18am UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/4 "2019-10-23T07:18:00Z")

</div>

Don’t forget to the fill in the alt tags properly too 🙂

---

<div class="post-metadata">

**Author:** ![mdavid](https://avatars.discourse-cdn.com/v4/letter/m/a9adbd/32.png) [@mdavid](https://forum.getkirby.com/u/mdavid)\
**Post date:** [October 23, 2019, 9:29pm UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/5 "2019-10-23T21:29:07Z")

</div>

Hi, Haven’t succeeded in getting this to display as a one page scrolling gallery, still displays 1 image at a time.  
Here’s a screen shot of the oil-paintings folder:

 ![content](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/a/aa10427aa7a9b4656b0553c4c5c8d7fc6d651837.jpeg)  
css style:

```auto
    img {
      max-width: 80%;
      height: auto;
    }

    .pic {
      text-align: center;
      max-width: 60em;
      margin: 2em auto 4em;
    }
    .pic .box {
      margin: 2em;
      object-fit: contain;
      margin-bottom: 1em;
    }
    .pic img {
      box-shadow: 6px 6px 8px rgba(0,0,0,0.4);
      width: auto;
     max-height: 90vh;
    }
    .grid-wrapper {
      min-width: 100%;
      display: grid;
      grid-template-rows: 2rem auto;
      grid-template-columns: repeat(10, [col-start] 1fr);
      grid-template-rows: auto 574px;
      grid-gap: 20px;
      grid-row-gap: 0;
      justify-items: center;
      text-align: center;
    }

    .grid-wrapper > * {
      grid-column: col-start / span 10;
    }
.pic {grid-column: col-start / span 10;
      padding 0;
      margin: 0}
select {width: 100%;
        font-size: 1.25em;}
  .inline {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: nowrap;
            min-width: 100%;
          }
</style>

```

and this is oil.php:

 \<?php snippet('header') ?\> 

```
        </div><!--.wrap-->
    </div><!--#header-->
    <?php /*
    below is menu
    <ul>
      <?php foreach ($site->children()->listed() as $subpage): ?>
         <li> <a style="font-size: 1.5em" href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a></li>
      <?php endforeach ?>
    </ul>
    */ ?>
    <!--
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"></label>
  -->
    <div class="grid-wrapper">
                  <div class="inline">

                    <span class="hdr">
                                   <a class="logo" href="<?= $site->url() ?>">
                                     <h1 style="margin-top: -1rem; font-size: 1.5em">
                                      Oil Paintings
                                     </h1>
                                    </a>
                     </span>
                     <div class="lr-arw">
                         <span style="float: right">
                           <?php if ($page->hasNextListed()): ?>
                             <a href="<?= $page->nextListed()->url() ?>"> <p id="triangle-right"> </p></a>
                           <?php endif ?>
                         </span>
                         <span style="float: left">
                           <?php if ($page->hasPrevListed()): ?>
                               <a href="<?= $page->prevListed()->url() ?>"> <p id="triangle-left"> </p></a>
                           <?php endif ?>
                         </span>
                     </div>

                  </div><!-- end inline -->
                   <?php if ($page->hasImages()) : ?>

                   <div class="pic">
                       <?php foreach($page->images() as $image): ?>
                           <figure>
                               <div class="box">
                                   <img src="<?= $image->url() ?>" alt="missing image">
                               </div>

                               <div class="inline">
                                   <span class="pic-tit">
                                       <?= $image->Title() ?>
                                   </span>
                                   <span class="pic-siz">
                                       <?= $image->WxH() ?>
                                   </span>
                               </div>
                           </figure>
                       <?php endforeach ?>
                   </div>
                   <?php endif ?>
  </div>

  <div>
            <?php snippet('footer') ?>

    </div><!--#footer-->

```

Thanks for any help

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 23, 2019, 9:39pm UTC](https://forum.getkirby.com/t/display-gallery-of-images/16038/6 "2019-10-23T21:39:34Z")

</div>

But each `oil` type page only seems to have a single image… So the result is not surprising.