Towards a friendlier workflow for images in notes

[saqimtiaz]

Of late I have been contemplating how I might be able to leverage TiddlyWiki for notetaking in certain aspects of my professional life where the notes tend to be a mix of text and images, and speed is of the essence. So far I have been using alternate products with WYSIWYG based editors for this purpose, but that comes with its own set of challenges and shortcomings, especially on mobile.

This has led me to experiment with alternate implementations of the ability to drag and drop or paste images into the editor, in this case a version where the images are imported and given unique titles without the need for user interaction. It is still very early days and much more work is needed, but for anyone interested I have thrown up a demo.

Install the plugin and then drag and drop, or paste, an image into the editor to see the new behaviour.

https://saqimtiaz.github.io/tw5-plugins-sandbox/#%24%3A%2Fplugins%2Fsq%2Fquickimages

[jeremyruston]

Great stuff, thanks for sharing @saqimtiaz

[Scott_Sauyet]

This is great! I could definitely have used this for a project that I did this past fall – and will probably have to repeat in 2025. I look forward to using it then.

To me, the most helpful item in your TODO list would be:

• customization options for the image transclusion wikitext inserted in the editor (size, class options)

[Springer]

Fantastic! Thanks for working on this and sharing.

I tend to worry about regularly importing images directly into the wiki, given their size.

But if there’s ever an image-upload solution for tiddlyhost (perhaps only with paid plan?), this will be especially useful for me! And even now, sometimes I do just want a quick solution, even if it will weigh the wiki down a bit.

[TW_Tones]

@Springer

But if there’s ever an image-upload solution for tiddlyhost (perhaps only with paid plan?)

So lets mention @simon

[Scott_Sauyet]

@Springer

And even now, sometimes I do just want a quick solution, even if it will weigh the wiki down a bit.

Is there not some built-in technique to move internal images to external ones?

I haven’t actually used external images for anything yet, although I did investigate them when building a travelogue for my mother’s recent trip. (In the end, once I converted the .pngs into .jpgs, it loaded fast enough with internal images.)

But I would have simply assumed there are easy conversions. I guess it depends on how you’re hosting, though.

[Springer]

@Scott_Sauyet

I guess it depends on how you’re hosting, though.

Exactly. @saqimtiaz has developed a great uploader-solution for github-hosted wikis, but tiddlyhost does not yet have such file-hosting abilities (and tiddlyhost is where it’s at for me, for a variety of reasons).

[saqimtiaz]

@Springer

I tend to worry about regularly importing images directly into the wiki, given their size.

But if there’s ever an image-upload solution for tiddlyhost (perhaps only with paid plan?), this will be especially useful for me! And even now, sometimes I do just want a quick solution, even if it will weigh the wiki down a bit.

Understandable. My personal use cases for images fall into two categories:

1. Short lived wikis for which file size is absolutely not a concern
2. Wikis hosted on WebDAV where the uploader plugin automatically externalizes the images saving them on the filesystem.

@Scott_Sauyet

To me, the most helpful item in your TODO list would be:

• customization options for the image transclusion wikitext inserted in the editor (size, class options)

@Scott_Sauyet that is pretty high up on the list for me as well. Ideally this needs to be paired with some sensible CSS class definitions that can be applied for different alignment and sizes.

@Scott_Sauyet

Is there not some built-in technique to move internal images to external ones?

If you use tiddlywiki on node.js there is a command that can do so. For single file wikis, the Upload plugin provides an option. It uploads any tiddlers matching a user specified filter to a backend, creating a canonical URI tiddler in its stead. Support for different backends is provided by uploader modules, which are pretty straight forward to write for RESTful APIs.

If TiddlyHost ever offers support for file uploads, it should be possible to write an uploader for it. You can convey your interest for this potential TiddlyHost feature here.

[JanJo]

@saqimtiaz

Wikis hosted on WebDAV where the uploader plugin automatically externalizes the images saving them on the filesystem.

Does Web-DAV automtically support Lazy Loading of Images? WOW!

[saqimtiaz]

@JanJo

Does Web-DAV automtically support Lazy Loading of Images? WOW!

This is a result of using the FileUploads plugin and WebDAVUtils plugin more so than the WebDAV protocol itself.

[Ste_W]

@saqimtiaz

but that comes with its own set of challenges and shortcomings, especially on mobile.

I’ve found nebo notes and Fii notes to be good mobile solutions. For an stripped back almost TW experiance there is also neutrinote.

I’m on android but I think fruit based versions are available.

(Edit:links added)

[Mohammad]

Wow,
This is absolutely amazing! Thank you Saq.

Minore suggestion:
Have a config to be able to set the image prefix or naming rule.

[linonetwo]

Very modern approach, looking forward to future updates.

[saqimtiaz]

I would like for users to be able to toggle between this and the default core import behaviour via a toolbar button. Any suggestions for an appropriate icon would be appreciated.

[saqimtiaz]

Having worked on this some more, I am starting to wonder if the real value isn’t in getting rid of the popup that currently appears when you drop an image on the editor, but in making it more useful. The seamless import and unique title generation is great, but I would also love to be able to choose the size and alignment when I drop/paste an image.

A popup that optionally let’s you rename the image but primarily focuses on image layout (via application of classes and size/width attributes) is likely going to be more user friendly than having to hand edit the markup to add/change classes, especially on mobile devices. There could be an option to suppress the popup when it’s not needed. I am imagining something with buttons for right/left/center alignment that apply the appropriate classes, and perhaps a range widget to scale the size of the image relative to the tiddler.

Thoughts?

[Scott_Sauyet]

@saqimtiaz

Having worked on this some more, I am starting to wonder if the real value isn’t in getting rid of the popup that currently appears when you drop an image on the editor, but in making it more useful.

Agreed on all counts. A tool that let me choose one the the three basic alignments and choose size is exactly what I’d want for dragging onto a tiddler under edit.

It would be nice to also offer to change the underlying image size when necessary. If I drag a 3000x4000 px raster image only to show it at 150x200, it would be nice to actually reduce the image before storing it in the wiki. But I don’t know if TW has tools for this, and I can’t come up with a convincingly simple, beginner-friendly, user interface for it.

[TW_Tones]

@Scott_Sauyet

it would be nice to actually reduce the image before storing it in the wiki.

Of course once imported the image could have its size reduced, and reflected automaticaly, so this need not happen at import. In other platforms tools allow importing images to a default or range of resolutions and sizes, but I have found it better to source the image at just a little better than the correct size.

• I could see tools on images that exist to resize would be helpful
• If the files are external then that will need different treatment, on import?

[saqimtiaz]

@Scott_Sauyet

It would be nice to also offer to change the underlying image size when necessary. If I drag a 3000x4000 px raster image only to show it at 150x200, it would be nice to actually reduce the image before storing it in the wiki. But I don’t know if TW has tools for this, and I can’t come up with a convincingly simple, beginner-friendly, user interface for it.

I have thought long and hard about this since I first worked on the FileUploads plugin a few years back. I had hopes at one point for integrating Squoosh via its library version but that was discontinued before it had a stable release.

I am also extremely hesitant to implement any kind of simple image resizing or optimization techniques as in some of my work, image fidelity and quality is extremely important. As a result I wouldn’t be satisfied with anything short of complete control combined with excellent output quality which isn’t particularly straight forward to achieve. Which isn’t to say that there isn’t scope for such a solution in TiddlyWiki as potentially an interim step before import. Personally I just prefer to handle that independently outside of TiddlyWiki for now.

On a related note, the popup would likely have an option to browse the filesystem to choose an image if its triggered without dropping/pasting an image. This would be useful on mobile devices where dropping/pasting an image isn’t quite so easy.

I am realizing that what I really want is a whole new type of text editor that renders transcluded images inline (which are clickable to choose alignment and size) combined with the ability to edit raw markup instead of rendered text, but that’s a whole other rabbit hole that I must avoid for now

[Springer]

@saqimtiaz

A popup that optionally lets you rename the image but primarily focuses on image layout (via application of classes and size/width attributes) is likely going to be more user friendly than having to hand edit the markup to add/change classes

Yes!

Also, while this is up for discussion, I’m OFTEN hitting my head over the import dialog interface in TW because there’s no keyboard shortcut (as far as I can tell) for getting into the renaming text-box, and no keyboard shortcut for confirming the new name. Return or enter would be intuitive! Or, just use the title that is actually currently displaying in the name-entry area (which is apparently stored in some temp-tiddler purgatory, as if I might have typed something very dangerous by accident).

I don’t think I can count the number of times I’ve taken the effort to get into that box and type the desired name for an imported thing, and then clicked “import” button while happily looking at my fancy new image title displaying there… … and realized only afterwards that I had not moused-over to the check-mark to confirm that new name.

Time to go open that silly new image.png in edit mode to rename it, … Oh but wait, actually it’s time to load up a backup of my whole wiki, because that new image.png has just overwritten the image.png tiddler that still has that name from the last time I imported without remembering to mouse over to the checkbox to confirm my descriptive name…

[Scott_Sauyet]

@saqimtiaz

I am also extremely hesitant to implement any kind of simple image resizing or optimization techniques as in some of my work, image fidelity and quality is extremely important.

I suppose that makes sense. I’ve been thinking about this for quick embeds, where I only rarely would care much about image fidelity. If I’m scaling it down to fit nicely in the flow of a tiddler, I am likely less worried about exactly how faithful my compressed version is. But that’s not the only likely workflow; and those who don’t want it might be hoodwinked by the easy offerings.

@saqimtiaz

I am realizing that what I really want is the image handling abilities of a WYSIWYG editor (clickable images to choose alignment and size) combined with the ability to edit raw markup instead of rendered text, but that’s a whole other rabbit hole that I must avoid for now

Alignment images would likely still be helpful. Why is this a rabbit hole?