Spotlight: A Dream to Have a LightBox Gallery in Tiddlywiki

[TiddlyTweeter]

Not that it helps much, but a few comments.

@TW_Tones

metadata such as embedded exif is very valuable, especially with photography and getting camera and exposure details. If only this were able to be transferred into tiddler fields it would achieve the majority of desirable functionality. You can write back to the tiddler if not the image file.

Right. To be able to extract meta-data from images would give the edge towards full-pro lightboxes. This is what the “big photo apps” do.

Use case: 4,000 paintings of Bonfire Night in the UK.

FYI, in that use case there is NO way I’d ever need or want TW to permanently import the meta-data. Merely dynamically read it for a lightbox.

Here all that is needed is TW selects a number of images to present and temporarily retrieves meta-data from, say, 50 images, for a lightbox.

The point is the images already hold the data so why add it again (for that use case)?
In this case I already conceive the “image” as a kind of “external tiddler”

Just a comment
TT

[TiddlyTweeter]

@saqimtiaz

not further derail the original topic of this thread from which the issue of image metadata is quite distinct.

Ciao @saqimtiaz

I disagree. It is fine with the OP.

“Lightboxes” can include meta-data reading and I wanted to flag it in case folk like you were interested.

Why? Because I’m not a developer so defer to folk like you—though on images for “Lightboxes” I do know the issues.

So. I’m really happy you are interested in the general “Lightbox” issue since you are so good. And understand you are not interested in meta-data.

But occasionally I am on the final ball :-).

Best wishes
TT

[saqimtiaz]

@TiddlyTweeter

“Lightboxes” can include meta-data reading

From an end-user point of view it might seem that way, but from an implementation point of view reading and display the metadata are two completely different things.

@TiddlyTweeter

“Lightboxes” can include meta-data reading and I wanted to flag it in case folk like you were interested.

A lightbox can make use of and display any data that is available. The issue of having access to image EXIF data in TW is completely distinct from implementing a lightbox, and should also be implemented separately as a re-usable component. It also requires further in depth discussion as to what the usage patterns and needs might be, which would be facilitated by a separate dedicated thread. This would also make it more likely to attract the interest of someone that may implement it.

The suggestion for a separate thread is meant just as much to further your goals and needs, as to not clutter this one with details that are not directly pertinent to the implementation of a lightbox. I will leave it for you to decide whether you find value in that.

[TiddlyTweeter]

@saqimtiaz

The challenge for myself with writing plugins is really about the time and effort required for ongoing maintenance and support rather than in initially creating them.

Right. Understood.

TBH, it is a conundrum. I highly appreciate what you do. And I also see the conundrum of open source, free. A legacy of maintenance no one pays you for.

Though this post should maybe split to the Café?

TT, x

[TiddlyTweeter]

@saqimtiaz

I will leave it for you to decide whether you find value in that.

I will shut-up on this thread now as I certainly don’t want to spoil it.

TT

[JanJo]

Sorry for having brought up this metadata thing
Thanks for the quick exif-experiment @saqimtiaz !
I thought the description (which is in fact an IPTC-feature) could help building a lean and dynamic gallery which from a folder.
Another idea could be a combination of geoloc-data with the leaflet plugin.

[saqimtiaz]

@Mohammad here is a very very quick proof of concept of integrating Spotlight into TW: Spotlight — proof of concept

I only had under a half hour to kill between meetings so please do not expect too much!

I do not believe that Spotlight lets you do inline sliders, which would be nice to have for my intended use case.

We may also need to disambiguate the functionality of a lightbox versus that of a creating a masonry or tiled view of images, to facilitate discussion. The description of Spotlight as a “lightbox gallery” is potentially misleading.

[Ste_W]

Slightly off-topic,
They your photos Saq? They are good!

[saqimtiaz]

All photos used for the demo are from https://unsplash.com/
Somehow using my own work feels inappropriate.

[TiddlyTweeter]

@saqimtiaz

Somehow using my own work feels inappropriate.

I kinda understand that. But it is always interesting to me to see a “corpus” of work.

I do work with “would-be” photographers. It always amazes me how good they are without knowing it!

A comment
TT

[TiddlyTweeter]

@saqimtiaz

Somehow using my own work feels inappropriate.

This “felt issue” could be whole wiki in itself.

I still find the net somewhat “down” on the visual.
The vast scale of “home(y) photos” is barely touched, yet images are a language.
Often a very good one.

Just a comment
TT

[TiddlyTweeter]

It could be very interesting to see if we can apply a Cartier-Bresson test to images in TW.

Bresson pioneered the idea of “The Decisive Moment” on hover on shutter-click.
Twinned with concepts of the “Golden Ratio”

Is this off topic?
Probably not.

TT

[Mohammad]

@saqimtiaz

very very quick proof of concept of integrating Spotlight into TW: Spotlight — proof of concept

WOW! Thank you @saqimtiaz
Very intresting! I know this is only a proof of concept, so I will wait for an alpha release to give my comments! But this even in this stage is really cool!

Thank you!

[Mohammad]

This is my example

<$let imgs="""
https://nextapps-de.github.io/spotlight/demo/gallery/brooklyn-bridge-1791001.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/california-1751455.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/canada-2340312.jpg
"""
first_img = {{{ [enlist<imgs>first[]] }}}
>
<$button class="tc-btn-invisible"> <$image source=<<first_img>> />
<$action-spotlight
	images=<<imgs>>
	start=<<first_img>>
/>
</$button>
</$let>

[saqimtiaz]

This is how you would try to use it in a gallery view of images:

<$let imgs="""
https://nextapps-de.github.io/spotlight/demo/gallery/brooklyn-bridge-1791001.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/california-1751455.jpg
https://nextapps-de.github.io/spotlight/demo/gallery/canada-2340312.jpg
"""
>
<$list filter="[enlist<imgs>]" variable="img">
<$button class="tc-btn-invisible" tag="div" actions="""
<$action-spotlight
	images=<<imgs>>
	start=<<img>>
/>""">
<$image source=<<img>> />
</$button>
</$list>
</$let>

[Mohammad]

This is absolutely amazing! One can use CSS to style and customize the gallery!
Just one question: In Spotlight.js – Modern HTML5 Image Gallery
on click the image covers the full screen, in TW-Spotlight it doesnot!
Clicking the maximize button makes image to cover the full screen, then on navigation to next image again you have to click the maximize button, it does not keep the state.

[Mohammad]

Further note:
The Spotlight — proof of concept plugin is just 60kB which is pretty light.

Thank you Saq.

[saqimtiaz]

At present, no additional spotlight options are supported and the zoom/fullscreen behaviour is one of them. There are both global options for a lightbox, as well as the option to customize them for individual slides. How to make it possible to specify all of them via wikitext when invoking the lightbox is an interesting UX challenge.

If you play around with the section at the bottom called API call, you will see all the available options in Spotlight and how they influence the lightbox: Spotlight.js – Modern HTML5 Image Gallery

[TiddlyTweeter]

@Mohammad

Further note:
The Spotlight — proof of concept plugin is just 60kB which is pretty light.

I found it interesting because of it’s minimalism.
For simple showing it is easy & effective …

Definitely a step in the right direction by @saqimtiaz!

TT