Easy way to show photos

The CMS Solutions
1

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 :slight_smile:

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

2

Much easier to use the images plugin. :slight_smile:

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

<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>
3

@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.

1 Like
4

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…

<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>
1 Like
5

@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:

<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>
6

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.

7

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.