Website gallery replacement

[scorpi11]

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 darktable-org/darktable#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.

[marceloexc]

do you have a .zip or a static demo of an example gallery for this?

[wpferguson]

Here's an example

and

[scorpi11]

do you have a .zip

Do you mean a ZIP archive with the Lua script and the static website parts (HTML, CSS, JS), or ZIP archive with an exported gallery?

[wpferguson]

@scorpi11 can we make a separate job for the thumbnail generation? Currently the image export completes, then the progress bar just sits there while the thumbnails are generated. I think I did something similar in postsharpen.lua so I'll go look there and see how I did it.

Can you make strings the user sees translatable?

What happens if exiftool isn't available? There is a check_if_bin_exists() function in the dtutils file library. If it exists it returns the name and path (if windows) or it returns nil.

It looks great and seems to work well.

[scorpi11]

What happens if exiftool isn't available? There is a check_if_bin_exists() function in the dtutils file library. If it exists it returns the name and path (if windows) or it returns nil.

I already use check_if_bin_exists(). If it is not available, the script tries to calculate image with and height from the data it gets from darktable (maybe you remember that we discussed this on IRC and came to the conclusion that this is not that trivial). The calculation is in show_status().

[scorpi11]

@scorpi11 can we make a separate job for the thumbnail generation? Currently the image export completes, then the progress bar just sits there while the thumbnails are generated. I think I did something similar in postsharpen.lua so I'll go look there and see how I did it.

I'll take a look, thanks.

[scorpi11]

@wpferguson In your screenshot I notice that the symbol for fullscreen view is not available in the font that your browser uses. Maybe I should replace the symbols in the navigation bar by SVG icons to not depend on the available fonts.

[wpferguson]

I already use check_if_bin_exists()

I looked through the code again and still didn't see it, so I dd a search and it popped right up. I guess I'm blind in one eye and can't see out of the other 😆

In postsharpen.lua I created a finalize function, sharpen(), and that's where I sharpened the images that were exported in the store function.

[marceloexc]

do you have a .zip

Do you mean a ZIP archive with the Lua script and the static website parts (HTML, CSS, JS), or ZIP archive with an exported gallery?

an archive of the exported gallery

[scorpi11]

A demo gallery is available here: https://tikei.de/~scorpi/demogallery/

[scorpi11]

In postsharpen.lua I created a finalize function, sharpen(), and that's where I sharpened the images that were exported in the store function.

I implemented a job to show the progress during thumbnail export.

[scorpi11]

Can you make strings the user sees translatable?

Done.