Bulk import local images into single tiddler as links

@Mark_S I found this method suggested by you to bulk import local images in Google group.

https://kookma.github.io/TW-Scripts/#Create%20External%20Images%20from%20A%20Directory

https://groups.google.com/g/tiddlywiki/c/1yTi65sc8D8/m/0ru-PhMJBAAJ

Can this be modified to bulk import local images from a specific folder (in subdirectory of the wiki using relative paths) into a single tiddler as links. Images shall be imported in [img[]] or [[]] format.

1 Like

If I read this correctly, and if you are comfortable to explore using a bookmarklet to copy the image links in a local directory into tiddlywiki, the approach I shared in this thread Copy info from web site to tiddlywiki using bookmarklet and json tiddler dropzone may meet your needs. If you use a Edge/Chrome browser (not file/Windows explorer) to browse your local image folder, then that folder page is a (html) web page to Edge/Chrome browser and the approach discussed using bookmarklet to copy info from web site to Tiddlywiki is applicable :slight_smile:

In the first part that discussed the JSON Tiddler Dropzone, there is a json file “json tiddler dropzone.json”. If you invoke the “Bookmarklet - Copy files listing from Edge/Chrome directory page to TW.js” (as per the README) in your image folder using Edge/Chrome browser, the bookmarklet will copy all the file links in that directory as a table in one tiddler that you can paste and import into tiddlywiki. This bookmarklet can be modified to meet your needs, such as display the image, show image filename, [img[]] link etc in different columns, and also filter the files to show image files only.

But it’s late here, I’m retiring to bed. I will be happy to discuss this with you over the weekend if it’s useful.

1 Like

I will have to read through and test your bookmarklet. I will reply back after testing it. @jacng thanks for replying and trying to help me.

@jacng I tried it. It’s a workable solution for me if some modifications are made. Can import mechanism be modified to show only the image links alone in this format [[relative path of image]] . I don’t want to see the table format with other extra information of the files like file size etc. Images are stored in a folder in the subdirectory of the the wiki

I think it can be done with a modified version that wikifies the output of a list widget and appends it to a tiddler. Also, you would have to specify a name for the output tiddler.

The bookmarklet idea sounds promising, but, as you say, it’s better with a simple output rather than a formatted output.

How to modify the code ?

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.

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

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

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.

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

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"}]

1 Like

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

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.

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

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

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 :slight_smile:

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[]] ?

1 Like

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.

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.

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

twImageReport3

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

Be sure to backup–everything!

Craig

2 Likes