Support external images in client-server configuration

[Jermolene]

TiddlyWiki draws a distinction between lazily loaded images and external images:

• Lazily loaded images are delivered in the initial HTML file with their text missing, which is then loaded on demand if and when the image is displayed. When it is loaded it becomes an ordinary tiddler, with the body stored in JavaScript memory. See http://tiddlywiki.com/#:LazyLoadingMechanism%20LazyLoading
• Externally loaded images are delivered in the initial HTML file with their text missing and with a _canonical_uri field that gives the URI of the image. This URI is used directly in HTML img tags, without ever loading the body of the image as a tiddler. See http://tiddlywiki.com/#ExternalImages:ExternalImages

Both types can be used with the standalone configuration, but currently only lazily loaded images are supported in the client-server configuration (see the script ./bin/lazy.sh). The disadvantage of lazily loaded images is that they still consume JavaScript memory and they are rendered as inline base64 images which are not as performant as images retrieved via HTTP.

The following changes are needed in order to support external images in the client-server configuration:

• Extend server.js with simple content negotiation when retrieving tiddlers, enabling it to serve either the current JSON format or the raw resource depending upon what the browser asks for with the "Accept" header
• Insert the variable transclusion <<customSaveTiddlers>> just before the first closing </div> in $:/core/templates/store.area.template.html
• Create a new save filter based on $:/core/save/lazy-images that sets customSaveTiddlers to a rendering of the current image tiddlers with the text field omitted and the _canonical_uri field added. The latter would be set to recipes/default/tiddlers/<encodedimagetitle>

[jayfresh]

bonus for your 1000'th issue! 👍

[Jermolene]

@jayfresh thanks, makes me feel old!

[danielo515]

So those images will be loaded when you open that tiddler? Like in normal Web page navigation?

[Jermolene]

So those images will be loaded when you open that tiddler? Like in normal Web page navigation?

Yes, that's right; in the browser we'd have an ordinary <img> tag with the URL pointing to the image on the server.

[rubaboo]

Discussion at https://groups.google.com/forum/#!topic/tiddlywiki/MBuzDDEpIPw

[sukima]

PR #2502 introduces a static file server module which in theory would fix the relative path problem described in this issue. Just wanted to link the two discussions.

[gw]

Curious about the latest state of this. I run TW5 in standard client-server mode on a VPS and my content's very image-heavy. Would love for the drag-and-drop importer to upload my images to my VPS and create skinny _canonical_uri tiddlers for me.

Happy to take a stab at this if you point me in the right direction.

[linonetwo]

I'm going to do this, currently my nodejs cost 2GB of ram to store images (After importing Evernote and clipping many websites).

The following changes are needed

I will follow your instruction. But those only ask client to load images in the _canonical_uri way. We may need extra modifications to ask server not load binary files' text field into memory at all.

[linonetwo]

@gw That is not we are talking about in this issue. This issue is about automatically add _canonical_uri to image tiddlers "on loading", not "on saving". If you want the later one, you need to use the-file-uploads-plugin

[linonetwo]

Also make sure tiddler with _canonical_uri is using sync-adaptor method to load, not using HTTP directly, because content may store in a SQLite, or has to be loaded via IPC/RPC method that is only accessible in sync-adaptor.

---

Not necessarily, just use a relative URL, and we can catch the URL call in Electron/React-Native to redirect them to the IPC call.

[pmario]

Also make sure tiddler with _canonical_uri is using sync-adaptor method to load, not using HTTP directly,

This behaviour can not be changed for backwards compatibility reasons. There are configurations, that depend on this behaviour