GalleryGrid - Preview images in the file-panel

Kirby - GalleryGrid

Version 1.0.0 - 2016-04-22

  • Initial Public Offering…

What is it?

Kirby - GalleryGrid enables you to see a live preview of every image in the file-panel.

More info about Kirby can be found at


  • Download the .zip-file and extract it to the root of your site.
  • The plug-in acts as a field, so it must be place in the site\fields folder of your site.
  • Once the “plug-in” is placed in the right directory, add the GalleryGrid field to every blueprint you want to.
  • There is an example blueprint included in the .zip-file, but basically the field is used like this;

    type: gallerygrid

Since the field itself is not visible, it doesn’t matter where you place it in the blueprint (on top, or below… it doesn’t matter at all).

That’s it - all blueprints with this field (or plug-in) will now show a preview of an image / file, instead of a text-list.


The plug-in (or field) does have a simple configuration option.

You can set the size of the previe-thumbnail, in your config.php file (an example is included in the .zip-file).

  • s : 50x50 px
  • m : 75x75 px (Kirby default)
  • l : 100x100 px

In your config.php you can set one of the above options like this;

c::set("kirbyGalleryGrid", "m");

Kirby will render all thumbnails in the size, set by the config-file.

Version 1.0.0


This is really awesome but kinda hacky. Maybe @bastianallgeier will integrate this as a standard file view? :wink:

1 Like

I think it should be like a sidebar widget API. Then developers can create whatever they want.

Less load on the crew. More possibilities for Every one.


It’s not really a hack - or at least it’s a very decent one :stuck_out_tongue:

Kirby adds the source of every image in the file-panel by default, see screenshot on the left.

This “metadata” is set by Kirby itself, in order to show you a preview of the image, when you drag & drop it in the editor.

The only thing I do, is fetching the source of the image and show it in the background of the file-list… that’s all.

The file-list itself is 100% intact and not modified (besides the added background).

Also, when you set the thumbnail-size, I use (once again) that image-source to re-generate a thumbnail, exactly like Kirby does (the image-source is actually a .php script that renders a thumbnail).

All this is done by Kirby, not by me :stuck_out_tongue:

1 Like

There is - some kind of API - already;

  1. Simply create an empty, not visible, field
  2. Attach a function to it
  3. Once the field is loaded, the function is fired

That’s it; you can do whatever you want right now… (include styling, images, functions, etc…).


my_sidebar_function.php -> place this inside site\fields\my_sidebar_function


class My_Sidebar_FunctionField extends BaseField {

  static public $assets = array(
    "css" => array("my_sidebar_function.css"),
    "js" => array("my_sidebar_function.js")

  public function content() {

    return "<i id=\"my_sidebar_function\" data-field=\"my_sidebar_functionfield\"></i>";


  public function element() {
    $element = parent::element();
    return $element;



my_sidebar_function.js -> place this inside site\fields\my_sidebar_function\js\my_sidebar_function.js

;$.fn.my_sidebar_functionfield= function() {
   alert("Hello, my_sidebar_function!");


example_blueprint.php -> place this inside site\blueprints

    type: my_sidebar_function


Every page in the panel that has the field my_sidebar_function included, will trigger your own function.

1 Like

Well, while all this is possible, it’s probably not the intended use. You need a field that is otherwise not necessary AND you have to add the field to every blueprint.

1 Like

I know - I only placed the code in order to help some people out.

Coding is not my strongest thing, but maybe it can point out someone in a certain direction.

Sorry for the mis-understanding; I wanted to see previews of the images, so I decided to create a work-around for it.

- edit - I will also add a toggle to the list, so you can switch instantly from list-view to grid-view.


it works, Thanks a lot for that :smiley:

Yeah - I didn’t do anything new;

Kirby itself is defining the preview-images already; I just made them visible :stuck_out_tongue:

1 Like

I really like your creativity. It’s amazing how much that can by done on just the surface with js and css. :slight_smile:

1 Like

Yup - no .php is used at all (except for creating an empty field, that is immediately deleted - once it fires the assets).

Even javascript is not really needed; all the functions are fired by javascript, but 100% executed by css.

So I need .php to create a field, and javascript in order to set some CSS - but all you see / use / want is CSS-powered :stuck_out_tongue:

1 Like

Kirby - GalleryGrid

Version 1.2.5 - 2016-04-24

  • Toggle grid / list view
  • Minor bugfixes
  • Better CSS logic
  • FontAwesome icon for files
  • Minified assets


Love this idea :heart_eyes:

Yeah, it works great.

And with the new toggle-option, you can quickly return to the old state (text view) vs. new state (grid view).

It doesn’t cause any overhead; the previews were loaded anyway :stuck_out_tongue:

1 Like

i know what you mean :stuck_out_tongue:

Is there any way for this to show the images uncropped so you can make out their aspect ratio?

It uses Kirby own “cropping” mechanism, so I think you have to alter that.

When you “drag and drop” an image in your edit-field, the same preview is used (by Kirby’s core engine), so the plug-in doesn’t create it’s own images; it just re-uses the available ones (used for drag and drop preview).

Hello @1n3JgKl9pQ6cUMrW,

I’ve maybe found a bug in your plugin GalleryGrid. It’s occurs when I add your gallery in a blueprint with subpages and files set to true.

I think it’s just a CSS problem.

This is the start of my blueprint:

title: Page
pages: subpage
files: true
  preview: true
  status: true
  template: false
  url: true
  delete: true


    type: gallerygrid


If I have for instance two subpages and no image files, this is how my panel page displays

If I add an image file, it’s ok

Not tested on a clean Kirby Starterkit


I also discovered this bug some time ago, but wasn’t able (after I checked it) to reproduce it (so I thought it was a rendering issue, or something).

Now I know how to reproduce the bug and will fix it soon - I’ll update the status over here!

Smashed it… in both the GalleryGrid and Lister plug-in… will update them soon.

- edit - updates are live

1 Like