Avoiding image file content in -render exported tiddlers

#1

Hello, everyone!

I’m using my TiddlyWiki as a private instance, but I also export some of the tiddlers as individual pages, so to say. In some of these tiddlers I include images (which are always saved as individual tiddlers).

To render my tiddlers, I use a variation of

tiddlywiki --rendertiddlers [!is[system]tag[public-eng]] $:/core/templates/static.tiddler.html public text/plain

where static.tiddler.html is (since I’m not sure whether this was custom made or not)

\whitespace trim
\define tv-wikilink-template() $uri_encoded$
\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="generator" content="TiddlyWiki" />
<meta name="tiddlywiki-version" content={{$:/core/templates/version}} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no">
<link id="faviconLink" rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="%24%3A%2Fcore%2Ftemplates%2Fstatic.template.css">
<title><$view field="caption" format="plainwikified"><$view field="title"/></$view>: <$view tiddler="$:/core/wiki/title" format="plainwikified"/></title>
</head>
<body class="tc-body">
<$transclude tiddler="$:/core/templates/server/static.sidebar.wikitext" mode="inline"/>
<section class="tc-story-river" role="main">
<div class="tc-tiddler-frame" role="article">
<$transclude tiddler="$:/core/templates/server/static.tiddler.wikitext" mode="inline"/>
<div class="tc-sidebar-scrollable" style="overflow: auto;">
   <div class="tc-sidebar-header"><h1 class="tc-site-title">Title of my website</h1></div>
   <div class="tc-site-subtitle">This is my very first website created with TiddlyWiki</div>
   </div>
</div>
</section>
</body>
</html>

My issue with this method is that is directly embeds the images as data in the .html page, worsening the load time and making for really big .html files. An example:

<img class=" tc-image-loading" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4R7ORXhpZgAATU0AKgAAAAgACwEPAAIAAAAGAAAAkgEQAAIAAAAKAAAAmAESAAMAAAABAAEAAAEaAAUAAAABAAAAogEbAAUAAAABAAAAqgEoAAMAAAABAAIAAAExAAIAAAAHAAAAsgEyAAIAAAAUAAAAuQE8AAIAAAAKAAAAzYdpAAQAAAABAAAA2IglAAQAAAABAAAIDgAACEBBcHBsZQBpUGhvbmUgMTEAAAAASAAAAAEAAABIAAAAATE2LjQuMQAyMDIzOjA1OjA1IDE2OjExOjAwAGlQaG9uZSAxMQAAACKCmgAFAAAAAQAAAnaCnQAFAAAAAQAAAn6IIgADAAAAAQACAACIJwADAAAAAQAgAACQAAAHAAAABDAyMzKQAwACAAAAFAAAAoaQBAACAAAAFAAAApqQEAACAAAAAloAAACQEQACAAAAAloAAACQEgACAAAAAloAAACSAQAKAAAAAQAAAq6SAgAFAAAAAQAAAraSAwAKAAAAAQAAAr6SBAAKAAAAAQAAAsaSBwADAAAAAQAFAACSCQADAAAAAQAQAACSCgAFAAAAAQAAAs6SFAADAAAABAAAAtaSfAAHAAAEvAAAA1KSkQACAAAABDQ0OQCSkgACAAAABDQ0OQCgAQADAAAAAf//AACgAgAEAAAAAQAAC9CgAwAEAAAAAQAAD8CiFwADAAAAAQACAACjAQAHAAAAAQEAAACkAgADAAAAAQAAAACkAwADAAAAAQAAAACkBQADAAAAAQAaAACkIAACAAAAIQAAAt6kMgAFAAAABAAAAv+

Instead, I’d prefer for it to use a proper file path as a source. I don’t think this is any feature of the -render command; in fact, the comment below (from another thread) is pretty much what I think I want.

Any ideas? Worst case scenario, I can create a sort of utility to do this post work myself, but it doesn’t seem like the best option.

Thank you!

#2

Have you had a look at the documentation, specifically under the heading “Creating external images under Node.js” ?

Recommend backing up your wiki folder before you try this as getting the commands wrong can lead to data loss.

#3

Hello! Thanks for the link. In fact, I had not come across this!

I just worked through the tutorial, and this seems like something I could use. Of course, the example looks into exporting the whole wiki, but that is not what I need. So maybe I could mix my

tiddlywiki --rendertiddlers [!is[system]tag[public-eng]] $:/core/templates/static.tiddler.html public text/plain

command with this externalimages template? But I’m not sure this is something I could achieve.

EDIT: Still working some stuff out. What I saw from that example is that I can export a clone of my wiki into a single .html, and images are rendered externally, which is exactly what I want. But I render my tiddlers individually, not as full wiki…

Of course, externalimages is not a template. I’m wondering how $:/core/save/all works…