TiddlyWiki

Notes on handling variables in TiddlyWiki

In TiddlyWiki, the value of a tiddler’s custom field can be transcluded using {{!!field_name}}. For example, if local_file is a custom field containing a path to an image that the browser can display, the following embeds an image:

<div>
  <img src={{!!local_file}}>
</div>

I would like to use the contents of other custom fields to specify some CSS styling. For example, I have some data about the orientation of some photos in a field called rotate, and would like to display them with the corresponding rotation.

In this case, we can’t easily transclude the rotate field’s value, because the reference is interpreted as part of a literal string. For example, from this:

<div>
  <img src={{!!local_file}} style="transform: rotate({{!!rotate}}deg);">
</div>

the generated HTML will look like (depending on the value of local_file):

<div>
  <img src="P1120090.JPG" style="transform: rotate({{!!rotate}}deg);">
</div>

This HTML successfully displays the image (if the image file is in the same directory as the TiddlyWiki file). However, the rotation information in the rotate field is not yet succesfully read.

In cases like these, where a variable’s value is inaccessible by inline substitution, it’s very easy to get the desired result by writing a short macro, and passing the variable as a parameter to the macro.

For example, we can define the following macro that takes a single parameter, rot. The placeholder $rot$ refers to the value of rot. The <$macrocall> widget can be used to get a value for rot and pass it to the macro.

\define userot(rot)
    <div>
        <img src={{!!local_file}} style="transform:rotate($rot$deg);">
    </div>
\end

<$macrocall $name="userot" rot={{!!rotate}} />

This generates the following HTML:

<div>
  <img src="P1120090.JPG" style="transform:rotate(90deg);">
</div>

The macro call itself can be made into a named macro so that it can be easily invoked from any tiddler. This is done by creating a new tiddler, giving it the tag $:/tags/Macro (so TiddlyWiki makes the macro definition available everywhere), and putting the macro definitions within:

\define rotimg()
    <$macrocall $name="userot" rot={{!!rotate}} />
\end

\define userot(rot)
    <div>
        <img src={{!!local_file}} style="transform:rotate($rot$deg);">
    </div>
\end

The macro definitions can be in the same tiddler or in separate ones.

In the case of my macros above, I can insert the text <<rotimg>> into any tiddler that has the appropriate local_file and rotate fields, and the rotated image will be displayed in that tiddler.