# Easy way to show photos

**URL:** <https://forum.getkirby.com/t/easy-way-to-show-photos/10290>\
**Category:** Solutions\
**Tags:** v2\
**Created:** [April 24, 2018, 12:30pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290 "2018-04-24T12:30:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vivo](https://avatars.discourse-cdn.com/v4/letter/v/b3f665/32.png) [@Vivo](https://forum.getkirby.com/u/Vivo)\
**Post date:** [April 24, 2018, 12:30pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/1 "2018-04-24T12:30:49Z")

</div>

I needed a page that shows photo for a online photo blog. Putting more then 10 images on the page with markdown can be time consuming, room for human error and the original photo size is displayed, not always handy with the occasional 2mb photos.

I created a template for displaying images that are uploaded to that page in the panel. Controlling the size and compression of the images and the option to add a captions to the image.

Nothing fancy but does the job and suits my learning curve 🙂

I hope someone can use this or has a different solution to the same problem.

**imagelist.php**

> \<?php snippet('header') ?\> 
> # \<?= $page-\>title()-\>html() ?\>
> 
> \<?= $page-\>intro()-\>kirbytext() ?\> 
> 
> * * *
> 
> ```
> <div class="text wrap">
> <?php
> // get all images in the folder
> $images = $page->images();
> ?>
> <div class="image-grid">
> <?php foreach($images as $image): ?>
> <figure>
> <img src="<?= $image->resize(1200, null, 65)->url() ?>" alt="">
> <?php 
> // add caption
> $temp = $image->caption();
> if($temp != "") : ?> 
> <figcaption><?php echo $temp->html(); ?></figcaption>
> <?php endif; ?>
> </figure>
> 
> ```
> 
> \<?php endforeach ?\> 
> 
> ```
> </div>
> 
> ```
> 
> \<?php snippet('footer') ?\>

**imagelist.yml**

> title: imagelist
> 
> pages: false
> 
> fields:  
> title:  
> label: Title  
> type: text
> 
> intro:  
> label: Introduction  
> type: textarea
> 
> files:  
> fields:  
> caption:  
> label: Caption  
> type: textarea

---

<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:** [April 24, 2018, 12:38pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/2 "2018-04-24T12:38:11Z")

</div>

Much easier to use the [images plugin](https://github.com/medienbaecker/kirby-images). 🙂

Untested, and assuming you have it installed and your images field is called photos, this should work:

```auto
<div class="text wrap">
<div class="image-grid">
<?php foreach($page->photos()->yaml() as $image): ?>   
  <?php if($image = $page->image($image)): ?>
    <figure>
        <img src="<?= $image->resize(1200, null, 65)->url() ?>" alt="<?= $image->alt() ?>">
        <?php if($image->caption()->isNotEmpty()): ?>
          <figcaption><?= $image->caption() ?></figcaption>
        <?php endif ?>
    </figure>	    
  <?php endif ?>
<?php endforeach; ?>
</div>
</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:** [April 24, 2018, 12:49pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/3 "2018-04-24T12:49:43Z")

</div>

@jimbobrjames Why is it easier with a plugin to fetch all photos of a page? That makes sense if you only want to pick particular photos, not if you want to use all photos.

But the above is not really a special solution, but the standard Kirby way of handling this.

---

<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:** [April 24, 2018, 12:51pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/4 "2018-04-24T12:51:08Z")

</div>

Because @vivo wanted a more fool proof way than having people manually adding them to a content field. This way is drag and drop.

Without a plugin, but will pick up all images on the page…

```auto
<div class="text wrap">
<div class="image-grid">
<?php 
$images = $page->images();
foreach($images as $image): ?>   
  <?php if($image = $page->image($image)): ?>
    <figure>
        <img src="<?= $image->resize(1200, null, 65)->url() ?>" alt="<?= $image->alt() ?>">
        <?php if($image->caption()->isNotEmpty()): ?>
          <figcaption><?= $image->caption()->kirbytext() ?></figcaption>
        <?php endif ?>
    </figure>	    
  <?php endif ?>
<?php endforeach; ?>
</div>
</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:** [April 24, 2018, 3:17pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/5 "2018-04-24T15:17:11Z")

</div>

@jimbobrjames: Sorry, but the if statement for the images in you last code block doesn’t make sense, the final code should look like this:

```auto
<div class="text wrap">
  <div class="image-grid">
  <?php 
  $images = $page->images();
  foreach($images as $image): ?>   
      <figure>
          <img src="<?= $image->resize(1200, null, 65)->url() ?>" alt="<?= $image->alt() ?>">
          <?php if($image->caption()->isNotEmpty()): ?>
            <figcaption><?= $image->caption()->kirbytext() ?></figcaption>
          <?php endif ?>
      </figure>	    
  <?php endforeach; ?>
  </div>
</div>

```

---

<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:** [April 24, 2018, 3:19pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/6 "2018-04-24T15:19:25Z")

</div>

But didn’t that check if the image physically existed before using it? Or does images() already take care of that? It came from the example in the images plugin docs.

---

<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:** [April 24, 2018, 3:20pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/7 "2018-04-24T15:20:52Z")

</div>

Yes, `$page->images()` only fetches existing images.

You have to check if an image exists if you are trying to fetch images referenced in a text file, then you can’t be sure the file is there.

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:28pm UTC](https://forum.getkirby.com/t/easy-way-to-show-photos/10290/8 "2025-02-06T17:28:24Z")

</div>