Screenshot/img solution

i am very new to Tiddlywiki.

try to build my tiddler with lots of screen shot and imgs . what is the right way to do it?

1, [img width = 300 [./pic/pig1.png]] , relative path way?
2, {{pig1.png}} , transclude way? by import img as tiddler and use canonical_uri:

the advantage for the second method is every img or screen shot is imported as tiddler, but the disadvantage is i can’t figure out how to resize it using transclude.

want help to point me to the right direction, thanks!

I do #1, as 2 will bloat your wiki when you have numerous images. And, yes use a relative path so your wiki can be moved elsewhere and work without changes.

1 Like

thanks for the reply, i agree with you too after try to using this transclude, just feels so complicated.

but with option 1, if i want to reuse some img, it is hard to search it. to wrap it with option 2 seems easier to search and tag / orgnize it. but lose flex to alter the img size .

If I understand the concern you create an image tiddler, eg type is image/jpeg and populate the _canonical_uri field with relative path, then reference it that tiddler like this

[img with=300px [imagetiddlername]]

thanks, it works!

so now i have no concern with either two options. both works.

as for workflow, seems option 2 has less “type/copy paste”, just need to drop that img file into wiki and use [img[imagetiddlername]] to pop it.
for option 1, every time i need screen shot or img in my wiki, i will need to copy img files path and change it to relative path, seems a lot work, is there any easy way to one button or one copy/past to pop the whole “[img width = 300 [./ralative/path.png]]”

I wrote a JavsScript macro so a Windows user could right click on a file in Windows Explorer (while holding down the SHIFT key), and the user selects “copy as path”. Then in TW I added a button (in edit module) that gets the content of clipboard. It verifies that this is a proper absolute path to a file that references a file under the subfolders of the html file. If it does it determines the relative path in the clipboard content and pastes that in, otherwise shows an error.

If I add parameters to the call it could included width and class references in the resulting string.

You need to be careful. If you drop an image into your wiki, it will be physically imported. So it will make your wiki bigger.

(post deleted by author)