Sortable image gallery (in the panel)

Kirby 2 Solutions 🎉
1

Sortable image gallery

I just figured out how to create awesome sortable image galleries in the panel.

Benefits:

  • Image preview in the selector
  • Image preview after added an image
  • Image presented as gallery in the panel
  • You can extend the image with extra fields

You need some basic Kirby skills to complete the tutorial.

1. Kirby

You need the development branch of Kirby. If you don’t feel adventurous you can stop reading now.

2. Field

Download and install the Page Builder field by @timoetting.

3. Blueprint

Your blueprint should look something like this. It will combine the page builder with the brand new built in image field.

fields:
  gallery:
    label: Gallery
    type: builder
    fieldsets:
      images:
        label: Image
        entry: >
          <img src="{{_fileUrl}}{{image}}" height=120px/>
        fields:
          image:
            label: Image
            type: image

Now you should be able to add images and get a preview of them even when not in editing mode.

4. Panel css

It’s not always nice to have the images presented as a list. To make it look like a gallery you need to add a panel.css file.

It should look something like this:

[data-field="builder"] .structure-entries {
	display: flex;
	flex-wrap: wrap;
	margin: -5px;
}
[data-field="builder"] .structure-entry {
	margin: 5px;
}
[data-field="builder"] .builder-entry-fieldset {
	display: none;
}

5. Template / snippet / pattern

I don’t have a screenshot for the result of the template / snippet / pattern but you will get thumbnails that are linked to all the images.

Add this to your template / snippet / pattern:

<div class="gallery">
  <?php foreach( $page->gallery()->toStructure() as $section ) : ?>
    <div class="image">
      <a href="<?php echo $section->image()->toFile()->url() ?>">
        <img src="<?php echo thumb( $page->image( $section->image() ), array('width' => 150) )->url(); ?>">
      </a>
    </div>
  <?php endforeach ?>
</div>
8 Likes