Reducing the friction of using images

[Sebastián Ortega]

Hello,

I wonder if there is some way (plugin?) that would allow to paste images in tiddlers directly. Right now, I'm using the import feature but that's too much friction (unselect current tiddler, paste, import, edit name, copy name, type [img[<name>]).

Is there any shorter way? What do you do with your tiddlywikis?

Thanks

[Mat]

I actually just finished building a plugin that will greatly simplify integrating images with other tiddler content. But it is made for remotely stored images (primarily on Google Drive), i.e not for direct pasting of images... wich, btw, isn't recommended in TW anyway because it bloats the TW file.

I didn't plan on releasing this plugin just yet because it is part of the greater TiddlyGoo project (i.e the integration between TW and Googles services) but if you need this right now, and assuming you can/will use remotely stored images, then I could let you be a test pilot, if you provide me with your email address (I don't want to post a link to it in the forum). That was a long sentence.

<:-)

[R²]

This is of course of those things where Tiddlywiki is inferior to Evernote and its ilk.

I would also love to see some improvement on that end and I believe I quit expanding my use of TW for over a year in part over this. I eventually came back of course, not the least because I love that feeling of being able to tinker around in a somewhat boundless universe. I don't do Minecraft but I get the feeling that the kick is the same, except that TW actually serves one's purposes. There's friction of course, but no straitjacket à la Evernote, and over time, I mostly got over my need for single-use images. I'm now mostly into external linking as per recommendations: I have an external folder with images and use _canonical_uri: to link back. There's even more friction involved (paste image to folder, rename image, create tiddler with _canonical_uri: pointing to the image, import image tiddler to new tiddler) but at least I'm not bloating my TW. I'm also pretty sure this could be easily partly automated with an external macro recorder (atbswp/Autohotkey...). Not as neat, but maybe also something to look into?

++ R²

[R²]

To expand on this, it bears noting that the import feature (and _canonical_uri:) are only worthwhile if the images require some advanced TW function such as tagging. For basic use, there is already much less friction as nothing more than a simple link is needed.

Here's how I currently approach images that don't need tagging (as a TiddlyDesktop user using TW as a personal information manager):

I have subfolders for images in my source folder — for instance /img-inventory for photos of items I keep track of via TW.

So when in need of having an image in my "Old painting 1" tiddler for instance, I can simply save oldpainting1.jpeg in /img-inventory, and then add [img [./img-inventory/oldpainting1.jpeg]] somewhere in the tiddler, which takes virtually no time at all as I'll typically be cloning a similar inventory tiddler and will just change the file name. A custom stamp could be used here too. And to make this even faster, this is batchable and the names could be very well be sequential (0001.jpeg...).

Hope this helps.

[Sebastián Ortega]

Some context to understand my use case: I have my wiki hosted in some server and password-protected with basic HTTP authentication because it's a private wiki. To avoid bloating it with images I lazy-load them at the moment but I plan having a script externalizing the images automatically to a URL available in the same server with the same credentials.

What it would be really nice to me is to be able to paste images without so many steps.

[Saq Imtiaz]

This quick demo that I posted a while back might be of interest:

https://groups.google.com/g/tiddlywiki/c/ueeaCHA7hI0/m/2Ujwl1TABAAJ

If you run TiddlyWiki on node.js, the image can be externalised at the same time as it's pasted and imported as well.

On Friday, March 19, 2021 at 9:06:14 AM UTC+1 mehequeda...@gmail.com wrote:

[Mark S.]

I assume we need the accompanying 

NodeJSExternalFiles plugin if we want to externalize

the image automatically? 

When I tried it without the plugin, it inserted the image as advertised, but of course made a regular TW image tiddler.

When I tried it with the plugin installed, it created the image file in the files directory but did not create any image tiddler (especially not the _canonical_uri that I might have been expecting). The link it created still expected an image TIddler and needed to be hand-adjusted to include the files/ path. I guess if it were to be tweaked it should be tweaked so that the file path in the inserted link includes files/ in the path name. That would make it close to a complete solution. 

When compared to something like Evernote, there's still the additional step you need of first downloading images to your hard drive before importing them back into your TW file.

Thanks!

[Saq Imtiaz]

Hi Mark,

I assume we need the accompanying 

NodeJSExternalFiles plugin if we want to externalize

the image automatically? 

Correct.

 

When I tried it with the plugin installed, it created the image file in the files directory but did not create any image tiddler (especially not the _canonical_uri that I might have been expecting).

I haven't looked at this for a while and the wiki where I use it is still on a June 2020 version of the 5.1.23 pre-release. At least there, it still works. The _canonical_uri tiddler is created and thus the text inserted into the editor still works. I would not be surprised if there are issues with newer TW versions since both the file system code and the import UI have received changes since then. (Note that the  canonical_uri tiddler created doesn't have created/modified fields and therefore does not show up in the Recent tab)

I will revisit when I get the chance, there are other improvements and issues that are still pending as well. This is pretty high up on the list of things that need attention for one of my personal projects, just need to find the time for it.

 

The link it created still expected an image TIddler and needed to be hand-adjusted to include the files/ path. I guess if it were to be tweaked it should be tweaked so that the file path in the inserted link includes files/ in the path name. That would make it close to a complete solution. 

I have considered having the option to import images without creating an associated canonical_uri tiddler. However, this would make it far more complicated to avoid overwriting previously imported images. 

Other things that still need attention are:

- error handling if there is an error saving the external file

- potentially allowing to save to a specified subdirectory in the files folder

- a progress bar for the upload would be useful for those not using this locally but over a slower remote connection.

 

When compared to something like Evernote, there's still the additional step you need of first downloading images to your hard drive before importing them back into your TW file.

Copying and pasting from a webpage does work IIRC but drag and drop does not. The usual issues with cross domain restrictions make it difficult to parse the URL and retrieve the image.

A good general purpose solution for TW would be if pasting or dragging and dropping an image into the text editor, offered to import the image in the background and insert a transclusion at the position of the text caret, much as GitHub does. I would like to work on this at some point but being realistic it is going to be a struggle to find any time for it in the near future. 

Cheers,
Saq

 

[TiddlyTweeter]

Ciao Mark

It is an interesting issue. Given the intelligence of TW macro-ology you'd have thought it would have been a doddle.

I guess a major issue is that BROWSERS insist on serious constraints on file-handling? That constrain us to cumbersome sub-functions? 

Though Node is freer of them, there is a kind of bedrock architecture it shares with Cousin Single File.

Just a comment

TT

[Mark S.]

On Sunday, March 21, 2021 at 2:07:23 AM UTC-7 saq.i...@gmail.com wrote:

Copying and pasting from a webpage does work IIRC but drag and drop does not. The usual issues with cross domain restrictions make it difficult to parse the URL and retrieve the image.

Trying it today with pasting, and it's pretty neat. The import dialog gives you the chance to rename the image  But you can't paste into the UI insert-image tweaked dialog, which would allow you to get things down to almost one-stop-shopping for images. For me, copying/pasting is often as good as dragging/dropping.

Thanks!

[Saq Imtiaz]

@Mark have you tried clicking on the box where it says "Drop images here to import", and then pasting? The div needs focus for the import to be triggered by paste. On Windows 10 and Ubuntu this works for me with Chrome.

[Mark S.]

Ok! I think a little text about that would help the clueless like me. There's no "there" there for you to select. But it all seems to work. I can see running a special node.js instance just for collecting images which could then be bulk-moved to another TW. file.

Thanks!

[Saq Imtiaz]

Understandable Mark. 

However, as the original post clearly states, the UI is a quick 5 minute hack to demonstrate the idea :). 

Since this can all be done with wikitext, I had hoped that someone might feel inspired to build on it.

Once I get the underlying functionality to a place where I am happy with it, I'll  consider redesigning the UI from scratch for the core. However this isn't a priority for me. Personally my usage and focus with images is as part of a heavily customized TiddlyWiki edition that has a completely different UI and needs, and the work done there in terms of a friendly UX wouldn't be useful for others.

[Javier Eduardo Rojas Romero]

On Sat, Mar 20, 2021 at 04:23:40AM -0700, Sebastián Ortega wrote:
> Some context to understand my use case: I have my wiki hosted in some
> server and password-protected with basic HTTP authentication because it's a
> private wiki. To avoid bloating it with images I lazy-load them at the
> moment but I plan having a script externalizing the images automatically to
> a URL available in the same server with the same credentials.
>
> What it would be really nice to me is to be able to paste images without so
> many steps.

I have a similar setup: a wiki hosted using a regular webserver with
basic HTTP auth, *and* I use webdav as the saving method.

Since I use webdav, that means I can create (upload) files by doing an
HTTP request, and I've thought about getting tiddlywiki to allow me to
drag and drop an image, and have it upload it via webdav. But I haven't
gotten around to it...

> >> straitjacket *à la* Evernote, and over time, I mostly got over my need

> >> for single-use images. I'm now mostly into external linking as per
> >> recommendations: I have an external folder with images and
> >> use _canonical_uri: to link back. There's even more friction involved
> >> (paste image to folder, rename image, create tiddler with _canonical_uri:
> >> pointing to the image, import image tiddler to new tiddler) but at least
> >> I'm not bloating my TW. I'm also pretty sure this could be easily partly
> >> automated with an external macro recorder (atbswp/Autohotkey...). Not as
> >> neat, but maybe also something to look into?
> >>
> >> ++ R²
> >>
> >>
> >> Le vendredi 19 mars 2021 à 09:06:14 UTC+1, mehequeda...@gmail.com a
> >> écrit :
> >>
> >>> Hello,
> >>>
> >>> I wonder if there is some way (plugin?) that would allow to paste images
> >>> in tiddlers directly. Right now, I'm using the import feature but that's
> >>> too much friction (unselect current tiddler, paste, import, edit name, copy
> >>> name, type [img[<name>]).
> >>>
> >>> Is there any shorter way? What do you do with your tiddlywikis?
> >>>
> >>> Thanks
> >>>
> >>
>

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9b687f8d-e1f1-4d4c-8075-b5fdd7fb9387n%40googlegroups.com.

[Mark S.]

A little feedback, in case you decide to work on it some more.

There's a somewhat  serious problem. When you use the interface, it creates a 6 byte image file in the tiddlers folder. This works fine for the duration of the current node session. But when you restart node.js, the files inserted with [img[]] wikitext don't render -- they think they are dealing with a base64 image file.

Thanks!