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.
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.
yes, i use “attachement plugin”, so when i drop img, it will actually create a canonical URI.
wow, this is excaltly what i need, could you share your Java and button code, thanks very much!
Sure. First, this was not written to be generic for all. It was written to support my implementation. However, for image files, it should work well for you. I wrote it to also support video files for my own needs. Second, when you launch it, your browser will prompt you to accept or block the clipboard access (a security feature of the browser).
The JS method is getRelativePath (file attached) $__plugins_cls_mk_getRelativePath.json (1.9 KB)
with these parameters:
tiddler - tiddler that contains the field you want the relative path pasted into.
field - the field to paste the relative path
currentValue - the current value of the field. Typically this is an empty string, however, this enables the function to append a new relative path with an existing value
token - this is the type of file, “image” is an image file; alternatively, “video”
Example usage with a button (change the styles for your needs):
<$button tooltip="paste image format from clipboard" style="font-size: 10px" aria-label="Paste image format" actions=<<actions "image" "image">> ><$action-setfield $tiddler="$:/plugins/cls/mk/notifier" text=""/>
<span class="tc-btn-text"><$text text="Paste image format" /></span></$button>
This uses an “actions” macro:
\define actions(field, token)
<$macrocall $name=getRelativePath tiddler={{!!title}} field="$field$" currentValue={{!!$field$}} token="$token$" />
\end
I tried this in an empty.html…
When I click on the button (make sure you populated the clipboard first):
End result (image field is populated):
Hope this helps,
Craig
sorry if i am asking some basic question,
i tried to open JS file in vs code, so i can understand it and alter it for my needs.
but how can i make it more readable…
I use NotePad++. It has a JS format feature (a plugin feature) to format JS text. Does this help?
(function () {
"use strict";
exports.name = "getRelativePath";
exports.params = [{
name: "tiddler"
}, {
name: "field"
}, {
name: "currentValue"
}, {
name: "token"
}
];
exports.run = function (tiddler, field, currentValue, token) {
var projectPathTextDecodedPath = "";
var clipboardPath = "";
navigator.clipboard.readText().then(clipboardPath => {
var relativePath = "";
const projectPathTiddler = $tw.wiki.getTiddler("$:/info/url/pathname");
var projectPath = "";
if (projectPathTiddler != null) {
if (projectPathTiddler.fields["text"] !== null) {
clipboardPath = clipboardPath.replace(/"/g, "");
var projectPathText = projectPathTiddler.fields["text"].replaceAll("/", "\\");
var projectPathTextDecoded = decodeURIComponent(projectPathText);
var x = projectPathTextDecoded.lastIndexOf('\\');
projectPathTextDecodedPath = projectPathTextDecoded.substring(0, x);
if (clipboardPath.toLowerCase().startsWith(projectPathTextDecodedPath.substring(1).toLowerCase())) {
projectPath = clipboardPath.substring(projectPathTextDecodedPath.length);
if (token == "image") {
relativePath = "[img [" + projectPath + "]]";
} else {
if (token == "video") {
relativePath = "<video width=\"60%\" height=\"auto\" loop autoplay autobuffer=\"autobuffer\" controls=\"controls\"><source src='" + projectPath + "' type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'></video>";
} else {
relativePath = projectPath;
}
}
}
}
}
if (relativePath !== "") {
if (currentValue !== "") {
relativePath = currentValue + " " + relativePath;
}
var options = {};
this.wiki.setText(tiddler, field, undefined, relativePath, options);
} else {
alert("No relative path found in clipboard text to the location of this project: " + projectPathTextDecodedPath);
}
}).catch(err => {
console.log('Failed to read clipboard contents: ', err);
});
};
})();
If a js-tiddler is exported as a JSON file, it is exported like this. So you can import that file and copy paste the content into a .js file to get the real souce code.