Adding images using _canonical_uri

,
#1

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?

1 Like
#2

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.

Tiddlywiki as a note taking tool - Positive and negative aspects - Lets discuss
#3

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.

1 Like
#4

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.

#5

If this worked, This means the whole Images wiki would have to be loaded each time you reference an image within it.

  • If it is a node wiki there is a way to publish individual tiddlers simultaneously as “static tiddlers” where you need only load the whole tiddler, not the wiki.
  • With single file wikis you could export static tiddlers.
#6

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

1 Like
#7

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.

#8

This works great thank you. I use a webdav client to upload the picture then drag into this widget and viola! - wonderful time saver.

#9

Now that’s pretty cool. Thanks for trying that out and reporting!

1 Like
#10

@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

#11

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.

2 Likes
#12

OK, I get that now. How do the image files get into the image folder, in your case “Graphics%20Samples”?

#13

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.

Screenshot 2023-04-03 11.15.17 AM
Screenshot 2023-04-03 11.15.17 AM1389Ă—628 97.4 KB

1 Like
#14

For the WebDAV support for FileUploads, you will need the webdav-utils plugin:
https://saqimtiaz.github.io/tw5-plugins-sandbox/#WebDAV%20Utils

2 Likes
#15

THANK YOU so much!!!

1 Like
#16

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

  • the shortcut is WIN + F
  • save file if active window has title Plot Zoom (for RStudio only)
  • directly save file if active window has title Save As or Save File.
  • take a screenshot of current active window, open window paint and save file
  • The timestamp is used as file name.
  • generate text for macro image-basic and copy to clipboard

Then 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