Version 1.0.0 - 2016-04-22
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 http://getkirby.com
##Installation##
- 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;
fields:
gallerygrid:
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.
##Configuration##
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
4 Likes
This is really awesome but kinda hacky. Maybe @bastianallgeier will integrate this as a standard file view? 
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.
3 Likes
It’s not really a hack - or at least it’s a very decent one 
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
1 Like
There is - some kind of API - already;
- Simply create an empty, not visible, field
- Attach a function to it
- 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…).
####FIELD####
my_sidebar_function.php -> place this inside site\fields\my_sidebar_function
<?php
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();
$element->addClass("field-my_sidebar_function");
return $element;
}
}
?>
####SCRIPT####
my_sidebar_function.js -> place this inside site\fields\my_sidebar_function\js\my_sidebar_function.js
;$.fn.my_sidebar_functionfield= function() {
$("div.field-my_sidebar_function").remove();
alert("Hello, my_sidebar_function!");
};
####BLUEPRINT####
example_blueprint.php -> place this inside site\blueprints
my_sidebar_function:
type: my_sidebar_function
####RESULT####
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.
3 Likes
it works, Thanks a lot for that 
Yeah - I didn’t do anything new;
Kirby itself is defining the preview-images already; I just made them visible 
1 Like
I really like your creativity. It’s amazing how much that can by done on just the surface with js and css. 
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
1 Like
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
1 Like
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
options:
preview: true
status: true
template: false
url: true
delete: true
fields:
gallerygrid:
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
Thx!
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
