Transcluding Base64 Image as Tiddler Background

[Scott Simmons (Secret-HQ)]

Hi, all —

In my ongoing quest for translucent tiddlers, I've started using images of varying color and opacity as the background for my tiddlers.

However, it occurs to me that, instead of pointing to these images elsewhere, I could embed them in my TWs and reference them without having another resource to keep track of.

My current stylesheets look something like this:

.tc-story-river .tc-tiddler-view-frame {

  background:url('images/backgrounds/92-percent-opacity-white.png') !important;

}

But if I move that PNG into a tiddler ($:/backgrounds/92%white.png), can I transclude it into my stylesheet?

I'm including transcludeinline among my stylesheet tiddler's pragma:

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline html

but I'm not pulling in the content (the image) from the tiddler.

[Scott Simmons (Secret-HQ)]

A-ha!  It occurred to me that the core must be doing this somehow with background images, so I went looking and found TiddlyWiki's native <<datauri>> macro.

This is how to do what I was trying to do:

.tc-story-river .tc-tiddler-view-frame {

  background:url('<<datauri "$:/backgrounds/92%white.png">>') !important;

}

Some days it seems there's nothing Jeremy and the TiddlyWiki community haven't thought of.

edited and reposted to remove typo

[Joshua Fontany]

One thing to note: When using WikiText within CSS tiddlers (tiddlers tagged `$:/tags/Stylesheet`), you do NOT want to set the tiddler-type to `text/css`. This would disable parsing of the wikitext. Leave it blank or set it to `text/vnd.tiddlywiki5`.

Best,
Joshua F