New website gallery storage module to replace PhotoSwipe, written in Lua

Software darktable
, , ,
1

Hi,

the web gallery export in Darktable is based on an ancient and outdated version of an image gallery software called PhotoSwipe. So it is basically an unmaintained copy of another project inside darktable.

There is also a GitHub issue if you are interested in the details.
https://github.com/darktable-org/darktable/issues/16205

In the discussion of this issue I made a proposal to replace the embedded PhotoSwipe copy by a new static gallery with similar functions as the old one. @wpferguson suggested to remove the old PhotoSwipe module and replace it by a Lua script.

So here is my first shot. To test it, unpack the attached ZIP archive and run ./install.sh (no root permissions required) in a terminal. Finally, you need to run (or restart) darktable and enable the module in the Lua script manager (bottom left corner in the light table). If you don’t have the Lua script manager enabled yet, follow the instructions at https://docs.darktable.org/lua/stable/lua.scripts.manual/installation/

Now you can select select some images and set the storage format to “website gallery (new)” in the export module. You can enter a title that will be shown in the thumbnail view and choose a destination directory. After export, copy the destination directory to a web server and view it in a browser, or just open the index.html in the destination directory.

I would be glad if you could try this out and report back. Furthermore, it would be nice if people with experience in web UI design and programming could look at the code and send patches or comments with improvements. @wpferguson also made a similar (more minimal) approach, where I’ll use some code from. My plan is to get this into a darktable release so the old PhotoSwipe variant can be removed.

The UI shows a thumbnail gallery when the page is loaded, and a modal view when the user clicks or taps on a thumbnail. Navigation in the the modal view is possible using the buttons in the top bar, keyboard (left/right/escape keys), horizontal scrolling and touch gestures (swipe left/right).

Some technical details: my gallery consists of a storage module written in Lua, some static HTML, CSS and a bit of Javascript (~150 lines, compared to 4500 lines in the PhotoSwipe variant). The Lua script generates a JSON file with a list of images and required metadata. This JSON file is loaded by the above Javascript file. It is the only dynamic part of the gallery (except for the actual image files).

Image preloading in the modal view to speed up switching to the previous/next image is not implemented yet, as well as the zoom function which is present in the PhotoSwipe variant.

In the long term, several UI themes could be provided as .css files. The user
could choose one in the storage settings to give each gallery an individual look. I’ll need to rework the CSS structure before this, though.

[edit: outdated attachment removed, please use the newer version in the replies]

7 Likes
2

Some further remarks about the Javascript internals: to support touch gestures, I made the modal view a horizonal scrollable view. Currently it contains all images in a large <div>

This makes switching from the thumbnail to the modal view a bit ugly as it implies scrolling when the viewport of the <div> is modified. I’m open to suggestions how to fix this ugliness.

3

Hi,

I already received some feedback, thanks for that.

Attached is an updated version with some fixes. The width/height was set to 0 in the JSON file for some images. The gallery title set by the user was not used. There were also some internal cleanups in the Javascript file.

Please note: you can not try this locally without a web server by just opening the index.html file. At least Firefox and Safari refuse to load the JSON file from a file:/// URL for security reasons, so you will only see an empty page.

Maybe I implement a workaround to generate a Javascript file that only assigns the JSON data to a variable.

[edit: outdated attachment removed, see the newer replies for a current version]

4

Whoops, there was another bug regarding the width and height in the JSON file. Now it should really work.

[edit: outdated attachment removed, see the replies below for the current version]

5

Thanks for the good work, @Scorpi. I was never glad with darktables web gallery feature, so I started a combined lua/python project for that which turned out to be almost unmaintainable - so your approach is more than interesting for me!
Five things come to mind (in descending priority):

  • the ability to start it directly from disk (xdg-open in linux, don’t know about Window$) would be very helpful and make it more widely used
  • the zoom is something I really miss
  • the rendering of titles and/or tags, which could be written into the json file
  • the possibility to hook in further javascript (I had planned for a search function in my project

That said, I really appreciate what you’ve created, and I will spend some time studying your code.

1 Like
6

Thanks for your feedback.

I’ll try to switch from a generated JSON file to a generated JavaScript file that contains the image metadata, so you can use it directly from disk. For a start, I created a JS file that contained the JSON playload assigned to a variable, and this worked as intended. But I may also just create JavaScript objects with the required properties and skip the JSON part.

Additional metadata will be shown once I have the time to implement it. Patches welcome. This also applies to the zoom function.

Meanwhile I solved the issue with the ugly scrolling when clicking/tapping on the thumbnail image that I mentioned above. The scroll functions in JavaScript have an option to make scrolling “instant” without a scroll effect.

7

Hi @Scorpi,

Thanks for deciding to tackle this!

I didn’t have time to try this out yet, but I was just wondering whether you have considered using an existing library builder instead of reimplementing it from scratch.

For example, I have been using GitHub - saimn/sigal: yet another simple static gallery generator recently which is very simple yet powerful and already has a theming engine built in.

Cheers!

1 Like
8

Hi Daniele,

the idea is to not have a copy of another project inside the darktable source. If sigal would be available in the relevant distributions, then it could be added as a dependency to the darktable package and used by a storage module to build a gallery. However, this is not the case, at least there is no Debian package.

9

Disclaimer: I have no connection with sigal and I don’t care specifically about it, I am just using it as an example :slight_smile:

Why not adding git as a requirement, and then just pulling sigal (or any other pre-existing tool) from github? IMHO this is orders of magnitude easier than reimplementing everything from scratch.

Anyways, I don’t mean to push on this and I have no reason or title to do that. I just wanted to make sure that you had considered all the alternatives before starting to implement a web gallery from scratch.

Keep up the good work!

1 Like
10

Hi Daniele,

“pull sigal from github” would still require to distribute it as part of the source for distributions like Debian. So this issue would remain.

However, everyone is free to add a storage module which creates a gallery using sigal. It shouldn’t be too hard to implement this in Lua. You could use my Lua script and adjust it for sigal.

Furthermore, I like to dive into all the HTML/CSS/JavaScript details to get a real project done.

1 Like
11

Then by all means have fun and godspeed :smiley:

1 Like
12

@springm Here is the lastest version. Now you can use the gallery locally from disk via file:// URLs.

I also fixed the ugly scrolling when switching from the thumbnail gallery to the modal view.

[edit: outdated attachment removed, please use the latest version in the replies below]

13

Thanks - works like a charm!
I had a look into images.js and discovered that the number for width and height are those of the original image dimensions, not those of the exported image files. I tried hard to find out how to get at these numbers during export, but to no avail :frowning:

1 Like
14

@springm Yes, there are issues with the width and height values. Some portrait images also have height and width values swapped.

It’s not that trivial to get the actual width and height of the exported image out of the Lua API, but I’m working on it.

15

This is my observation, too. It seems, that the API is not complete yet.

16

@springm

I think I will do it like this:

  • if available, use exiftool to get the dimensions of the exported image
  • as a fallback (exiftool not available), use final_width, final_height and the size limits of the export module to calculate the image size
  • for unedited images (where final_width and final_height is 0), use width and height instead of final_width and final_height

The last option might give somewhat incorrect numbers, but the impact is only cosmetic. In the gallery code, I don’t need the actual numbers. The important bit is the aspect ratio of the image, to generate a matching thumbnail frame. With slightly incorrect numbers, there may be an empty line of pixels inside the thumbnail frame.

17

This version implements the above changes.

Furthermore, I changed the layout of the thumbnail view to adjust the thumbnail size to the browser window width. Now it should look good on big and small screens (like smartphone screens). Let me know if you like it.
[edit: version with bug removed, see recent version in the replies]

1 Like
18

Whoops, forgot to test the uploaded version, and a little typo caused an error.

This version should work.
dt_gallery.zip (8.4 KB)

19

Hi,

the current implementation of the modal view makes it difficult to add a zoom function like it is available in the PhotoSwipe variant.

I think I will rework this view to change it from a scrollable <div> to a normal <div>. I use the scrollable <div> to support touch gestures so the user can swipe from one image to the previous/next image using CSS scroll-snap properties.

I’ll create a variant that uses JavaScript event handlers for touchstart/touchend events and CSS transitions to support swipe left/swipe right gestures.

20

Hi,

I created sample implementations of these changes. Attached is a ZIP file with 2 HTML files.

One file implements a zoom function. Click at some point in the image and the browser should zoom in. Panning is also supported after you zoomed in (not on touchscreens, though. I’ll try to fix this).

The other file implements a new method to skip to the next/previous image. Mouse navigation (via left and right arrow) as well as touch gestures (swipe left/right) are supported.

Can you please give them a try and report back if there are any glitches? It works here with Firefox/Desktop and Safari/Mobile, but I want to make sure that other setups also work as intended. There is one known issue in swiper.html: if background preloading of the next image is not yet finished, the same image is shown again.
zoomer_swiper.zip (4.6 KB)