Bulk import local images into single tiddler as links

[clsturgeon]

For Windows users, I have a batch file that may help or can be modified to help. The idea is that you place the batch file in the folder that houses the TW HTML file. The script has two parameters that are optional. One parameter references the HTML file; if it’s missing, it looks for the latest HTML file. The 2nd parameter defines the relative path to the folder that contains images. If missing, it does every folder.

The batch file does not modify any HTML files. It produces three files.

1. a text file with a list of image files that were found in a folder with a reference to it in the TW HTML file.

2. a text file with a list of image files that were found in a folder with no reference to it in the TW file.

3. a json file that can be used to import tiddlers that populates the _canonical_uri field with a relative path to the image files. The json contains new tiddler definitions for those missing image file references.

If anyone wants this, let me know, and I’ll make it available. I have other batch files I have yet to use that are designed for Memory Keeper. Eg. import images to generate photograph tiddlers for MK.

[Mark_S]

\define gluepath() * $(left)$$(path)$$(image)$$(right)$
<$vars 
   path="file:///D:\data\graphics\file-us\"
	 basetitle = "my image links"
	 left="[img[" right="]]"
>

<$button>Make Tiddler with Image Links
<$wikify text="""<$list filter="[[MyImages]indexes[]]" variable="image"><$text text=<<gluepath>>/>
</$list>""" name="output">
<$action-setfield $tiddler=<<basetitle>> text=<<output>> />
</$wikify>
</$button>

</$vars>

[Mark_S]

And here’s a version that doesn’t need wikify (I think):

<$vars 
   path="file:///D:\data\graphics\file-us\"
	 basetitle = "my image links"
	 left="* [img[" right="]]"
	 return="""
"""
>
<$button>Make Tiddler with Image Links
<$action-setfield $tiddler=<<basetitle>> 
text={{{[[MyImages]indexes[]]:map[<currentTiddler>addprefix<path>addprefix<left>addsuffix<right>]+[join<return>] }}}
/>
</$button>
</$vars>

[arunnbabu81]

Thank you @Mark_S . This works for me. Now I have to find an easy way to get the image filenames from those folders into dictionary tiddler.

[arunnbabu81]

@clsturgeon

If anyone wants this, let me know, and I’ll make it available. I have other batch files I have yet to use that are designed for Memory Keeper. Eg. import images to generate photograph tiddlers for MK.

Thanks for your reply and for trying to help. I would be happy to test those batch files.

[jacng]

You have other workable solutions, so this is probably not needed. That’s fine, no worry, I’m replying in case it’s useful to others as well.

The bookmarklet you need could be something like this:

javascript: (() => {
	title = ("Image links from " + window.location.href).replace("[","(").replace("]",")").replace("{","(").replace("}",")").replace("|","-");
	prefix = "./images/";
	tableRows=document.querySelectorAll('tr:not(#theader)');
	dirList="";
	for (let i = 0; i <tableRows.length; i++) {
		rowCells = tableRows[i].querySelectorAll('td');
		filename = rowCells[0].querySelector('a').innerText;
	  if (filename.match( /\.(jpg|jpeg|png|gif|webp)$/i ))
	     dirList=dirList + "[img[" + prefix + filename + "]]\n";
	};
	tiddler= {
		  "title" : title,
		  "type"  : "text/vnd.tiddlywiki",
		  "text"  : dirList
	};
	navigator.clipboard.writeText( JSON.stringify( [ tiddler ] ) )
		.then(() => {})
		.catch(() => {
		   alert("unable to copy to clipboard");
	  });
})();

Bookmarklet extracts structured info from a web page, and then package them into tiddler/s as needed. In this case, the image path is hardcoded in prefix = "./images/"; and the image links are assembled like this which you can modify as needed :

dirList=dirList + "[img[" + prefix + filename + "]]\n";

A sample json tiddler output is like this (I’m running it on a Chromebook so the path looks different from Windows):

[{“title”:“Image links from file:///run/arc/sdcard/write/emulated/0/test/”,
“type”:“text/vnd.tiddlywiki”,
“text”:"[img[./images/keyboard-1_20230130_104019_1.jpg]]\n[img[./images/keyboard-2_20230130_104030_1.jpg]]\n"}]

[arunnbabu81]

I will definitely try this. Since I haven’t used bookmarklets in past, I might have some doubts. This might be the easiest way to do what I want with just a drag and drop from the files directory. I will come back here after testing. Thanks @jacng

[arunnbabu81]

It’s definitely good that there are multiple ways to do what was asked in the OP. Users can select the method which they feel comfortable with. Also all these methods are new learning points for us. Thanks to everyone who shared their knowledge here.

[arunnbabu81]

@jacng In addition to the bookmarklet code in this reply, which all tiddlers in the json you shared before should I import ?

[arunnbabu81]

@jacng I just tested it now and this seems the easiest solution so far. I have one request.

Can the prefix be made configurable so that it is easy to add images from different subfolders. Otherwise I have to change the bookmarklet before importing images from each subfolders.

Also can the link be also made configurable - I like to use both [[]] or [img[]] formats depending on the need.

Thanks for the help once again.

[jacng]

Configurable prefix
Oh, configurable prefix may have to be done outside the bookmarklet during or post importing. i find prompting for input, and actually most interactive operations, initiated by a bookmarklet is glitchy and can cause the copy to clipboard operation to fail sometimes for no apparent reason.

With json tiddler dropzone, there is an “actions” clause for dropzone to perform post-import operations, such as to add a customizable image path prefix to all the image links in the imported tiddler. This “actions” clause is something I missed out in my earlier exploration and am still learning how to use it effectively.

The JSON tiddler input box approach can update the tiddler/s during importing using a configurable prefix. But with this approach, you will have to paste into the text input box and click Import button instead of pasting into a dropzone. If you are not in a hurry, maybe you could wait while I check out this “actions” clause in the json tiddler dropzone approach

Configurable link
I guess this depends on how you plan to use the imported tiddler. It may be easier to create two tiddlers every time, one for a list of [[]] and another for a list of [img[]] ? Or creating one tiddler with both lists in the text field, one after another ? Or a table with two columns for [[]] and [img[]] ?

[arunnbabu81]

@jacng

If you are not in a hurry, maybe you could wait while I check out this “actions” clause in the json tiddler dropzone approach

I am in no hurry at all. I plan to use these tools in the near future. Especially for creating album of related images using spotlight and Macy plug ins.

[jacng]

Sorry, I miss this post. To work with bookmarklet codes I shared, you only need these:

• $:/plugins/tiddlywiki/jsontext/deserializer.js
• jsonTiddler dropzone

A reminder that your wiki needs to be saved and reloaded for the deserializer js module to work.

[clsturgeon]

@arunnbabu81

Thanks for your reply and for trying to help. I would be happy to test those batch files.

Here is a summary of the usage of the batch file (order does not matter):

twImageReport -w YourTWfile.html -f path\to\images

where 

-w is the wiki file. If missing it will locate the newest HTML file in the folder. 
-f is the folder of images. If missing it will look at all folders. All subfolders are reviewed as well.

It produces three files.

1. a text file with a list of image files that were found in a folder with a reference to it in the TW HTML file.

2. a text file with a list of image files that were found in a folder with no reference to it in the TW file.

3. a json file that can be used to import tiddlers that populates the _canonical_uri field with a relative path to the image files. The json contains new tiddler definitions for those missing image file references.

Note: It will not find the references with forward slashes (/) in the path (which are commonly used), rather it only matches where the path has backslashes (); a quirk that might be worth fixing.

Here is a demo where I used the -f switch, but not the -w switch.:

Download the bat file here (in a zip file)
https://clsturgeon.github.io/MemoryKeeper/support/downloads/twImageReport.zip

Be sure to backup–everything!

Craig

[Mohammad]

Hi @jacng
I like your method and I call it private method. It allows us to have a TW on thumb drive and just drag and drop the required bookbarkelrt ot bookmark tab of browser and then it start to work.
No permission, no admin (specially for work), no extenstion, …
So, I think your method worths to be improved and bundled as a bookmarker/import tool and hopefuly later as a clipper!

[jacng]

Thanks! Actually it wasn’t intentional nor my idea I needed sample bookmarklets to illustrate the json tiddler dropzone and borrowed the idea on how to present bookmarklets n Tiddlywiki from this thread Is there a mime type or deserialiser for JavaScript function like in bookmarklets - #21 by btheado

[arunnbabu81]

@clsturgeon thanks for sharing this. I will try it out when I am on my window PC

[Mark_S]

This is a dropzone version of the bulk image importer that uses the output of jacng’s bookmarklet after capturing a file directory. You hover and click on the dropzone, then paste (ctl-v). This way you get the advantage of the bookmark but the flexibility of wikitext, but without needing an entry box.

Hopefully it’s not too brittle. It turns out the import process json-stringifies things, but there’s no reverse filter operator. So I had to have the code do it’s own clean-up of the import tiddler contents.

There’s 3 variables you can set. One to set the pre-amble path you want to apply to each entry. The next the name of the tiddler that will receive the links. “Depth” refers to how many levels of the original path you want to retain. You have to have at least depth “1” – that’s the file name.

Currently it just filters for .png and .jpg.

   path="file:///home/mark/data/Wikis/test2/"
   basetitle = "My Image Links"
   depth="2"

Hopefully this adds value to the project. But if not … oh well

Incoming.json (1.3 KB)

[Mohammad]

Hi Craig,
Very useful automation!
Minor comments:

1. Is it possible to add other image type most importantly svg?
2. Is it possible to optionally turn off the echo? I mean ifor sake of speed .bat file work silently and optionally user can turn on display on screen?

[Mohammad]

@clsturgeon

Download the bat file here (in a zip file)
https://clsturgeon.github.io/MemoryKeeper/support/downloads/twImageReport.zip

I tried the code with folder contains space in title like C:\TW\03. Resources\00. Images\Noto-emoji-2020-09-16-unicode13_1\png\128

The twImageReport. create path in log files and json file like mages\Noto-emoji-2020-09-16-unicode13_1\png\128 I assume it cannot handle spaces!