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

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

This is a working subtitle button I made using code you and Saq suggetsed in this discussion.

If you click on the image button in the subtitle of this tiddler, you can see the working button.

image

Here is the spotlight documentation - 1 and 2

Ok, so you want a template that works like your current one, but extracts addresses from the <$lightbox../> widget instead and feeds them to the spotlight widget.

The following, put in a tiddler tagged $:/tags/ViewTemplate/Subtitle, seems to do that when tested on the ever popular “Cortical laminar necrosis for Fun and Profit” tiddler. It shows as the image button with a number 2 next to it.

\define spotlight-actions()
<$vars regexp="<<lightbox\s+.*?>>(?g)"
    regexp2="""'(https://.*?)'"""
>
<$action-spotlight
	$images={{{[all[current]get[text]regexps<regexp>regexps<regexp2>]:and[format:titlelist[]join[ ]]}}}
/>
</$vars>
\end

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

I really don’t understand why there isn’t something like regexps in the current TW canon. It really makes the code more readable. But I digress.

1 Like

Finally! Thank you @Mark_S. That works.

:joy: I think it’s time to change the demo tiddler.

Don’t kill me if I ask for one more help.

Can these images clipped from Twitter also be extracted similarly to feed into the spotlight widget.
This is an example tiddler.

This can be used for yet another template (#3).

\define spotlight-actions()
<$let 
      regexp="\[img\[https://pbs.twimg.com.*?\]\](?g)"
      regexp2="""\[img\[(https://.*?)\]\]"""
>
<$action-spotlight
	$images={{{[all[current]get[text]regexps<regexp>regexps<regexp2>]:and[format:titlelist[]join[ ]]}}} />

</$let>
\end

<$button actions=<<spotlight-actions>> > {{$:/images/bootstrap/lightbulb}}3</$button>
1 Like

@Mark_S Thank you soo much. That too works nicely.

Here is the demo of all three working examples - for the rouitne [img[]] images, lightbox images and twitter images

https://demowiki.tiddlyhost.com/

Once again thank you @Mark_S . This is very useful, especially for viewing images in mobile.

@Mark_S These images from facebook are not extracted using this regexp beacuse there is some text after the .jpg Any solutions to overcome this?

@saqimtiaz I saw this custom filter plug in in your demo site. Can this be used for the extracting images as told here ?