Regexp to extract all images in a tiddler to view in a lightbox or spotlight

[arunnbabu81]

I was trying out lightbox prototype created by Charlie Veniot as mentioned in this post.
In an example, he was using a filtered transclusion to show images in lightbox.

I have a tiddler with multiple images of this format [img[xxxxxxx.jpg]]. I want to extract these images using regexp and show them in the lightbox setup as shown in the frist example. Does anyone know how to create such a filter using regexp ?

This what I could find from google search, but these deals with markdown images

Regex to parse image link in Markdown

Extract images urls from markdown content

Is similar approach possible in Spotlight

[Mark_S]

Starter kit. More complicated than your original because it needs to remove spaces from the expression and provide special variables for certain constructions.

However, this probably isn’t the way you were thinking of invoking it (applying inside of current tiddler) since the current tiddler would already have the images.

<$vars myCur=<<currentTiddler>>
sp=""" """
img1="\[img\["
img2=".jpg\]\]"
>

{{ [<myCur>get[text]search-replace:gi:regexp[\n],<sp>search-replace:gi:regexp<img1>,[@1@@]split[@1]prefix[@@]search-replace:gi:regexp<img2>,[.jpg@@]split[@@]regexp[(\.jpg$)]] || LightBox }}


</$vars>

[arunnbabu81]

I tried this…but some broken images are shown in the lightbox ----see here. Do you know why it happens

[Mark_S]

It’s coming from the image links. So obviously the filter needs to be tweaked. I’m just amazed though – I thought Charles macro would only work with image tiddlers – not image references.

<$vars myCur=<<currentTiddler>>
sp=""" """
img1="\[img\["
img2=".jpg\]\]"
delink="\[\[.*?\]\]"
>

{{ [<myCur>get[text]search-replace:gi:regexp[\n],<sp>search-replace:gi:regexp<delink>,[]search-replace:gi:regexp<img1>,[@1@@]split[@1]prefix[@@]search-replace:gi:regexp<img2>,[.jpg@@]split[@@]regexp[(\.jpg$)]] || LightBox }}


</$vars>

[arunnbabu81]

This one works, but I am not yet sure how I want to implement it. Will have to check other lightbox solutions in TW and choose one which suits my approach. I will revisit this thread at a later date. Thank you @Mark_S for all your help.

[arunnbabu81]

https://demowiki.tiddlyhost.com/#Spotlight%20viewbox

I tried to use this regexp pattern with the spotlight plug in. See the above link. But the code I use is wrong I guess, its not working.

This is the spotlight demo site - Saq's Sandbox — Experimental doodads

[saqimtiaz]

I am not familiar with Mark’s code but I do spot a lot of syntax errors. I highly recommend taking the time to familiarize yourself with basic wikitext syntax.

This version below corrects the syntax issues that I spotted at a quick glance:

\define spotlight-actions()
<$vars
	myCur=<<currentTiddler>>
	sp=""" """
	img1="\[img\["
	img2=".jpg\]\]"
>
<$action-spotlight
	$images={{{[<myCur>get[text]search-replace:gi:regexp[\n],<sp>search-replace:gi:regexp<img1>,[@1@@]split[@1]prefix[@@]search-replace:gi:regexp<img2>,[.jpg@@]split[@@]regexp[(\.jpg$)]] :and[format:titlelist[]join[ ]]}}}
/>
</$vars>
\end

<$button actions=<<spotlight-actions>> > {{$:/images/dripicons/photo-group}}</$button>

[arunnbabu81]

Thank you @saqimtiaz It works.
I forgot to make some corrections regarding the regexp pattern suggested by @Mark_S to the demo tiddler I posted before. Now I have added those correction to the demo tiddler - here is the link

\define spotlight-actions()
<$vars
	myCur=<<currentTiddler>>
	sp=""" """
	img1="\[img\["
	img2=".jpg\]\]"
    delink="\[\[.*?\]\]"
>
<$action-spotlight
	$images={{{[<myCur>get[text]search-replace:gi:regexp[\n],<sp>search-replace:gi:regexp<delink>,[]search-replace:gi:regexp<img1>,[@1@@]split[@1]prefix[@@]search-replace:gi:regexp<img2>,[.jpg@@]split[@@]regexp[(\.jpg$)]] :and[format:titlelist[]join[ ]]}}}
/>
</$vars>
\end

<$button actions=<<spotlight-actions>> > {{$:/images/dripicons/photo-group}}</$button>

[arunnbabu81]

@saqimtiaz

I do spot a lot of syntax errors.

This happened because I was mix and matching the spotlight code and regexp code shared by Mark. I didnt know how to do it properly.

[arunnbabu81]

@Mark_S
I had used a lightbox macro by Telumire in the past.
So some of the images in my tiddlers have this format
<<lightbox 'url'>>
And some of them are within details widget.
Is it possible to extract such images using regexp?
This is a sample tiddler

Edit:
Also images like in this tiddler are not getting extracted.

[Mark_S]

Possible … probably. Easy … not so much. But I think that’s the approach Mohammad uses in refnotes to extract references. But in that case, we ended up using a JS macro I wrote. Sadly, TW still lacks the tools you need to easily extract patterns. It has bits and pieces that kind of approach one end or the other end of the problem, but doesn’t give you a one-stop solution. So you end up with long, complicated filter runs.

The current extractor only extracts images with the jpg extension. It would need some more work for other file extensions.

If you’re serious about extracting images, and don’t mind using 3rd party tools, then adding the regexps tool from this sad little PR might simplify things:

Returns text of input selection that matches regexpr

[arunnbabu81]

@Mark_S

If you’re serious about extracting images, and don’t mind using 3rd party tools, then adding the regexps tool from this sad little PR might simplify things

How to do it? Anything which I shouldn’t be doing when using such 3rd party tools?

Edit: Can it be made available as a plug in. What are the benefits of using it.

[saqimtiaz]

I have custom filters and macros that would probably handle this use case quite well. You are looking at a 2-3 week period before I can get them published though.

[arunnbabu81]

Is there any way to extract the labels of these extracted images so as to be shown in the spotlight?

[arunnbabu81]

@saqimtiaz

I have custom filters and macros that would probably handle this use case quite well. You are looking at a 2-3 week period before I can get them published though.

@saqimtiaz any update regarding this.

[arunnbabu81]

@Mark_S

As you mentioned in this post, I tried the code to extract the lightbox images and created a button to show it in spotlight. But it doesnt seem to work. Click on the lightbulb button in the subtitle of this tiddler

Instead of creating a button when I tried the code directly, this is what I got - My TiddlyWiki — a non-linear personal web notebook.

---

This is a working example of the code shared here.

Also, is there some way to extract images shown in tiddlers like this - mostly clipped from twitter

[Mark_S]

This version seems to deploy the lightboxes. The alternative would be to do a second stage regexp after the first that extracts everything in the string, and then feed that string to lightbox launched by a $macrocall widget.

<$vars regexp="<<lightbox\s+.*?>>(?g)">
<$list filter="[[Cortical laminar necrosis]get[text]regexps<regexp>]" variable="photo">
<<photo>>
</$list>
</$vars>

[arunnbabu81]

This seems to work. How will I incorporate it into this button

@arunnbabu81

Also, is there some way to extract images shown in tiddlers like this - mostly clipped from twitter

More that the lightbox images, these images form a major bulk in my wiki. I am gradually reducing the use of lightbox and trying to shift to spotlight. Is there any way to extract them?

[Mark_S]

@arunnbabu81

This seems to work. How will I incorporate it into this button

When I try that code without the button, it doesn’t appear to generate anything. That is, there are no items that match the filter.

[arunnbabu81]

Check this tiddler - My TiddlyWiki — a non-linear personal web notebook

It does work.