Tiddler Background Image from a Field Link to Local File?

#1

Been beating my head against the wall for a couple of days with this one…

I want to style individual Tiddlers with a background image. No problem if I specifically declare it within the Tiddler itself as:

< style >

< div class=“tidframe” style=“background-image: url(‘https://i.imgur.com/ubqmGsP.jpg’);” >

< /style >

Or within my Stylesheet (using a Tag as a trigger):

/* Custom Tiddler Background, Based on Tag */

div.tc-tagged-Christmas {
background-image: url(“http://i.imgur.com/D3HOBmh.jpg”);
border-radius: 10px;
}

But what I really want to do is have a field (“tidbg” in this case), and store the location of a local background image in it, then have it picked up and displayed in the Tiddler.

Something like this:

< div class="tidframe" style="background-image: url({{!!tidbg}});" >

I already do this with the ‘img’ tag:

< div class="imgcent">< img src={{!!previmg}} >< /div >

but I cannot seem to find a syntax that will work with background-image

Any help greatly appreciated :slight_smile:

#2

The problem is that attribute values are not “wikified”. As a consequence, embedding {{!!tidbg}} “simple transclusion” syntax directly within the style="..." attribute value does not actually insert the tidbg field value into the CSS syntax.

Fortunately, there is still a way to achieve your goal by using “filtered transclusion” syntax to assemble the desired CSS syntax attribute value, like this:

<div style={{{ [[background-image:url(]] [{!!tidbg}] [[);]] +[join[]] }}}>

enjoy,
-e

3 Likes
#3

I did this with a macro:

\define header(bgpic)

<!-- Page Header -->
  <header class="masthead" style="background-image: url('./images/headers/$bgpic$')">
...
  </header>

<$macrocall $name="header" bgpic={{!!bgpic}} />
#4

Thank You so much, Eric - That works just great! :slight_smile:

Geez, is there anything you don’t know about TiddlyWiki? :rofl:

I can’t pretend to decipher what’s going on with that line, my eyes (and brain) sort of go fuzzy when looking at a long filter or statement like that, but it solves my dilemma so I’m happy.

#5

Thank You for the reply, @digitalp3 :slight_smile:

While looking a tad simpler than Eric’s answer above, I was not able to get it to work.
I suspect it has something to do with the use of ‘header’ vs. my use of a div, but I’m not sure.

Thanks again, though.

#6

Here’s a little breakdown of what this filter is doing:

  • The outermost {{{ and }}} enclose filter syntax to be evaluated and then assigned as the value of the style attribute (aka, a “filtered transclusion”)
  • There are four separate “filter runs”:
    • [[background-image:url(]]
      uses double square brackets to define a literal string; i.e., “background-image:url(”
    • [{!!tidbg}]
      is a field reference that retrieves the value stored in the tidbg field of the current tiddler
    • [[);]]
      is another literal string, i.e., “);”
    • +[join[]] concatenates the output of the previous three filter runs to construct a single text value
  • Thus, if written in a more conventional programming syntax, the above might appear as:
    "background-image:url(" + tidbg + ");"

Note: Here’s another way to contstruct the needed CSS syntax, using a macro:

\define bg() background-image:url($(tidbg)$);

<$let tidbg={{!!tidbg}}>
<div style=<<bg>>>
...
</div>
</$let>
  • The bg() macro
    inserts the value of the tidbg variable into the surrounding CSS syntax
  • <$let tidbg={{!!tidbg}}>
    gets the background image URL from the tidbg field in the current tiddler and sets the tidbg variable
  • <div style=<<bg>>>
    invokes the bg macro to construct and apply the CSS syntax.

Hope this helps make things a bit clearer…

-e

#7

I was wondering if the background image could be introduced to a tiddler via the tiddlers class field?

  • Then each available background would have a class defined.
  • With a tiddler and/or a Local file
#8

Yes. Something like this:

First, create a tiddler (e.g., “Backgrounds”), tagged with $:/tags/Stylesheet, containing:

.bg1 { background:url("http://i.imgur.com/ubqmGsP.jpg"); }
.bg2 { background:url("http://i.imgur.com/D3HOBmh.jpg"); }
.bg3 { background:url(<<datauri "Motovun Jack.jpg">>); }
etc...

Then, in the desired tiddler, add a field named class with a value of “bg1” (or “bg2”)
or, to apply a background image to a specific element: <div class="bg1">

Using this method has some definite advantages:

  • All background images are defined in one stylesheet tiddler
  • No complicated filtered transclusions or macro definitions
  • Backgrounds can be applied to any element using simple CSS classname references
  • Backgrounds can be combined with other CSS classnames and styles, e.g.,
<$button class="tc-button bg3" style="background-size:cover;width:20em;height:10em;">
<$action-setfield $tiddler="SomeTitle" text="text goes here"/>
</$button>
#9

Thanks Eric, and presumably we can using tiddlers containing images as well? in a slightly different way although;

  • And the other advantages you outline.
  • We may also want to tile smaller images.
#10

The 3rd line in my example “Backgrounds” stylesheet demonstrates using a tiddler containing an image:

.bg3 { background:url(<<datauri "Motovun Jack.jpg">>); }

With regard to “tiled” backgrounds:
By default, if you don’t specify any background-repeat style attributes, images are automatically tiled (i.e., repeated in both vertical and horizontal directions).

Thus, on https://TiddlyWiki.com, if you including the following in the “Backgrounds” stylesheet:

.bg4 { background:url(<<datauri "Pinstripe.gif">>); }

You can then add a class field with value bg4 to any tiddler (e.g., “HelloThere”), and that tiddler’s background will be tiled with a “pinstripe” repeating pattern.

Note: I have a number of “texture” images that I have published on https://TiddlyTools.com. Just use the regular sidebar search and enter “texture”. You can then drag-and-drop any of these textures to your own TiddlyWiki, and use the technique described above (i.e., a “Backgrounds” stylesheet tiddler) to define and use class names for those textures.

1 Like
#11

Thanks. Code sample missing?

#12

oops. I hit ctrl-enter while typing the example, and that submitted the post. I’ve updated that post to finish entering the example.

1 Like
#13

Thank You for this, Eric :slight_smile:

I’m saving all this in a Tiddler, so I can pore over it more later.

Seems I’ve spurred a bit of a discussion!

Would your new Backgrounds Stylesheet version also be able to handle local files in a folder?

#14

For locally-stored image files, use the _canonical_uri method to define a tiddler that refers to the external image file. See https://tiddlywiki.com/#ExternalImages. Then use the <<datauri "TiddlerName">> syntax in the “Backgrounds” stylesheet, as shown in my previous example.

#15

Alrighty, sounds feasible!

At the moment, your previous solution is better for the TW I’m working with, as I’d like to keep the BG link in the Tiddler itself, but I can definitely see using the Stylesheet method on a couple of other TW’s.

You da man, Eric :slight_smile:

and Thank You, @TW_Tones for your question.

1 Like
#16

Welcome to the community @Chan_Droid and for a productive question, and thanks @EricShulman I particular like the textures you pointed us to.

I am just adding this method to my own documentation, a few notes;

  • It can make sense to include color for the text within the background CSS for readability eg color: white; for a dark background.

I am keen to use this class field method but limit the background to the tiddler body, or everything but the body, just the title and other customisations.

  • Perhaps a new topic to build a collection of using backgrounds methods?
#17

Thank You for the welcome, @TW_Tones :slight_smile: – I’ve actually been around here for years, just under another nick (Zaphod) in the Google Groups, and have been inactive for a long time…

Yes, I’m using a light background-color with dark text for one of the modified Tiddlers with the new backgrounds, with an opacity of 0.8. More creative souls could surely whip up some interesting-looking Tiddlers by playing with color, background-color and opacity.

I experimented quite a bit with opacity ‘back in the day’ (2016) when I created a SideBar Shade plugin for use with full-screen backgrounds in TW. But looking at the coding now, I can remember little to nothing of how it worked or how I created it (thank you, old age…)

It’s stored at MediaFire, if you’d like to see it: https://www.mediafire.com/file/8owg00tonuuej2l/Zaphod2016.tiddlyspot.com.html/file

1 Like
#18

I note its still at Zaphod2016.tiddlyspot.com

FYI: TiddlyTalk said

This is the first time Chan_Droid has posted — let’s welcome them to our community!

#19

But I thought TiddlySpot had closed down - I made a new account at TiddlyHost (and sadly have never done anything with it…).

Yeah, I was Zaphod (or Zaphod2016?) on the GG, but when this incarnation took flight, I decided to reinvent myself! :rofl:

1 Like
#20

I’ve developed a more comprehensive interactive tool for applying selected background images/colors to any set of CSS classes:

see TiddlyTools/Palettes/Backgrounds and TiddlyTools/Stylesheet/Backgrounds (used to apply the background settings at startup)

The interface includes:

  • droplists to select:
    • the current palette to use (with associated buttons to edit/clone/delete the palette definition)
    • a list of CSS class elements to bind to backgrounds (with associated buttons to edit/clone/delete element definitions)
    • a list of images, color names, and palette items to apply to the currently selected CSS class element (with associated buttons to edit the selected image and set filters for the list of images and list of colors.
  • buttons to set background-size (center, scale, width, height, stretch, tile) and background-position (“pin” vs “scroll”) CSS display options
  • a checkbox to “toggle thumbnails” so you can view all current background bindings at once.
    • you can also click on a background image itself to toggle between full-size and thumbnail images

Note that all class-to-background bindings are palette-specific, so if you are using a “dark” palette (which typically has a light text color), you can apply dark backgrounds, but if you are using a “light” palette (which typically has a dark text color), you can apply light backgrounds.

Note also that, when visiting https://TiddlyTools.com, you can select a palette (using TiddlyTools/Palettes/Chooser or TiddlyTools/Palettes/Backgrounds) and that palette selection will be saved using my TiddlyTools/Cookies/Manager functionality (see TiddlyTools/Cookies/Info for details), so that when you reload the page, your selected palette will be automatically re-applied.

1 Like