Are there any benefits of using the $image widget?

#1

Subj. When should I use the widget and when can I simply transclude an image tiddler?

#2

The difference is very small. For image tiddlers with the type field set, the rendered raw html are the same (renders an img element), the small difference is that transclution notation is parsed as a Transclude Widget inside a TiddlerWidget, while image widget and wikitext image syntax are parsed as image widgets.

For svg tiddlers with type field didn’t set to image mime type or empty, the image widget won’t render it, only transclusion can be used. For svg tiddlers which require wikifying (like core icons), the image widget doesn’t work either.

2 Likes
#3

For svg tiddlers with type field didn’t set to image mime type or empty, the image widget won’t render it, only transclusion can be used.

This is worth to be added to https://tiddlywiki.com/#ImageWidget .

#4

The <$image> widget permits the image to be resized directly, without having to use CSS. For example:

<$image source="Motovun Jack.jpg" width="40px"/>
2 Likes
#6

One further thought — your question-framing makes it clear that you already have one specific image tiddler in mind, but that may not always be the case, and the image widget allows lots of room for filtered manipulation that responds dynamically — say within a list or a view template.

For example, I can easily get dropbox urls onto my clipboard, but they always arrive with dl=0 at end, while I need them to end in raw=1 (because only that way does it embed properly)…

Suppose I’m working with a long list in which some of those urls are fixed, and some are not… I can use filter notation with the image widget to check the url and swap in the preferred end-string as needed.

Another use-case: Some book tiddlers have both front and back cover images, and some have only front cover images. IF there’s a back cover, I want to show side-by-side in a view template, and to size them down to make room… The image widget allows me to specify a size conditionally.

That kind of complexity doesn’t work when using wikitext to point to an image.

2 Likes
#7

One further thought — your question-framing makes it clear that you already have one specific image tiddler in mind

The context is I was looking at a piece of wikitext that transcluded a svg tiddler and I was wondering if I may gain any benefits by refactoring it to use the image widget instead. I did not find the answer by reading the docs for the image widget, so I asked here.

I learned that I can’t use the image widget with svg images at all (see above), so it became a non-issue.

#8

For the sake of future visitors, I always try to think about who else might be drawn to the title of a thread (as well as potential future situations for OP). Understanding that your own issue was already solved, I still thought adding more explanation about the image widget might help round out the usefulness of the discussion for those who are curious about “benefits of using the $image widget”.

4 Likes