Import to a Template?

,
#1

Maybe it’s because I’ve being using some of his solutions in my wikis lately, but this recent post from @Telumire leads me to believe we’re on the same wavelength about importing images.

I’d like to be able to drag-and-drop background images into my wikis and automatically tag them $:/tags/Image and $:/tags/Background plus add some custom fields (recommended palettes, orientation, flip, focus, and caption). The icing on the cake would be naming the incoming tiddler $:/backgrounds/original file name.jpg and filling the caption field with original file name (sans file extension)

The tips in that other thread suggest I could do at least most of this with modifications to $:/core/ui/EditorToolbar/file-import (though I haven’t yet tried adding the fields).

But what if I only wanted to import some images this way?

Is there a way I could create an import template of some kind and drag images onto a specific hot area of the page to apply my import template to only those tiddlers I placed on this custom dropzone? (I’m thinking the dropzone could be in the body of a tiddler, so I’d just invoke that when I needed to import some background images — or I’d place it somewhere on the SideBar or MenuBar to keep it handy in case I needed it.)

Has anyone built anything like this?

Creating a Dropzone
#2

@Secret-HQ you can extend the import mechanism, or create your own drop zones.

I have not yet made this combination, drop to import, but I will see if I can offer some examples soon but perhaps you can find your way;

<div  title="Drop links here to add to a 'link field'">
<$droppable actions=<<droplink-actions>> class="drop-link-bar">

Drop link bar

</$droppable>
</div>
  • This is something I have working, note the droplink-actions are what happens on drop, perhaps this would trigger a custom import?
1 Like
#3

Yes. You can use the DropzoneWidget in a location of your choosing to handle file drops and then implement your own handling of the files after they are imported. This is a two step process. First the dropzone saves the raw data into a tiddler then you trigger the import with the possibility of executing additional actions after the import.

#4

Thanks for the pointers. This got me moving in the right direction, but I’m not sure how to get both things happening at once.

@TW_Tones, I cribbed your <$droppable> trick to create this tiddler:

<div  title="Drag and drop images here to import them as TiddlyWiki backgrounds">
<$droppable actions=<<importBackground>> class="dropzone">

Import Background Images

</$droppable>
</div>

… which successfully invokes my tagging and field actions:

\define importBackground()
<$action-setfield $tiddler=<<actionTiddler>> $field="tags" $value="$:/tags/Image $:/tags/Background" />
<$action-setfield $tiddler=<<actionTiddler>> $field="caption" $value=<<actionTiddler>> />
<$action-setfield $tiddler=<<actionTiddler>> $field="flip" $value="horizontal" />
<$action-setfield $tiddler=<<actionTiddler>> $field="focus" $value="center" />
<$action-setfield $tiddler=<<actionTiddler>> $field="recommended palettes" $value="" />
<$action-setfield $tiddler=<<actionTiddler>> $field="tw-origin" $value={{$:/SiteTitle}} />
\end

… when I drag and drop tiddlers onto it.

I can import tiddlers, then drag them over my <$draggable> widget and modify them — but I can’t figure out how to get both things to happen concurrenty(/sequentially).

I’ve tried applying those same actions to a <$dropzone> widget:

<$dropzone actions=<<importBackground>> class="dropzone">

… but it doesn’t look like <$dropzone> accepts the actions parameter.

I’ve also tried invoking

<$action-sendmessage $message="tm-perform-import" />

… within my <<importBackground>> macro (both at the beginning and at the end) with no success.

I’ve also tried wrapping the <$dropzone> widget within the <$droppable> widget (and vice versa) with no success.

One thing I’ve considered by haven’t tried is duplicating $:/core/modules/widgets/dropzone.js and trying to hack my changes into an alternative tiddler — but I’d like to avoid that approach, even if it might work.

@saqimtiaz, any insights into how to make the two-step process work?

Anyone else tried to do something similar — ?