Skip to content
This repository has been archived by the owner. It is now read-only.
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Koken Photoswipe Plugin


This repo is now archieved.

I am no longer a user of Koken and have migrated my Gallery to Yapawa, a gallery site that I developped.

Thank you Koken Team for your awesome tool that allowed me to host my pictures during many years.

Usage limitations

  • This plugin is originally developped for the Axis Theme (version 1). On other Themes, the result can be totally unpredictable. It makes only sense on pages with a thumnail-grid layout and with the ability to link the images to Lightbox (lens templates using <koken:link lightbox="true" ><koken:img /></koken:link>).
  • <koken:img /> lens tags must not have a fixed preset. The plugin is expecting the data-presets attribute to get all avalaible sizes.
  • Support for Themes other than Axis was added in V1.2.
  • Since V1.3, the plugin now works on any page, as long as the DOM is structured as expected.
  • Major improvements since V1.5 to support Pillar based themes (V2 Themes).


Check out to see it in action


Photoswipe files are included as static inside the vendor folder. To install, execute on the server (or locally and copy to the server):

git clone path/to/koken/storage/plugins/photoswipe

Enable plugin in Settings/Plugins.


You can choose which sharing services are available.

You can define which DOM Elements will trigger Photoswipe. by leaving the option empty, the default element for the current Theme is used.

It advised to clear System Caches after inabling it.


By default, the default layout from Photoswipe is used:

  • pswp/photoswipe.css
  • pswp/default-skin/default-skin.css
  • pswp/photoswipe.min.js
  • pswp/photoswipe-ui-default.min.js
  • pswp.min.js

You can replace any of this files, by creating a file with same name inside the custom folder:

  • custom/photoswipe.css
  • custom/default-skin/default-skin.css
  • custom/photoswipe.min.js
  • custom/photoswipe-ui-default.min.js
  • custom/pswp.min.js


Javascript compression can be done using uglify-js, a node.js library. An easy way to install it under Debian/Ubuntu: apt-get install node-uglify

And uglify the file by running: uglifyjs src/pswp.js > pswp/pswp.min.js


You can enable/disable the usage of the image title/caption in the lightbox in the plugin setup.

The image title will be used from the alt image attribute.

If you want to add the caption or additional information to the image title you've to add a html element to the template.

Simple caption:

<koken:link lightbox="true">
  <koken:img />
  <div class="item-caption" style="display: none">{{ content.caption }}</div>

Complex caption using the timestamp and exif data:

<koken:link lightbox="true">
  <koken:img />
  <div class="item-caption" style="display: none">
    <koken:time />
      <koken:not empty="exif.make">
        {{ exif.make }},
       <koken:not empty="exif.model">
        {{ exif.model }},
      <koken:not empty="exif.exposure">
         {{ exif.exposure }},
      <koken:not empty="exif.aperture">
        {{ exif.aperture }},
      <koken:not empty="exif.focal_length">
        {{ exif.focal_length }},
      <koken:not empty="exif.iso_speed_ratings">
        {{ exif.iso_speed_ratings }}


  • Ajax/PHP calls for image details


All the heavy lifting is done using Photoswipe by Code computerlove and Dmitry Semenov. This plugin just integrates the relevant code into Koken. The version used in this plugin is 2572d...