I have swapped over to keeping my images in the /files folder and referring to them using the _canonical_uri field.
Now if I add a new image I have tedious process of adding the image (drag and drop) editing the image tiddler to add the canonical field then copying the image itself to the /files folder.
Is there a better way? Am I missing a trick?
I don’t use node js. In my single file wikis, I use tiddlyclip plugin with add on and savemedia add on for saving images. I just take screenshots of the images and then select the image saving rule from the tiddlyclip context menu (which appears on right click). Thats it …the image get saved in the subdirectory of my wiki folder (in a folder named media) and the image is referenced in the tiddler using relative path in this format [img[relative path]]. Title of the image will be based on the title of the tiddler in which image is saved.
instead of storing the images as separate files in a files sub-folder, is there a way to store them in a tw, and then call them from a second tw? that is, have an images.html and a content.html that displays images from images.html? i fiddled with that idea a while back and all i remember is that it failed, but so do most of my experiments.
For node, and single-file TW on webdav, @saqimtiaz has a file uploader plugin that will do these steps for you. I’m not sure what the canonical locatiion of these plugins is right now.
If this worked, This means the whole Images wiki would have to be loaded each time you reference an image within it.
I think the best approach is to keep all images external to your TiddlyWiki instances.
Any TiddlyWiki in which you want an image, drag the URL for that image into something like what I created.
If of any help: [tw5] TiddlyWiki: Drag and drop image link to create tiddler with _canonical_uri link to the image
Unless I’m seeing it wrong, the File Uploads plugin does NOT work with webdav, only github and Fission. I am very excited about a webdav function but I am not seeing it yet.
This works great thank you. I use a webdav client to upload the picture then drag into this widget and viola! - wonderful time saver.
Now that’s pretty cool. Thanks for trying that out and reporting!
@Charlie_Veniot the Image Import Dropable Zone macro works a treat and creates the tiddler with the _canonical_uri field. What it is not doing is importing the image into the folder referenced in the code. It only seems to work from a webpage not from an image in a folder in Windows.
Thanks
TiddlyWiki is an amazing thing, and kicks caboose in oh-so-many ways.
As a browser-based application, it is the ultimate in multi-platform (device agnostic and operating system agnostic.)
However, as a browser-based application, never never never ought it have access to a file system.
Trying to use TiddlyWiki as an image files manager (i.e. put the image in some folder on some device) is not going to work. If it can be made to work, it will not be with native TiddlyWiki script/wikitext. It will be with a web service that you are accessing from TiddlyWiki, but that access will be built with a javascript front-end. Even if it works, I question the wisdom in building that.
Use the right tool for the job re image files management (i.e. putting files in whatever folder etc.). A tool dedicated to the job.
TiddlyWiki can display content that exists outside of the TiddlyWiki instance that is in the same “domain”, and can display content from some other domain in an iframe (if the other domain allows it.)
However, TiddlyWiki is for managing content (creating, organising, searching …) that exists in TiddlyWiki, not content that exists outside of TiddlyWiki.
OK, I get that now. How do the image files get into the image folder, in your case “Graphics%20Samples”?
That folder exists in my Neocities site for BASIC Anywhere Machine.
To put images in that folder, I upload the local image file to the site. (image below)
It is a handy drag and drop. Drag a file into that page in the browser window causes upload to the related server in that folder.
That page at Neocities, that’s a dedicated file manager.
For the WebDAV support for FileUploads, you will need the webdav-utils plugin:
https://saqimtiaz.github.io/tw5-plugins-sandbox/#WebDAV%20Utils
THANK YOU so much!!!
I used node.js with my local tiddlywiki (Windows 10). All images are stored under separate folder (i.e. files/images/<year> under tw root folder).
Image files are stored in each year to reduce number of files in folder. I just need to add a new year folder in 1st January.
Then I wrote an autohotkey script to save file into the specific folder and generate an image macro. Replace <your-absolute-path-to-tw> with your path.
The scripts will
WIN + F
Plot Zoom (for RStudio only)Save As or Save File.paint and save fileimage-basic and copy to clipboardThen I can open the tw and paste into tiddler.
; Win + F
; Take a scrrenshoot and save to tiddlywiki folder and copy the img macro to clipboard
; For plot Zoom in Rstudio. Escape to run MSPaint
#f::
SetKeyDelay, 20
sleep, 100
; If the active window has title "Plot Zoom" (i.e. RStudio Plot Zoom Window)
; Right click and save a new image
; Only works after resizing Plot Zoom Window
if (WinActive("Plot Zoom"))
{
; Right Click at the left
MouseRightClickFromLeft(50, 10)
Sleep, 300
; Down three times
Loop, 3 {
Send, {Down}
Sleep, 300
}
Send, {enter}
Sleep, 2000
}
else if (WinActive("Save As") or WinActive("Save File"))
{
; Nothing to do for save as window
}
else
{
; For other active window. Take a screenshot with active window
send {Alt Down}{PrintScreen}{Alt Up}
sleep, 500
run MSPaint
Sleep, 1000
Send, #{Up}
Sleep, 500
Mouseclick, left, 250, 250, 5
Sleep, 200
send ^v
sleep, 500
Send ^s
}
; Use current time as filename
timenow := A_now
FormatTime, time, timenow, yyyyMMddHHmmss
FormatTime, year, timenow, yyyy
Sleep, 1000
SetEnv ClipBoard, <your-absolute-path-to-tw>\files\images\%year%\%time%.png
Send ^v
Sleep, 500
Loop, 5 {
Send, {enter}
Sleep, 300
}
; Send to clipboard for the img macro
;img_macro = [img[./files/images/%time%.png]]
img_macro = <<image-basic "./files/images/%year%/%time%.png" caption:"" width:"95`%" align:"center">>
SetEnv ClipBoard, %img_macro%
return
I wanted to share this new methodology thanks to a modified approach based on @Charlie_Veniot code.
One of the major friction points with TiddlyWiki has been being able to fluidly add external images that have a _canonical_uri field that points to their source (either on the web or local, as is my case with NodeJS).
I have made various custom image importing tools (including a batch external image importer which relies on custom bash scripting to generate the appropriate list format for the thing to work. My point is that no average user will ever do this, and thus it becomes a major bottleneck for anyone who wants to quickly add images to their wiki without immediately causing bloat).
But Charlie’s solution is the closest I’ve found for a fairly seamless way to add external images and automagically create the _canonical_uri.
In my modification there are a few assumptions:
The local filesystem path will match the TiddlyWiki system path. If I add cat.jpg to my local system at the path ./files/img/animals/cat.jpg … then the system tiddler’s title will also look like $:/images/animals/cat.jpg
The file will need to be accessed via a web browser using the file:///myPath in the url bar … so this works well for single images but not for a batch operation, but often times this is the most common way I find myself adding images to the wiki.
I’ve made it so I can quickly organize an image in one of several most-used top-level categories that I am often typing out. This is a massive improvement to my previous methodology which involved typing both a tiddler title AND a _canonical_uri field, often times the two not match either, creating some low-level disorganization overall. Now things feel much more unified and symmetrical.
Here is the code. Sharing this so that others might find it useful.
I’m not sure if it’s possible to one day be able to drag files from the file system into the dropzone. I will have to look into that further.