Export tiddler as static html with embedding external images

#1

My tiddlywiki is configured with node.js under Windows 10. All images are externally stored under files folder.

I would like to export tiddler(s) as static html file to share with other colleagues. The static html files are working fine except images which are not embedded into html.

Could I embed external images into static html file?

#2

If you are happy with continuing to use the external links the answer is yes, because html can use external links, most likely without change.

To embed the external images into the static file you will possibly need to retrieve them first into your wiki, or a utility one set up to do this. Then make sure the save static html file includes them (I think it does).

The thing about exporting as static html is there are a set of templates defined in tiddlywiki to do this. If they do not do what you wish, you can clone and save/export with a custom template with any desired changes.

Although as all images are already external in your case just test by transuding some images in one tiddler and export it.

#3

Hi

Does it have to be html? What about pdf?

If you want to export as a pdf then most browsers offer save as pdf in the print menu, I am not sure how the non-embedded images will work out - my expectation is that they will appear.

I use the tiddlywiki print plugin rather than the browser print - the steps I would use are…

  1. Open tiddler in the story river - use tiddler option to close others so that it is the only tiddler (to play safe).

  2. Select (highlight) the contents of the tiddler

  3. Click on the print option ( assuming you have the print plugin installed ).

  4. When the print dialog pops up select “Save as pdf” - the exact phrasing will be browser specific.

  5. Save out as a pdf.

The main point here is that save/export as pdf does not exist in standard Tiddlywiki but most browsers offer the save as pdf option in the print page dialogue - the trick is to make sure you only save the selected region and not the whole story river which is why I recommended the extra step of closing other tiddlers. Also remember if you use the reveal functionality to fold text then you will need to open all sections of hidden stuff in the tiddler before saving to pdf otherwise your pdf will show the closed item not the open one.

#4

Just to add to @jonnie45’s instructions you can first open a tiddler in new window, then print that to print only the contents of the current tiddler, which itself may be transcluding other tiddlers. ctrl-p may work but there are other ways depending on the browser.

#5

Thanks. Actually, I am using printriver plugin to print tiddlers to pdf, but thought it might be an existing solution to export static html with external images.

#6

Hi @Zheng_Bang there are a couple of approaches that might be worth considering:

  • Embed the images as base64 data URIs. There’s currently no direct way to replace a reference to an external image with the base64 representation. I think the easiest approach might be to temporarily import the images from the /files folder as ordinary tiddlers.
  • Reference the images in a /files subfolder alongside the exported HTML files. This would just require copying the images between the two files directories, which would currently have to be done externally (eg via a cp command), but one could imagine a built-in TW command to do the same thing
#7

To get a html of the tiddler, try the Toolbar Export button and select “Static HTML” from the dropdown.

Posting also out of self interest. I found this method a week ago but forgot today and spent an hour searching for same functionality before seeing my note to use this method in my own tiddlywiki. So if that happens again my next round-about search may be shortened.