Kirby Gallery Field

Plugins
1

Hey,

I just created a gallery field that lets you pick and order your image files inside the page panel.

Check it out on github

Here is a blueprint example:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery

This gives you a field like this:

Sort Mode
sort_mode.jpg1202×425

By clicking the “Select images” Button you enter a select mode where you can pick the files to include to you gallery.

Select Mode
select_mode.jpg1202×726

The content will be YAML-structured. Inside the template, the field therefore has to be decoded as an array using $page->gallery()->yaml().

Gallery: 

- kermit-the-fog.jpg
- the-sea.jpg
- mountains.jpg
- road.jpg
- forrest.jpg

Options

Changing the aspect ratio of the thumbnails

By default, all images are displayed in their original aspect ratio. If you would like to force a custom aspect ratio, i.e. to show the thumbnails as squares, you can pass the option aspectRatioto with the format width:height your field in the blueprint:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    aspectRatio: 1:1

Aspect Ratio

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    aspectRatio: 4:3

Aspect Ratio

Show and hide file name

You can hide the filename under the thumbnail by adding the option displayFilename: falseto the blueprint:

fields:
  ...
  pictures:
    label: Gallery
    type: gallery
    displayFilename: false

Aspect Ratio

Setup

Using git, go to the root folder of your Kirby project and run git clone https://github.com/TimOetting/kirby-list-field.git site/fields/gallery. You can also just copy the content of this repository into site/fields/gallery.

:foggy::city_sunset::night_with_stars::bridge_at_night::camping::city_dusk::desert:

16 Likes
2


This repository is empty.

3

whaaa, I’ on it :slight_smile:

1 Like
4

Here we go. Repo is online now.

5

A few questions (have not tried it yet):

  • Are the images sortable?
  • With delete, is it deleted from the gallery or from the files (permanently)?
  • With this plugin you start with all the images and then select which you want to use? So with 100 images with 5 galleries it will be a mess? Like 500 images in the page?

I ask because it looks really interesting. :slight_smile:

6

you start with an empty list. You can then hit the “select images” button to reveal the select mode. Here, all images of your current page are listed. Then, after clicking on “Ok” you switch back to the sort mode. All previously selected images are now listed and can be sorted via drag & drop. If you would like to add another image, you can click on “select images” again and add the one you would like to add.

On the sort mode, you have to buttons under the thumbnails: An Edit Button that leads you to the file area of the panel and the remove button. The remove button (the one with the “x” only removes the image from the selection. You cannot delete files with this custom field. Inside selection mode, you only have one button to check or unchek an image.

1 Like
7

Everything sounds absolutely perfect. Next time I need a gallery I know what field I will try. :slight_smile:

8

Ooo I may put this field to good use very soon :smirk:

9

Amazing Plugin @timoetting. You already got a place in all of my Kirby projects with the Builder field, and this is no different . :thumbsup:

Thanks so much!

One tiny error:
In the displayFilename example there’s a semicolon instead of a colon.

10

This looks very good !
Might I suggest to add an option:
autoselect : all

11

Interesting! :slight_smile: I would probably make use of a select all button and maybe an Invert selection button.

1 Like
12

Yes, I am planning to add some features to make selection easier. I think I will add something like shift-click to select a range of images and, like you said, a “select all” button.

An autoselect:all feature is some kind of tricky regarding usability. What are “all” images? Those that have been in the page folder when the gallery field has been added? Or all images that will added in the future? What happens if you add this option after you already selected some images by hand?

13

Just new to Kirby but this is again, a really nice plugin!

But I have a question.
After selecting the images I want to use for the page I want to put my pictures in an unordered list.
But at the moment I’m struggling with the array you get after the yaml().

I’m trying to set the pictures from the gallery in a foreach().

Can somebody tell me what I’m doing wrong?

<?php foreach($page->pictures()->yaml() as $image): ?>
<li>
 <figure>
  <img src="<?php echo $image->url() ?>" alt="<?php echo $page->title()->html() ?>" />
 </figure>
</li>
<?php endforeach ?>

Or is this not possible?

Cheers!

14

The yaml array only contains the filenames, so you have to adapt your code a bit:

<?php foreach($page->pictures()->yaml() as $image): ?>
<li>
 <figure>
  <img src="<?php echo $img = $page->image($image)? $img->url() : '' ?>" alt="<?php echo $page->title()->html() ?>" />
 </figure>
</li>
<?php endforeach ?>

That is, you pass the name of the image that is stored in $image to the image() method. I have use the ternary operator here to check if the image exists before actually echoing the image url.

2 Likes
15

Hi @texnixe,

Thnx for your reply, it helped me a lot further!!!

In the first place the code didn’t work right away so I had to do some debugging and I finally got it working.

This is the code that made it work:

<ul>
 <?php foreach($page->pictures()->yaml() as $image): ?>
  <li>
   <figure>
    <img src="<?php $img = $page->image($image); echo $img? $img->url() : '' ?>" alt="<?php echo $page->title()->html() ?>" />
   </figure>
  </li>
 <?php endforeach ?>
</ul>

Cheers!

1 Like
16

Hello @aproskam. While your code works, you shoudn’t output anything if the image doesn’t exist to keep your markup clean. Try this instead:

<ul>
<?php foreach($page->pictures()->yaml() as $image): ?>
   <?php if($img = $page->image($image)): ?>
      <li>
	 <figure>
	    <img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
	 </figure>
      </li>
   <?php endif ?>
<?php endforeach ?>
</ul>
1 Like
17

Hi @Thiousi,

Appreciate it, I will update my code! :slight_smile:

Cheers!

1 Like
18

I’m experiencing duplicated entry… anyone else?

19

I seem to get that problem when using more than one gallery field in a page.

Edit: @mungle, does this happen with a single gallery field or when using multiple gallery fields?

20

@timoetting amazing plugin. Any chance to get more than one gallery on one page running? Would like to use it as default to add images because it’s so natural to use.