[TW5] Transcluding(?)/Injecting Background Image Declaration into Stylesheet

[Zaphod Beeblebrox]

Forgive me in advance if I seem to be rambling, I have several questions today, but I think they are all tied together.

I stumbled upon tw5gray, a 2-3 -year-old TW (5.0.5 beta) the other day and was intrigued by the author's method of setting colors, etc through the use of (transcluding? (I've still not wrapped my head around that whole area of TW, yet)) values into other, individual tiddlers. I've since discovered that this is apparently the common practice that Jeremy uses to change some of the settings through the stock Control Panel (but it still looks like Black Magic to me :) ). (As an aside, the thought occurred to me that this might be the ideal way to construct a Theme Constructor (for lack of a better name), whereby all the little nit-picking aspects of the interface could be displayed and changed?)

The author has several $:/themes/grayeul/etch/??? tiddlers, each with values for different parts of the interface, base, colourmappings, colours, settings and tooltips. I took just the colours tiddler and recreated it in my TW for testing:




{
  "primary": "#000000",
  "background": "#fff",
  "foreground": "#333",
  "pagebackground": "#ececec",
  "medium": "#bbb",
  "hoverbut": "blue"
}

The changes are made through a $:/ControlPanel/ThemeTweaks tiddler which contains what looked to be very simple <edit-text> entries:

! Base Colours

* Primary colour: <$edit-text
    tiddler="$:/themes/grayeul/etch/colours"
    index="primary"
    type="color"
    default=""
    tag="input"/>
* Background colour: <$edit-text
    tiddler="$:/themes/grayeul/etch/colours"
    index="background"
    type="color"
    default=""
    tag="input"/>
* Foreground colour: <$edit-text
    tiddler="$:/themes/grayeul/etch/colours"
    index="foreground"
    type="color"
    default=""
    tag="input"/>
* Page background colour: <$edit-text
    tiddler="$:/themes/grayeul/etch/colours"
    index="pagebackground"
    type="color"
    default=""
    tag="input"/>
* Medium contrast color: <$edit-text
    tiddler="$:/themes/grayeul/etch/colours"
    index="medium"
    type="color"
    default=""
    tag="input"/>

I tried substituting the original settings with some simple CSS settings of my own, from my Stylesheet tiddler and pointing the $:/ControlPanel/ThemeTweaks output to be my Stylesheet tiddler, thinking it would/could overwrite parts of the original. Well, it worked, after a fashion: the new data was indeed written into the Stylesheet tiddler, but at the cost of overwriting everything else that it originally contained! Every time I made a single change, the new data entry just wiped out whatever was in the tiddler to begin with and the new Stylesheet file had only one line, the last one I had edited...

I went back and looked at the structure of the $:/themes/grayeul/etch/colours file and saw that items were enclosed in quotation marks, denoting some sort of a structured index, but try as I might, I cannot decipher it enough to add my own values, especially the one I'm most interested in right now, the background property.

If I leave it intact as the author created it, it seems to work fine, allowing me to change any/all of the six entries that are in it. I just cannot add any of my own.

This is for a movie database of sorts that I'm working on. Each tiddler is a different movie, with synopsis, screenshots, posters/dvd covers, etc. Today I would like to accomplish two things:

• Have a pre-selected screenshot come up as the background image for the page whenever the tiddler is opened;
• Also have a drop-down list available (perhaps in the SideBar) with links to external graphics (the pre-selected screenshots from all/most of the movies, listed as the movie's title) that the user can choose from and it will immediately become the background image of the page.

Please tell me that there is a way to 'inject' the background image declaration into either the Stylesheet tiddler, or if worst comes to worst, I can create stylesheet-tagged tiddlers –one for each screenshot that I want to use as a page background– with a link to the external screenshot, as long as they will override whatever background might have been on the page before.

[Jeremy Ruston]

Hi Zaphod

I stumbled upon tw5gray, a 2-3 -year-old TW (5.0.5 beta) the other day

5.0.5 is very old by TiddlyWiki standards. There have been a lot of additions and modifications to the core since then.

In particular, the “colours” tiddler you encountered appears to offer the same functionality as the now built in palette mechanism. Under the Control Panel Appearance tab you’ll find a palette tab which allows the current palette to be switched and edited.

This is for a movie database of sorts that I'm working on. Each tiddler is a different movie, with synopsis, screenshots, posters/dvd covers, etc. Today I would like to accomplish two things:

• Have a pre-selected screenshot come up as the background image for the page whenever the tiddler is opened;

This is a complicated requirement, and not easy to achieve. There’s nowhere else in the core or elsewhere that we have a similar technique of making a global style change in response to a particular tiddler being opened.

The approach I would suggest would be to use the current tiddler field of the $:/HistoryList tiddler to transclude an image tiddler. You’d have to arrange the titles of the image tiddlers to be related to the titles of the tiddlers you’re viewing (eg adding `-image` on the end).

• Also have a drop-down list available (perhaps in the SideBar) with links to external graphics (the pre-selected screenshots from all/most of the movies, listed as the movie's title) that the user can choose from and it will immediately become the background image of the page.

That’s a good deal easier - you can see something very similar in the Theme Tweaks tab of Control Panel. You can copy the code from there and just modify the filter of images to limit it to your screenshot tiddlers.

Best wishes

Jeremy

Please tell me that there is a way to 'inject' the background image declaration into either the Stylesheet tiddler, or if worst comes to worst, I can create stylesheet-tagged tiddlers –one for each screenshot that I want to use as a page background– with a link to the external screenshot, as long as they will override whatever background might have been on the page before.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/44e455b8-e868-42d1-845e-7037391f733c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Zaphod Beeblebrox]

Thank You so much for the quick reply, Jeremy :)


On Friday, July 22, 2016 at 6:44:49 AM UTC-4, Jeremy Ruston wrote:

Hi Zaphod

This is for a movie database of sorts that I'm working on. Each tiddler is a different movie, with synopsis, screenshots, posters/dvd covers, etc. Today I would like to accomplish two things:

• Have a pre-selected screenshot come up as the background image for the page whenever the tiddler is opened;

This is a complicated requirement, and not easy to achieve. There’s nowhere else in the core or elsewhere that we have a similar technique of making a global style change in response to a particular tiddler being opened.

The approach I would suggest would be to use the current tiddler field of the $:/HistoryList tiddler to transclude an image tiddler. You’d have to arrange the titles of the image tiddlers to be related to the titles of the tiddlers you’re viewing (eg adding `-image` on the end).

I've had a look at the $:/HistoryList tiddler (and while investigating it I find that the "colours" tiddler from my previous example was a JSON tiddler (hence the quotation-mark formatting), but I'm no closer to a solution - I'd need more detailed instruction to implement your suggestion.

• Also have a drop-down list available (perhaps in the SideBar) with links to external graphics (the pre-selected screenshots from all/most of the movies, listed as the movie's title) that the user can choose from and it will immediately become the background image of the page.

That’s a good deal easier - you can see something very similar in the Theme Tweaks tab of Control Panel. You can copy the code from there and just modify the filter of images to limit it to your screenshot tiddlers.

Okay, now this looks much more do-able (or so I thought...).

Just been playing with the $:/themes/tiddlywiki/vanilla/settings/backgroundimage, and while it can pick up and display any internal graphics that are stored in base64 format tiddlers within the TW, I need to access external images from the Internet. Once in use, the TW will have well over 1000 tiddlers with heavy use of html (each 'movie' tiddler weighs between 20-50kb), and with screenshots of 20-100kb each (that grow exponentially once converted to base64), it's just not feasible to store them as tiddlers.

I have tried directly inserting the image address, using "[img[ImageAddress]]", html "<img src="ImageAddress">" and also creating a tiddler with any of the above in it and using its title, but none of them seem to work...

Help me to understand - What --exactly-- makes the $:/themes/tiddlywiki/vanilla/settings/backgroundimage tiddler work like it does, enabling it to globally change the background immediately?
And by extension, why can't we use it by setting its value (a link to an external image), just as is done through the ControlPanel section, only from within each 'movie' tiddler when that tiddler is opened?

Sorry in advance if my questions sound dense, but I've seen some amazing things accomplished by your wonderful creation, and find it hard to believe that this simple 'feat' is this hard to overcome.

--Zaphod

[Jeremy Ruston]

Hi Zaphod

I’ll pick up the end of your comments first:

Sorry in advance if my questions sound dense, but I've seen some amazing things accomplished by your wonderful creation, and find it hard to believe that this simple 'feat' is this hard to overcome.

First, it’s positively encouraged to ask questions here. It’s when people engage in back and forth discussion that knowledge and techniques get teased out, here in the open where anyone can join in. There’s a good chance that while I’m typing this somebody else will dive in with ready-to-use code for the needs you describe.

Secondly, addressing why this apparently simple feat is hard to achieve. There’s a double whammy here: what you want to do is not directly supported by the core, which means that there is no ready-to-use mechanism. The second part is that what you want to do is in the domain of CSS. The trouble here is that understanding CSS requires an understanding of HTML, and both are quite complex. TiddlyWiki does a little to ease writing CSS, but it doesn’t really attempt to hide the true, horrific nature of CSS.

So, as a beginner you’ve got the complexities of CSS/HTML and TiddlyWiki multiplied together, and therefore quite a mountain to climb to implement relatively complex new features.

As I said at the beginning, there’s a good chance that someone else in the community can help with your immediate needs, as they have in other threads. But the best response to the situation may be to keep on digging into TiddlyWiki, and learn as much as you can by example :)

Anyhow, in particular, you’ll need to understand transclusion, and the way that it is used in stylesheets to fully implement the solution. But a key part is that the CSS syntax for using an external image as a background is different;

background-image: url(http://www.example.com/bck.png);

So, if you’ve got the image URL readily accessible, it’s pretty easy to set the background colour for an element.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0eb6255a-18b6-4504-9919-2afeafa5cc79%40googlegroups.com.

[Zaphod Beeblebrox]

Hiya, Jeremy :)

On Saturday, July 23, 2016 at 7:57:31 AM UTC-4, Jeremy Ruston wrote:

Hi Zaphod

I’ll pick up the end of your comments first:

Sorry in advance if my questions sound dense, but I've seen some amazing things accomplished by your wonderful creation, and find it hard to believe that this simple 'feat' is this hard to overcome.

First, it’s positively encouraged to ask questions here. It’s when people engage in back and forth discussion that knowledge and techniques get teased out, here in the open where anyone can join in. There’s a good chance that while I’m typing this somebody else will dive in with ready-to-use code for the needs you describe.

Secondly, addressing why this apparently simple feat is hard to achieve. There’s a double whammy here: what you want to do is not directly supported by the core, which means that there is no ready-to-use mechanism. The second part is that what you want to do is in the domain of CSS. The trouble here is that understanding CSS requires an understanding of HTML, and both are quite complex. TiddlyWiki does a little to ease writing CSS, but it doesn’t really attempt to hide the true, horrific nature of CSS.

Well, your statement about "the true, horrific nature of CSS" is certainly accurate - While being quite elegant and enabling us to do marvelous things, it can also be an ugly beast at times.
 

So, as a beginner you’ve got the complexities of CSS/HTML and TiddlyWiki multiplied together, and therefore quite a mountain to climb to implement relatively complex new features.

I understand and can write/manipulate HTML fairly well, and have a slightly-above-novice grasp of CSS, having been digging into it for the past year or so.

As I said at the beginning, there’s a good chance that someone else in the community can help with your immediate needs, as they have in other threads. But the best response to the situation may be to keep on digging into TiddlyWiki, and learn as much as you can by example :)

Anyhow, in particular, you’ll need to understand transclusion, and the way that it is used in stylesheets to fully implement the solution. But a key part is that the CSS syntax for using an external image as a background is different;

background-image: url(http://www.example.com/bck.png);

So, if you’ve got the image URL readily accessible, it’s pretty easy to set the background colour for an element.

Yes, this has been no problem - I have several different background images in my Stylesheet that I have been using for testing (all but the current one commented out (/*)) and can switch them by editing the commenting notation.

But, I'm still not able to get that same result from the ControlPanel section - It will accept and display any tiddler with a base64-encoded image inside, but I cannot understand how to feed it a URL to an external image???

Also --and something I didn't realize until just now-- whenever I have a background image selected through the ControlPanel/Theme Tweaks, it overrides any that I have declared in my Stylesheet.  I assumed up until now that the Stylesheet tiddler was 'the last word' as far as CSS customization was concerned, overriding everything else...

--Zaphod

Best wishes

Jeremy

[RichardWilliamSmith]

Hi Zaphod,

In my opinion, you will be better off using external images - meaning that you serve your own copy of the images you want, but alongside the tiddlywiki, not inside it.

I think this is better becasue a) it's a bit rude to load other people's resources routinely (I know this isn't a huge concern these days) b) you won't have to constantly check to make sure the images are all still there and haven't been moved and c) it makes what you're trying to do easy instead of difficult.

Externalising your images using the Node configuration is really easy and the instructions are on Tiddlywiki.com but I also wrote a tool, which I will post to the group soon that lets you manage external images from inside the single-file app. They behave like regular tiddlers but the payload is external and so doesn't weigh down your file.

BTW, 20-50kb per tiddler sounds a bit excessive - you should consider having only the basics inside each record tiddler and then using template tiddlers to add the fancy ui.

Regards,

Richard

[Zaphod Beeblebrox]

Greetings, Richard - Thank You for your comments/suggestions :)

On Sunday, July 24, 2016 at 1:17:15 AM UTC-4, RichardWilliamSmith wrote:

Hi Zaphod,

In my opinion, you will be better off using external images - meaning that you serve your own copy of the images you want, but alongside the tiddlywiki, not inside it.

This has been my aim and intention from the beginning, and also the cause of my present problem :P

I think this is better becasue a) it's a bit rude to load other people's resources routinely (I know this isn't a huge concern these days)

Well, this point is the second main reason why I chose TW to be the platform to use for my little 'project' (the first being its single-file format).

I have been publishing this movie database as a (downloadable, from Dropbox) static webpage for a while, now, but really wanted to include screenshots for each movie (plus other 'features' of a Blog-like ecosystem), but that's not possible with the static webpage as it would have to load ALL the screenshots for ALL the movies when the page loaded (it already weighs over 2MB and takes 30-45 seconds to load), so I hit upon the idea of using TW as each tiddler could be its own self-contained little webpage, with the screenshots hidden behind a custom <$reveal> and <$button>, only loading if and when the user clicked on it.

c) it makes what you're trying to do easy instead of difficult.

Heh heh - I thought that, too, until trying to use those same externally-stored graphics as the background for the page :-P (well, specifically being able to switch them instantly)

Externalising your images using the Node configuration is really easy and the instructions are on Tiddlywiki.com but I also wrote a tool, which I will post to the group soon that lets you manage external images from inside the single-file app. They behave like regular tiddlers but the payload is external and so doesn't weigh down your file.

I've looked at Node.js and it seems to be more than I'd care to get into, plus I could never ask my (very) non-techie users to attempt using it...

BTW, 20-50kb per tiddler sounds a bit excessive - you should consider having only the basics inside each record tiddler and then using template tiddlers to add the fancy ui.

I have offloaded (I think) as much as possible, creating shortcode style names for many repeated styles through my Stylesheet tiddler, but I had not thought about template tiddlers.  Could you point me somewhere that I might see some practical examples of them being used?

I use a template tiddler to create the 'skeleton' movie tiddler, ready for data input:

<html>
<div class="SearchTerms"></div>
<div class="Post">
<div class="Container">
<div class="CoverLeft"><img width="40" src="http://i.imgur.com/bFw3goc.jpg" title="Genuine Zaphod-Rip" alt="Genuine Zaphod-Rip"> <img src="http://i.imgur.com/2Fj0Cnj.png" alt="Warner Archive Collection" title="Warner Archive Collection"> <img width="50" src="http://i.imgur.com/tbvCWGe.png" alt="20th Century Fox Cinema Archives" title="20th Century Fox Cinema Archives"> <img width="40" src="http://i.imgur.com/EhU4tBM.png" alt="Disney DVD" title="Disney DVD"> <img width="50" src="http://i.imgur.com/sSOU3JI.png" alt="Alpha Video" title="Alpha Video"> <img width="40" src="http://i.imgur.com/RBmDcu1.png" alt="Feature Films for Families" title="Feature Films for Families"> <img  width="40" src="http://i.imgur.com/qMR8dGs.png" alt="Children's Film and Television Foundation (CFF)" title="Children's Film and Television Foundation (CFF)"> <img width="50" src="http://i.imgur.com/VPNuLyZ.jpg" alt="MGM Limited Edition Collection" title="MGM Limited Edition Collection"><p></p><br><p></p><br><p></p><span id="Contrib">This Item Courtesy of<p></p><span id="ContBord">CONTRIBUTOR</span><p></p>Thank You! </span>,,<img src="http://i.imgur.com/WgjjEap.gif">,,<p></p></div><!-- CoverLeft -->
<div class="CoverMiddle"><a href="FULLSIZE" target="_blank"><img alt="Cover Art" title="Cover Art" src="THUMBNAIL"></a></div><!-- CoverMiddle -->
<div class="CoverRight"><a href="FULLSIZE" target="_blank"><img alt="Cover Art" title="Cover Art" src="THUMBNAIL"></a><p></p><br><p></p><br><p></p><span id="BoldGreen">aka or Original Title<br>""</span></div><!-- CoverRight -->
</div><!-- Container -->
<div class="FloatClear"></div>
<div class="IMDb"><a href="IMDb URL" target="_blank"><img width="100" alt="IMDb Logo" title="IMDb Logo" src="http://i.imgur.com/sI6cPld.png"></a></div><!-- IMDb -->
<p></p>
<div class="Container">
<div class="Tagline">TAGLINE</div><!-- Tagline -->
</div><!-- Container -->
<p></p>
<div class="Container">
<div class="Synopsis"><span class="FirstWord">FIRSTWORD</span> &nbsp;&nbsp;</div><!-- Synopsis -->
<div class="Extras">
<span id="HeaderRed">DVD Extras:</span><br>
<ul>
<li> <span style="font-weight: normal;">()</span></li>
<li> <span style="font-weight: normal;">()</span></li>
<li> <span style="font-weight: normal;">()</span></li>
<li> <span style="font-weight: normal;">()</span></li>
<li> <span style="font-weight: normal;">()</span></li>
</ul>
</div><!-- Extras -->
</div><!-- Container -->
<div class="FloatClear"></div>
<p></p>
<div class="QuoteBox1"><span id="HeaderBlue">HEADER:</span> &nbsp;&nbsp;</div><!-- QuoteBox1 -->
<p></p>
<div class="TechWrapper">
  <div class="TechTable">
    <div class="row header red">
      <div class="cell"><span class="skew">Origin</span></div>
      <div class="cell"><span class="skew">Filesize</span></div>
      <div class="cell"><span class="skew">Format</span></div>
      <div class="cell"><span class="skew">Dimensions</span></div>
      <div class="cell"><span class="skew">Audio</span></div>
      <div class="cell"><span class="skew">Subtitles</span></div>
    </div><!-- row header red -->

    <div class="row">
      <div class="cell">ORIGIN</div>
      <div class="cell"> Bytes</div>
      <div class="cell">screen</div>
      <div class="cell"> x </div>
      <div class="cell">English</div>
      <div class="cell">NONE</div>
    </div><!-- row -->
  </div><!-- table -->

<div class="Container">
<div class="SSButton"><$reveal type="nomatch" state="$:/SampleRevealState3" text="show">
<!-- ============ SPACE ============ -->
<$button class="SSB1" set="$:/SampleRevealState3" setTo="show"><img src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;Screenshots&nbsp;&nbsp;&nbsp;<img src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
</$reveal>
<$reveal type="match" state="$:/SampleRevealState3" text="show">
<!-- ============ SPACE ============ -->
<$button class="SSB2" set="$:/SampleRevealState3" setTo="hide"><img src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
<div class="SSButtonInner">
<span id="MSD">Menu Screens</span>
<p></p>
SCREENSHOTS GO HERE
</div><!-- SSButtonInner -->

</$reveal>
</div><!-- SSButton -->
</div><!-- Container -->

<div style="Container">
<div class="BAButton"><$reveal type="nomatch" state="$:/SampleRevealState1" text="show">
<!-- ============ SPACE ============ -->
<$button class="BAB1" set="$:/SampleRevealState1" setTo="show"><img height="50" src="LEFT GRAPHIC">&nbsp;&nbsp;Actor(s)&nbsp;&nbsp;&nbsp;&nbsp;<img height="50" src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
</$reveal>
<$reveal type="match" state="$:/SampleRevealState1" text="show">
<!-- ============ SPACE ============ -->
<$button class="BAB2" set="$:/SampleRevealState1" setTo="hide"><img height="50" src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img height="50" src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
<div class="BAButtonInner">
<div class="BATable">
<div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class="BAEllipsis">&nbsp;&hellip;&hellip;&nbsp;</div><div class="BAName">ROLE</div></div>
<div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class="BAEllipsis">&nbsp;&hellip;&hellip;&nbsp;</div><div class="BAName">ROLE</div></div>
<div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class="BAEllipsis">&nbsp;&hellip;&hellip;&nbsp;</div><div class="BAName">ROLE</div></div>
<div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class="BAEllipsis">&nbsp;&hellip;&hellip;&nbsp;</div><div class="BAName">ROLE</div></div>
<div class="BARow"><div class="BALink"><a href="">ACTOR</a></div><div class="BAEllipsis">&nbsp;&hellip;&hellip;&nbsp;</div><div class="BAName">ROLE</div></div>
<br>
</div><!-- BATable -->
ADDENDUM<br>
</div><!-- BAButtonInner -->
<!-- ============ SPACE ============ -->
</$reveal>
</div><!-- BAButton -->

<!-- =============================================== -->

<div class="DLButton"><$reveal type="nomatch" state="$:/SampleRevealState2" text="show">
<!-- ============ SPACE ============ -->
<$button class="DLB1" set="$:/SampleRevealState2" setTo="show"><img height="50" src="LEFT GRAPHIC">&nbsp;&nbsp;Download Links&nbsp;&nbsp;<img height="50" src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
</$reveal>
<$reveal type="match" state="$:/SampleRevealState2" text="show">
<!-- ============ SPACE ============ -->
<$button class="DLB2" set="$:/SampleRevealState2" setTo="hide"><img height="50" src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img height="50" src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
<div class="DLButtonInner">
<p></p>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<a href="" target="_blank"></a><br>
<p></p>
</div><!-- DLButtonInner -->

</$reveal>
</div><!-- DLButton -->
</div><!-- TechWrapper -->
<div class="FloatClear"></div>
<div class="Container">
<div class="EPButton"><$reveal type="nomatch" state="$:/SampleRevealState4" text="show">
<!-- ============ SPACE ============ -->
<$button class="EPB1" set="$:/SampleRevealState4" setTo="show"><img src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;Ephemera&nbsp;&nbsp;&nbsp;<img src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
</$reveal>
<$reveal type="match" state="$:/SampleRevealState4" text="show">
<!-- ============ SPACE ============ -->
<$button class="EPB2" set="$:/SampleRevealState4" setTo="hide"><img src="LEFT GRAPHIC">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Close&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="RIGHT GRAPHIC"></$button>
<!-- ============ SPACE ============ -->
<div class="EPButtonInner">
<div class="EPWrapper">
<div class="EPHeader"><img src="http://i.imgur.com/A7NvL35.png"></div>
<div class="EPContent">POSTER</div>
<div class="EPContent">POSTER</div>
<div class="EPContent">POSTER</div>
</div><!-- EPWrapper -->
<hr id="hrthick">
<div class="EPWrapper">
<div class="EPHeader"><img src="http://i.imgur.com/ZJiFNlg.png"></div>
<div class="EPContent">LOBBY CARD</div>
<div class="EPContent">LOBBY CARD</div>
<div class="EPContent">LOBBY CARD</div>
</div><!-- EPWrapper -->
<hr id="hrthick">
<div class="EPWrapper">
<div class="EPHeader"><img src="http://i.imgur.com/v9r2fN8.jpg"></div>
<div class="EPContent">DVD COVER</div>
<div class="EPContent">DVD COVER</div>
<div class="EPContent">DVD COVER</div>
</div><!-- EPWrapper -->
<hr id="hrthick">
<div class="EPWrapper">
<div class="EPHeader"><img src="http://i.imgur.com/oaTM0xH.png"></div>
<div class="EPContent">MISC</div>
<div class="EPContent">MISC</div>
<div class="EPContent">MISC</div>
</div><!-- EPWrapper -->
</div><!-- EPButtonInner -->

</$reveal>
</div><!-- EPButton -->
</div><!-- Container -->

</div><!-- Container -->
</div><!-- Post -->
</html>

and this in itself weighs 9.5kb (with the graphic links (omitted here) included.
Of course this skeleton template features every field and graphic that a movie post could conceivably contain - Most will have less items than this (and, yes, I know I can get rid of more extra weight by eliminating the comment tags after the closing < div >'s - They were there temporarily while I was testing the layout, to make sure I knew WHICH div was being closed...)

--Zaphod

[RichardWilliamSmith]

Hi Zaphod,

Is your wiki live somewhere? Can you share a link to it?

Regards,
Richard

[Zaphod Beeblebrox]

No sir, it resides only on my hard drive at this time - I will send you a private message with a link.

--Zaphod

[Zaphod Beeblebrox]

So, after three days of searching the group, using every conceivable search term I could think of, pouring over numerous system and shadow tiddlers and even a few of the *.js files within TiddlyWiki until my eyes (literally) were hurting, I am no closer to finding a solution to my question.

I'm almost to the point of giving up on the notion of having the page background switch upon opening a tiddler.

Not to beat a dead horse (but I'm going to... :-P ), but it seems to me that it should be so simple: when the tiddler is opened, a call is made, either through the use of a macro or simply by calling or transcluding another tiddler with the URL in it (or even a field within the current tiddler whose value is the URL of the image), and passing that value to a background: url(blahblahblah); statement which would be injected into whatever section/tiddler/whatever that the $:/ControlPanel/Theme Tweaks - Page background image references.

I also thought about refreshing of the TW - I know I've seen where Duarte Farrajota Ramos and Jed Carty were hashing out the details of a method of having a Random Page Background on loading (which seems to work very nicely on Mr. Ramos' page, but which I cannot figure out how to incorporate myself), but for my purposes I really need it to happen on-the-fly and without having to refresh.

What happens when we switch from one Theme to another?  Isn't there the facility within that process to also change the background image of the page?

In This Thread, I found:

I have an arbitrary field on several tiddlers, called bgimage. It references a background image.

In ViewTemplate, I have defined a macro (immediately after where frame-classes is defined):

    \define bgstyle()
    background-image:url(<$

transclude field='bgimage'/>);
    \end

If I call <<bgstyle>> (again, in ViewTemplate) as content of my tiddler, it works like I'd expect. It pulls the value from the bgimage field and writes it in.

Two problems with the above:

1. I believe Mr. Maxwell is attempting to set the background of the tiddler in this case, and not the page, but surely the process would be similar?
2. I cannot understand the exact layout and workings of the ViewTemplate tiddler to figure out where to place his macro code in order to try this for myself.

And trying to follow up on Jeremy's suggestion that I re-use the code from $:/ControlPanel/Theme Tweaks - Page background image: Apparently there simply is no way of inputting an external Internet address into this field - It will only accept the title of an image tiddler...

My head hurts...

--Zaphod

[Birthe C]

Create a tiddler for the image. Give the type and create the field _canonical_uri, put your external link in this field. Save the tiddler. Now you are able to select your image in $:/ControlPanel/Theme Tweaks - Page background image:


Birthe

[Zaphod Beeblebrox]

Oh, Thank You so much, Birthe! - It works beautifully :)

I just knew there had to be some simple mechanism for doing this.  I'd read a few posts about using _canonical_uri under TWC in other situations, but never thought about trying it for this...

I've now whipped up a SideBar tab using your method, some code from the Hello There tiddler on the main TW site, and Tobias Beer's Link Images Plugin.  It still needs some tweaking to get it exactly like I want it, but thanks to you, I'm well on my way :)

So, do you have any ideas on how I could accomplish my other wish, of having the background change whenever a tiddler is opened?

I'm thinking that some form of the above method might just work.  Maybe with the LinkCatcherWidget.

Back to the laboratory for more experiments...

--Zaphod

[Zaphod Beeblebrox]

Alrighty, after some tinkering, here's what I've finally come up with:

!!<span style="font-weight: bold; color: #FF0000;">Some Descriptive Title or Text of Your Choosing</span>
<hr>
<$linkcatcher to="$:/themes/tiddlywiki/vanilla/settings/backgroundimage">
<div style="border: 2px solid silver; border-radius: 10px; height: 355px; overflow: auto;"><$list filter="[tag[Background]sort[title]]">
<$macrocall $name="linkimg" tiddler=<<currentTiddler>> image=<<currentTiddler>> tooltip=<<currentTiddler>> width="115"/>
</$list>
</div>
<hr>
<$link to="">
<$button>Blank Background</$button>
</$link>
</$linkcatcher>

For any new(er and less experienced than myself) TW users, here's a general breakdown of how to incorporate it into your own TiddlyWiki, and how it actually works:

1. Create a tiddler for your background image.
As per the excellent instructions provided by Birthe C (Thank You again, kind Sir :) )

• (If using my example verbatim, also tag the tiddler with "Background")
  
• Select "JPEG image (image/jpeg)" as the type.
• Create the field "_canonical_uri" and put your external link URL in this field.
• Save the tiddler.
• Now you are able to select your image in $:/ControlPanel/Theme Tweaks - Page background image and it will also be available to my added SideBar section.

2. Install Tobias Beer's Link Images Macro.
Very fine creation, and performs most nicely :)


3. Reload your TW for the macro to be recognized and initialized.


4. Create the Background Chooser (for want of a more creative name :Þ)

• Create a tiddler and name it as you will.
• (If you want it to also appear in the SideBar, tag it with "$:/tags/SideBar")
• Paste the code from the code box above into it.
• Save the tiddler.

Now, any background image that is linked to from the _canonical_uri field of a tiddler like the one above should appear within the Background Chooser :)


Here is my explanation of what is going on with this (please forgive me if I get some terms wrong or don't explain the concepts correctly - and feel free to add to or correct it :) ):

!!<span style="font-weight: bold; color: #FF0000;">Some Descriptive Title or Text of Your Choosing</span>
<hr>

This is just a descriptive title for the SideBar section that I wanted to add, with a horizontal rule below it - Feel free to edit or remove it, as per your wishes.


This next part begins some edited code that I borrowed from the Hello There Tiddler on the main TiddlyWiki.com page:

<$linkcatcher to="$:/themes/tiddlywiki/vanilla/settings/backgroundimage">

First, the LinkCatcherWidget is called and will (eventually) pass the outcome of all the other work being done here to $:/themes/tiddlywiki/vanilla/settings/backgroundimage, which is the tiddler responsible for displaying the background of the TW.

<div style="border: 2px solid silver; border-radius: 10px; height: 355px; overflow: auto;">

Next, we're creating an auto-scrolling div that's 355 pixels high (the height of three rows of background images, whose widths are set at 115 pixels by the linkimg macro) (this works out just right for me on a 1920 x 1024 display, with my SideBar resized to 435 pixels wide - You'll have to adjust the numbers to obtain the 'perfect' layout for your screen resolution and TW), and has a 2-pixel solid silver border, with a rounded ratio of 10 pixels.

<$list filter="[tag[Background]sort[title]]">

This creates a list of all the tiddlers which have the tag of "Background", and sorts them alphabetically by their titles.

<$macrocall $name="linkimg" tiddler=<<currentTiddler>> image=<<currentTiddler>> tooltip=<<currentTiddler>> width="115"/>

This calls the linkimg macro which grabs the contents of the current tiddler (which is the output of the list from above), resizes each of the backgrounds to a width of 115 pixels, and displays them.

</$list>

Close the $list.

</div>

Close the div.

<hr>

Just another horizontal rule to separate the button below from the above section (keep or delete at your discretion).

<$link to="">
<$button>Blank Background</$button>
</$link>

This button, when clicked, sends a null value ("") back to $:/themes/tiddlywiki/vanilla/settings/backgroundimage, thereby clearing or blanking the background.

</$linkcatcher>

Finally, the LinkCatcherWidget passes the value of our selected background image to $:/themes/tiddlywiki/vanilla/settings/backgroundimage and completes the process :)


NB: I prefixed the titles of the tiddlers containing my background images with "$:/BG_" so that 1) they would not appear in and clutter up the Recent File list of the SideBar and; 2) so that they are easy to find/edit from the Advanced Search.

Please don't ask me too many questions, as I just barely grasp what's being done - Tons of trial-and-error and copy/pasting went into this, but I believe I did learn a little from the experience, and hopefully can carry some of that knowledge forward :)