Let's me try to explain step by step: <$button class="tc-btn-invisible tc-thumbnail-image"> ... </$button> The WidgetButton <http://tiddlywiki.com/#ButtonWidget> creates a button. The "class" attribute defines how it looks like: "tc-btn-invisible" removes the grey box of classic buttons, and "tc-thumbnail-image" is a facility to style the image (this class is used for the Thumbnail macro <http://tiddlywiki.com/#thumbnail%20Macro> that you can see in action in the HelloThere tiddler of tiddlywiki.com).
<$action-sendmessage $message="tm-modal" $param="template/picture" url="./images/Blurry%2520Lawn.jpg"/> The SendMessage action widget <http://tiddlywiki.com/#ActionSendMessageWidget> allows the button to trigger an action by sending a message (and this is why we used a button widget: it's currently the only element taht can trigger an action widget), here "tm-modal <http://tiddlywiki.com/#WidgetMessage%3A%20tm-modal>" to open a modal window. This message can take parameters: - "$param" is the title of the displayed tiddler. As we don't have tiddlers for our images, I use a template tiddler <http://tiddlywiki.com/#TemplateTiddlers>: "template/picture". It acts as a skeleton for the content of the modal. - "url" is a variable (or parameter) for the template The template contains: <$image source=<<url>>/> So the modal will display an image, whose url is the variable set previously in the message "tm-modal". The ImageWidget <http://tiddlywiki.com/#TemplateTiddlers> is used because the source is not already defined, the [img[]] syntax doesn't work with variables. Finally <$image source="./images/Blurry%2520Lawn.jpg" width={{!!imagewidth}}/> displays the "label" of the button, here an image. It is exactly what you had at the beginong, but with an ImageWidget instead of [img[]] (which could work here). If you want to create a macro, you would have to replace the name of the image with a parameter: \define macro-image(url) <$button class="tc-btn-invisible tc-thumbnail-image"> <$action-sendmessage $message="tm-modal" $param="template/picture" url= "$url$"/> <$image source="$url$" width={{!!imagewidth}}/> </$button> And then use it with <<macro-image "./images/Blurry%2520Lawn.jpg">> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/717bd6c6-e789-49e6-9198-37ff6e4b44c6%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
