Towards a friendlier workflow for images in notes

#8

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 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.

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.

#9

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

1 Like
#10

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

#11

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)

2 Likes
#12

Wow,
This is absolutely amazing! Thank you Saq.

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

1 Like
#13

Very modern approach, looking forward to future updates.

#14

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.

#15

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?

3 Likes
#16

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.

1 Like
#17

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?
#18

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

1 Like
#19

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… :face_with_monocle: :ok_hand: … and realized only afterwards that I had not moused-over to the check-mark to confirm that new name. :grimacing:

Time to go open that silly new image.png in edit mode to rename it, … :thinking: 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… :scream:

2 Likes
#20

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.

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

#21

I am not referring to editor tools in the current editor or a popup therein for aligning images, but rather an entire new class of editor that renders transcluded images inline and provides affordances to align and resize them.

1 Like
#22

If we are talking about the image editor, it would be a good idea to rebuild this, because at the current stage it is lacks many features that would be necessary to make it universal enought so that I would really use it.
namely: cropping, perspectitve distorsion and alpha-channel.

#23

Image cropping is a relatively simple action if you use it for GIF or PNG screenshots. After cropping it’s possible to save without image quality loss. … But as soon as JPG is involved there are actions, which can be applied without loosing image quality and other actions will lower image quality with every load → modify → save action.

Fixing the perspective distortion needs advanced algorithms and should already be applied, when an image is created, because it’s the least amount of work needed to put into the whole workflow, if it done immediately.

Creating an alpha-channel is also advanced. Most of the time the alpha channel is used to create transparency, but it can also be used for other effects like “height maps”, which is a completely different “beast”.

So what I want to say is, that even “simple task” can become complex as soon as there are minimal changes to the “standard” workflow a browser can do out of the box.

I think it should be completely avoided, since there are a lot of dedicated image apps which create good results.

I like to use https://squoosh.app/ to experiment with lower image sizes using lossy compressions like JPGs

I like to use IrfanView and its filter addOns for “simple” modifications and batch-processing of many images.

I personally would never try to implement something into TW, because it can be done much easier and much better with dedicated software.

2 Likes
#24

Any kind of image editing/compression is entirely outside the scope of what is being discussed here. Apologies for any confusion on that front.

#25

THank you for your thoughts.
The alpha-channel would have the most advantages in TW because this would make it possible to draw over images e.g. to demonstrate something.
But if you use TW as classroom-tool, it would be good not to be forced to leave the TW to perform tasks - even if you can easily find tools on the net to do something like this.
Imagine you capture the photo of a drawing but have to crop it, it would be cool to do this in fast and direct.
@saqimtiaz sorry for the confusion :wink: your tool drives me to further desires.

2 Likes
#26

I have pushed some updates with customization options.

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

The alternate mode where a popup is shown for image alignment and size options is something I will work on in the future and I need to consider if that is an extension of this plugin or an alternate plugin.

If there are users that find this workflow useful with no popup shown prior to import, feel free to test this and report back if there any issues you come across.

#27

@saqimtiaz where are the images getting stored when we are using this plug in?