Today is the day I finally want to give something back to the awesome Kirby community.
I wrote my very first plugin - a lightbox-gallery with beautiful grid-alignment and ImageSet-support. The lightboxes are powered by PhotoSwipe.
This is version 0.1.0 and there is a lot to do. Probably there are bugs. So be cautious like always.
But please try it out and If you have any issues or ideas, file an issue on Github.
Peace 
️
@wottpal
Just pushed it to v0.2.0 with support for Kirby-Focus as thumbnail-provider and many other changes. See the releases page: https://github.com/wottpal/kirby-lightbox-gallery/releases
Forgive this basic question, but after installation and implementation - works like a charm btw - how do i then remove or filter the images after the gallery, as everything I have uploaded to the project page appears by default! I have an exception for ‘cover.jpg’ cover images but basically I have images showing in the gallery and then they are all repeated again below due to the default settings. hope that makes sense.
any help welcomed!
Hi, I guess you use it with the all keyword (i.e. (gallery: all))? Then of course, all images will be used. You can specify certain images with the (gallery: img1.jpg img2.jpg img3.jpg)-syntax. Applying special filters is currently not supported but I could imagine you can use a page-model to overwrite the default images-function (https://getkirby.com/docs/developer-guide/advanced/models#overriding-the-page-class). But be careful when overwriting core-functions, this can have unwanted side-effects.
Dennis
There is no easy way to achieve this. I’d probably use the images field to select all the images you want to display in the page (and that are not used in the gallery tag).
Or do the whole thing differently. For example, use the images field to select all images to be used in the gallery. Then you could exclude these images in your template. All you need on top is a tag that allows you to reference the gallery selection in a textarea field.
Thanks both, i’ll try it out…slow reply, apologies!
Hey, I tried to install the plugin but I keep failing … I came to the point that the page shows the pictures but the lightbox thing does not work… is there any tutorial to this more than the github info?
@rtuner Have you included the JS files?
I have done anything the github says exept for minifying the CSS …but I took care of using the right paths that when including the css …
Are you loading the JS and CSS files from the plugin assets or from your own assets folder? Try moving and loading the files to your own assets folder. Alternatively, try with uncomment the following lines in your .htaccess:
#RewriteRule ^assets/plugins/([a-zA-Z0-9\.\-_%=]+)/(.*)$ site/plugins/$1/assets/$2 [L,N]
#RewriteCond $1 !^plugins/[a-zA-Z0-9\.\-_%=]+/assets/.*
Thanks @texnixe for giving plugin support as well, you are awesome! And @rtuner, are you still struggling to get it work?
Dennis
Maybe I missed it, but is there a way to render the gallery from within a template?
Do you mean, without actually using the gallery tag in your textarea fields?
Exactly, that’s what I meant.
Well, that’s not what the plugin is made for.
Of course, you can include Photoswipe in your Kirby project and then create the required markup in your template, but then you don’t need the plugin.
I guess you could even use the plugin together with the kirbytag() helper if you want to make use of the plugin options.
Hey @helmi77 actually sometimes I do exactly what @textnixe has recommended (using the kirbytag helper). Additionally you need a little helper function which transforms the images-array to an array of their filenames. For @thguenther’s gallery-field (which I can highly recommend) this would look like the following in a custom page model.
private function imagesFromGallery($content) {
$pictures_array = array_map(function($filename) {
return $this->image($filename);
}, $content);
return $pictures_array;
}
public function galleryImages() {
return $this->imagesFromGallery(parent::galleryImages()->yaml());
}
public function galleryImagesString() {
$gallery_images = $this->galleryImages();
$gallery_image_filenames = array_map(function($img) { return $img->filename(); }, $gallery_images);
return join(' ', $gallery_image_filenames);
}
And then in the template you can simply call kirbytag with the same options available when you use it in kirbytext:
<?= kirbytag([
'gallery' => $section->galleryImagesString(),
// other arguments from the docs
// ...
]); ?>
Hope this helps!
Dennis
Hey,
how to use the lightbox feature for a single image in template?
i want to manipulate a given template, where an image is displayed (via html tag <img src="image.jpg">), to make the image get fullscreen on click, like it’s done with for example (gallery: image.jpg) in a kirbytext area.
As @texnixe said, this is not, what the plugin is made for, but it delivers all base for it, so, maybe there is an easy way to make this?
@wottpal I did not realy understand your last post =(
EDIT
Nevermind, i put an own kirbytext field into the template to use this… not perfect, but a workaround =)
other question: how to disable the share button in the upper right corner of fullscreenview?
The #lazyweb says: Check. out default UI options in Photoswipe documentation: http://photoswipe.com/documentation/options.html
hi,
i saw the option to declare the page where images are loaded from by using tag page.
This helped me a lot to use Gallery-plugin independently of where a page is loaded (pagenation, direct, etc) from.
Now i try to make a grid-gallery across multiple pages. I want to add images from more than one subpage to a gallery.
i’m able to iterate over images for one page… and i’m also able to add multiple gallerys (one for each page) but i want to use the grid function to display images from multiple pages…
any idea on that?
something like this would be nice:
(gallery: home\page1\image1.jpg home\page2\image2.jpg home\page3\image3.jpg
and that’s how i would use it:
$items = page('home')->children()->visible();
$galleryitems = "";
foreach($items as $item) {
if($item->intendedTemplate() == "post.image") {
$galleryitems .= $item . "/" . $item->coverimage()->filename() . " ";
echo kirbytag(array(
'gallery' => $galleryitems
));
};
}
Thanks for this suggestion @demlak! I think it’s a great one and I‘m trying to implement something like this when I have more time (around october). Meanwhile it would be great if you can open an issue on github. If that would take to long for you feel free to send a PR 