darktable-org
Website gallery replacement
Why?
This export module should replace the PhotoSwipe copy in darktable. It is unmaintained, lacks support for touch gestures and is difficult to extend, as the HTML part is generated by C code and the JavaScript part is more than 4000 lines of code.
See https://github.com/darktable-org/darktable/issues/16205 for more details.
About this new gallery
The module is called "website gallery (new)" and needs to be enabled in the Lua script manager. It is written from scratch and does have nothing in common with the old PhotoSwipe variant.
I implemented all features that are present in the PhotoSwipe gallery:
- export of thumbnail versions of each image
- a scrollable gallery view of all images using the thumbnail files
- a modal view of the selected image and navigation elements to switch to the next/previous image
- counter, a button for a fullscreen view and keyboard navigation in the modal view
- a zoom function to switch to a 1:1 representation of the image in modal view
- also works locally using file:/// URLs
The website code is designed to be usable on large displays with high resolutions as well as in small browser windows and on smartphone screens.
Keyboard navigation uses the space and arrow right keys to switch to the next image, as well as backspace and arrow left to switch to the previous image. The escape key can be used to leave the modal view.
On touchscreens, swipe left/swipe right gestures can be used to change the images in modal view.
Some technical stuff
I did not use any external components/libraries, as these often require npm or similar build tools. This would add a lot of complexity to the build process for a rather minor feature. My implementation does not require any build steps. The website only consists of static files, except for the image data generated during the export process (just a JavaScript array). The static JavaScript part is ~500 lines of code, compared to more than 4000 lines in the PhotoSwipe variant. Therefore, this new implementation should be much easier to extend with new features.
The Lua script can not request the actual dimensions of the exported image in a reliable way. Therefore it uses exiftool if available to get width and height of the exported image. If exiftool is not available, image dimensions might be off by some pixels. This only affects the frame of the thumbnails in the gallery view, which might show additional empty lines at the borders of the thumbnail image.
Outlook
This version is intended to provide the necessary technical features. The look and design are a first draft and might be subject to improvements. Translations are currently missing.
I have some future plans for additional features:
I want to let the user choose one of several visual styles in the GUI that are implemented in separate CSS files. The user could even create his own CSS styles which will be picked up at start.
Optical enhancements for the gallery and modal view would be nice. Patches from developers with better skills in web design are welcome.
Pinch-to-zoom using touch gestures could be added to the modal view.
The export script could add metadata about each image in the generated images.js which will be shown in modal view and/or in the gallery.
Navigation elements in the modal view could be changed to overlays that will only be shown after mouse/touch events.
