controlling the background image

[pbr]

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

[Scott Sauyet]

(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?

[Paul Reiber]

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

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/dA2DlbW1syg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5a9e7b91-f102-4d34-9bfb-0bc41317683fn%40googlegroups.com.

[Eric Shulman]

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 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size 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

[Paul Reiber]

Thank you, Eric.

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

Kind regards,
-Paul

> To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ea942aed-c191-44a8-93fd-42e340870971n%40googlegroups.com.