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

, ,
#11

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:

Help needed about HTML2TW: Macro
#12

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.

#13

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
#14

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

#15

@saqimtiaz any update regarding this.

#16

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

image
image2048×902 147 KB

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

#17

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
#18

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?

#19

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.

#20

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

It does work.

2 Likes
#21

@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

#22

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:

image
image1003×68 15.4 KB

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

2 Likes
#23

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.

#24

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

#25

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

#26

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
#27

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.

#28

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
#29

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

#30

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.