[UI tweaks] Importing and inserting images

[Saq Imtiaz]

I've been working on some import related things for a project. Ran into a wall last night and took a few minutes break to apply one of my tweaks to the process of inserting images into tiddlers for a change of pace.

It allows you to import an image via drag and drop and insert it into the editor of a tiddler in one go.

The usual process of inserting an image into a tiddler is:

• drag and drop.
• $:/Import opens
• import image.
• edit your tiddler
• use the picture drop-down to insert the image tag into the editor.

Now:

• edit your tiddler
• use the picture drop-down to import the image (in the background), and insert the title into the editor in an image tag.

Note:

• The UI is a quick 5 minute hack - re-using parts of the usual import UI - so there is lots of room for improvement. Note that this is all done in wikitext.
• You can play with it here: https://saqimtiaz.github.io/sq-tw/sandbox.html
• The relevant tiddlers are tagged: $:/sq/ui/inline-image-import
• The facility to rename before importing, and the checkbox to import as external file, are from the "NodeJS import as External Files" plugin. The plugin and these tweaks work well together, but are not dependent on each other.

Please feel free to tweak and adapt as necessary if you find it useful.

Cheers,

Saq

[Saq Imtiaz]

Apparently embedded GIFs don't animate, so here is a video:

https://drive.google.com/file/d/1a-wr7Zyd0LIRCxrlbu3tDkXXHZSOApte/view?usp=sharing

On Saturday, June 27, 2020 at 10:13:54 AM UTC+2, Saq Imtiaz wrote:

I've been working on some import related things for a project. Ran into a wall last night and took a few minutes break to apply one of my tweaks to the process of inserting images into tiddlers, for a change of pace.

It allows you to import an image via drag and drop and insert it into the editor of a tiddler in one go.

• The UI is a quick 5 minute hack - re-using parts of the usual import UI - so there is lots of room for improvement. Note that this is all done in wikitext.
• You can play with it here: https://saqimtiaz.github.io/sq-tw/sandbox.html
• The relevant tiddlers are tagged: $:/sq/ui/inline-image-import
• The facility to rename before importing, and the checkbox to import as external file, are from the "NodeJS import as External Files" plugin. The plugin and these tweaks work well together, but are not dependent on each other.

Cheers,

Saq

[Mat]

Thanks for your generous sharing Saq.

Where are the images stored in the first place, to show the thumbnails?

<:-)

[Saq Imtiaz]

Thumbnails are unchanged from the core.

[TW Tones]

Saq

This is a wonderful option. Would it be possibly to use a default width or something like 50% so it would be easy to put content around it?

this is a real gap you have addressed when writing instructions.

Nice work

Regards
Tony

[Saq Imtiaz]

Not sure I follow what you mean Tony. If you want to display text beside an image in the tiddler, that is something completely unrelated but also easily resolved with CSS.

The usual process of inserting an image into a tiddler is:

- drag and drop.
- $:/Import opens
- import image.
- edit your tiddler
- use the picture drop-down to insert the image tag into the editor.

Now:
- edit your tiddler
- use the picture drop-down to import the image in the background, and insert the title into the editor in an image tag.

Nothing groundbreaking, but convenient if you work with images a lot.

[TW Tones]

Saq,

Sorry, let me explain. I love the advantage you have =given us. much better work flow.

All I was suggesting is that I/we modify the insert image editor toobar to insert the image in an [img[imagename]] with a working version of [img width="50%"[imagename]] so the inserted image does not take over the width and height of the tiddler.

Clearly you have modified the insert image editortoolbar item, I am suggesting that this dialogue allow on to select the size (perhaps the custom or some standard sizes) which will be reflected in the image parameter that is inserted. 

We don't have the luxury of a wyisywyg editor that allows us to resize the image in the document to suite the rest of our prose. But we can now insert new images because of you.

Regards

Tony

[Saq Imtiaz]

@Tony this is a quick example of how better workflows around import can be implemented. And it's pure wiki text. Please feel free to adapt as you find useful.

The specific feature you want is actually unrelated to my changes.

You would need to tweak the image-picker macro, and any changes would automatically be picked up by the picture-dropdown in the editor toolbar.

See https://tiddlywiki.com/#image-picker%20Macro

Cheers,
Saq

[TW Tones]

Saq,

I was inspired by your improvement

Thanks

[Xit Ement]

Hello i am new here.

I would love to know how to install this or how to improve image import.

This application blew me away totally. like mind blown 1000%

i have already made many tiddlers and am messing around with tiddlymap.

but then..

i started importing images... then i was like... omg.... no... please don't disappoint me... haha

why so many steps to import an image?

You mention 5 steps but its actually more. - its drag and drop is 2 cause and sometimes 3 cause you need to save and open the wiki.

and you have to click your image tiddler and edit it. which is not just 1 click. its sooo many steps haha.

i don't want to trash this amazing work. and focus on this alone. its an amazing application. and more reason that its a huge thing that holds people back i feel like.

So please do not take this as a negative post.

Infact.

I would love to donate if that helps getting easier image import.

Greets!