Easily link images as external content

My kid has been looking for “diary/journal” apps, so I thought “want she really needs is Tiddlywiki” But to convince her it will have to be really easy to add images.

Obviously images can be imported to TW by drag-and-drop, but that the image is then contained with in the TW file increases the size of the file.

Is there an easy automatic way of importing the image but storing the image in, say, a ./media folder next to the TW and then leaving a link in a tiddler to the image as external content?

Or alternatively, if the user manually stores the image in the ./media folder, is there a way “drag and drop as external link”? Who knows, maybe there is a plugin already out there for this?

I will give you the Quick answer, Yes, most definately and a number of ways.

However the way to do this will depend on what platform you can use it on and how you can set it up.

*Perhaps you can tell us what devices she uses, if it needs to be accessed on more than one device, over the internet, accessed only by herself etc…

  • This will help answer here’s more quickly approach your/here needs.
  • Perhaps also an indication of her computer experience and literacy or enthusiasm to learn.
  • Also will these images and media be in dozens, hundreds or thousands and estimated number per day. Just a ball park.

There are automatic and semi-automatic ways to do this, and some depend on your answers to the above. Sometimes manual is not as hard as you think.

  • Recently I found you can just dump images into your wiki and occasionaly use a tool to export them and save in your wiki folder (updating the tiddlers automatically, to point to the external files).
1 Like

I use @buggyj 's tiddlyclip plug in and it’s companion browsers addons (tiddlyclip and savemedia) for easy saving of images(mostly screenshots) as local image files (within a subdirectory called media or files) and simultaneously reference these images within my wiki using relative path. All these happens in one or two steps. This works only in single file html wikis and preferably in Firefox browser. You will have to install two browser addons from GitHub and one Tiddlywiki plug in for this to function seamlessly. I can give more details if you are interested.

1 Like

Is your child working on a phone or tablet? If so then manually test that you can do what you want at all.
For instance on Android I am prevented from directly accessing locally stored videos, images or pdfs from a web page - doesnt matter which browser I use - its a generic Android security measure.

To work around this I have to use RCX server on my phone and tablets.

If images are compressed first then it might be ok to import them into the Tiddlywiki file - depends on how many - the size of some TiddyWiki’s that function well enough is impressive.

It is on a laptop, running Firefox with ‘FileBackups for Tiddlywiki’. There’s no need to sync to multiple devices as yet.
The images would be in the dozens rather than hundreds in total.
You mention “occasionally use a tool to export them and save in your wiki folder (updating the tiddlers automatically, to point to the external files)” - this sounds about right to start with - are you referring to a specific tool?

The easiest way I know of is the file upload plugin by Saq Imtiaz : File Upload Plugins for TiddlyWiki - Open Collective

Maybe also his more recent plugin, “ExternalContent Plugin” ? Saq's Sandbox — Experimental doodads

2 Likes

Yes, this is what I would recommend!

(This is different — it’s for helping one TiddlyWiki retrieve tiddlers from another TiddlyWiki.)

1 Like

This is (I think) the one I was thinking off. It may have less dependencies but is more manual. You can do a periodical export. Externalising Image Files with JSzip using tools you probably already have

  • Basically as your file size increases from adding images you can export them to a zip file, while updating the canonical field. Then unpack them in the right location and they have being externalised.
  • For the default save mechanism have a look at Timimi then you can open and save files from any file location.
1 Like

This still works with single file TW on desktop Firefox, and also compatible with what’s being suggested here:

https://groups.google.com/g/tiddlywiki/c/S8ieFgmorkw/m/hK3dj_J91OEJ :

Eric Shulman
Apr 4, 2015, 3:39:36 AM
to tiddl...@googlegroups.com

> On Monday, March 30, 2015 at 12:31:39 PM UTC-7, Jed Carty wrote:
> There are two ways, one is to make the image part of the tiddlywiki html file, which can slow down loading if there are too many. If you are always going to have access to the local file system (either on the same computer or through some service like dropbox) you can link to a local copy of the image.

Here's how I do *both* embedded and local images... without any need for setting "_canonical_uri":

1) place your image files in a local sub-folder called "images/"
2) drag and drop the files into your TiddlyWiki to make base64-encoded binary tiddlers (the image filenames will be the tiddler titles)
3) rename each binary tiddler to add "images/" to the beginning of each title
4) use "[img[images/filename.ext]]" syntax to embed the images in your content

Because the images are stored as tiddlers, the [img[images/...]] syntax will display the internal base64-encoded images.  However, if the document starts to get too big, you can always just *delete* some or all of the images tiddlers... the embedded [img[images/...]] will then simply use the external, local image files instead, without having to change your content.

Note that the "images/" prefix on the tiddler names is simply to allow you to keep the images in a subfolder.  If you keep your images in the same folder as your TiddlyWiki document, then you can drag and drop the images, skip the renaming, and just use "[img[filename.ext]]" to embed them in your content.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

I really like the ximg macro - tb5 — Welcome

I store all images in a subfolder called photos and I have a button to create a new image tiddler.

I think that one passed me by. Looks useful!

Works with hosted images as well, now I just have to apply it. I feel a find and replace coming on.

Almost a couple of years ago I posted this.

It provides a mechanism to auto populate relative paths to an image, video or just a generic file ( which I use for pdf files ).

I still use this. I have since added error handling.

You can harvest the JavaScript macro

$:/plugins/cls/mk/getRelativePath

from MK demo…

https://clsturgeon.github.io/MemoryKeeper/AlexanderGrahamBell/AlexanderGrahamBell.html

Example usage. This an action macro that could be used on a button.

\define actions(field, token)
<$macrocall $name=getRelativePath tiddler={{!!title}} field="$field$" currentValue={{!!$field$}} token="$token$" />
\end

getRelativePath has 4 parameters.

Tiddler - tiddler requesting the relative path from the clipboard

Field- field in tiddler

CurrentValue - current content of field. If blank the macro replaces the content of the field. If populated, it appends the new object to the end of currentValue.

Token - this is either “image”, “video” or empty string. “image” creates an img reference, “video” an mp4 reference and an empty string generates just a string to the relative path to the file.

1 Like