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

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.

1 Like

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

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>
1 Like

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>

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.

@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.

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:

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.

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.

2 Likes

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

@saqimtiaz any update regarding this.

@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

image

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

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>
1 Like

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

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?

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.

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

It does work.

2 Likes

@Mark_S

Did you check this ?

Also, is there a way to extract images clipped from twitter using regexp.
Most are having this format

[img[https://pbs.twimg.com/media/FfHf-9AWYAEBQju?format=jpg&name=4096x4096]]

or like this

[img[https://pbs.twimg.com/media/FasuOQSUcAAuNkn?format=jpg&name=medium]]

Or like this

[img[https://pbs.twimg.com/media/FVOAjgMWIAI71Ps?format=jpg&name=large]]

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

I’m not entirely sure what you want here, and I don’t know anything about spotlight, and there is no info in the plugin readme. But I’m guessing you’re heading toward something like:

<$vars regexp="<<lightbox\s+.*?>>(?g)"
    regexp2="""'(https://.*?)'"""
>

<$list filter="[[Cortical laminar necrosis]get[text]regexps<regexp>regexps<regexp2>]">
<$button> {{$:/images/bootstrap/lightbulb}}
<$action-spotlight
	$images=<<currentTiddler>>
/><<currentTiddler>>
</$button>
</$list>

</$vars>


This grabs the url, and wraps it in a button using the spotlight-action widget.

So this would create a series of buttons like:

which when clicked (on the lightbulb icon, not the text), send you over to a zoomable view of the image.

2 Likes

This part works. Here is the tiddler - My TiddlyWiki — a non-linear personal web notebook

But when I tried to use this code to create a button (in the subtitle) for invoking the spotlight - it’s showing only one image - Here is the button and here is the image tiddler.

What does the spotlight widget do? Is it supposed to get a single image, or a title list?