[tw5] controlling the background image

Google Group (Read Only)
#1

Greetings Tiddly Wickers,

I want to implement something in TW and I’m not at all sure how to do it.

The goal is, when a tiddler is added to the story, if it has a field “background” with the name of an image tiddler, the page background would get set to that image. Possibly another fieldwork (backgroundoptions?) could specify span, cover, scroll, and such.

I had originally thought it could be done when a tiddler becomes the current tiddler, but Jeremy mentioned TW doesn’t have a notion of the "current tiddler’ in the sense of the tiddler that is currently being viewed. He mentioned the core Dynannotate plugin, but I’m hopeful to avoid that level of complexity.

The specific trigger isn’t important to me, as long as when the end user clicks around and opens tiddlers, the background can be changed on a per-tiddler basis.

What do you think?

Thanks!
-Paul

#2

(Note that most of the discussion for TW is being held at https://talk.tiddlywiki.org/. You might get more response there.)

One question: Are you using a story view that opens just one tiddler at a time? If not, what’s your expected behavior when there are multiple tiddlers open with background images?

#3

Hi Scott,

For the typical end user browsing experience, I think “whichever tiddler is opened most recently” would work fine.

I can imagine situations where a single-tiddler story would be preferable, but my hope is that it wouldn’t be required.

I’ll check out talk.tiddlywiki.org and if this doesn’t get traction here in the google group I’ll follow up over there.

Thank you!
-Paul

#4

Try this:
Create a new tiddler (e.g., “SetPageBackground”), tagged with $:/tags/Stylesheet, containing:

<$let curr={{$:/HistoryList!!current-tiddler}}>
body.tc-body {
background-image:url(<$macrocall $name="datauri" title={{{ [<curr>get[bg]] }}} $output="text/plain"/>);
background-size:{{{ [<curr>get[bgsize]] }}};
}
</$let>

Then, in any tiddler, added a field named “bg” containing the name of an image tiddler,
and optionally, a field named “bgsize” containing desired CSS background-size attributes (e.g., “cover”, “auto auto”, “100% auto”, etc.). When that tiddler is navigated to (by clicking its link in the sidebar or from another tiddler), the specfied “bg” image (and bgsize attributes) will be applied to the body.tc-body background.

See background-size - CSS: Cascading Style Sheets | MDN for valid “bgsize” values.

Note for GoogleGroups: do not include the single or tripled “backticks” when entering the tag or tiddler body text. Those are only entered here to provide formatting for this response when displayed in https://talk.tiddlywiki.org/

enjoy,
-e

1 Like
#5

Thank you, Eric.

That is precisely what is needed, and it works flawlessly.

Kind regards,
-Paul

#6

after adding the field name bg, what is the syntax for the next part “…containing the name of an image tiddler”?