[TW5] Changing backgroundimagesize when background image changes

80 views
Skip to first unread message

Zaphod Beeblebrox

unread,
Aug 19, 2016, 12:12:17 PM8/19/16
to TiddlyWiki

As you can see in the SideBar at http://zaphod2016.tiddlyspot.com/, I got my Background Selector created and functioning pretty darn well (I'm so very happy! :) ) - But then I ran into a niggling little annoyance that I hope someone can help me to overcome.


Many of the movie screenshots that I want to use as backgrounds are from older, SD (Fullscreen, 1.33:1) films, and do not cover the entire screen. In the ControlPanel there is the setting for Page background image size which references the


$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize


tiddler and gives it the value of either "auto", "cover" or "contain."


720p and 1080p, as well as *most* HDTV Widescreen screenshots look just fine with the setting of "cover."  Some of the old SD screenshots, however, need the "contain" setting in order to be displayed correctly (or at least look 'better').


What I need is a way to include that setting with each individual background image tiddler — I'm thinking in a field — and then read it in when that screenshot is selected, and pass it on to


$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize


I have tried so many different ways of doing it, but none of them have worked - At present, I simply do not have enough knowledge of macros, transclusion, filter syntax and the like to accomplish this (and I sometimes think I might never)


How could that simple action be achieved within my Background Selector code?


<span style="display: block; text-align: center; font-size: 150%; font-weight: bold; color: #FF0000;">TITLE<br>Descriptive Title of Your Choosing :&#222;</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>


Any help greatly appreciated :)

--Zaphod

Zaphod Beeblebrox

unread,
Sep 29, 2016, 4:07:41 PM9/29/16
to tiddl...@googlegroups.com
Back again, dredging up this question...

I've made some modifications to my Background Switcher, by adding two buttons below the selection, a 'Fullscreen' and 'Widescreen.'

You can see it in action at http://zaphod2016.tiddlyspot.com/

What they do is send either a 'contain' or 'cover' value to the $:/themes/tiddlywiki/vanilla/settings/backgroundimagesize tiddler, changing the display.

It works just fine, but what I really want to happen is for this change to take place automatically, whenever I click on the image to change the background.

Within each of the background image tiddlers containing a _canonical_URI field with the location of my external images, I also have a field named bgimgsize with either cover or contain as the value - I'd like to add some mechanism that will pick up that value and send it to $:/themes/tiddlywiki/vanilla/settings/backgroundimagesize when the image is clicked on.

Here is the code I'm using:

<span style="display: block; text-align: center; font-size: 150%; font-weight: bold; color: #FF0000;">TITLE<br>Descriptive Title of Your Choosing :&#222;</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="">
<table style="width: 100%; text-align: center; border: 2px solid rgba(255, 255, 255, 0);"><tr><td><$button><$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize" $value="contain"/>Fullscreen</$button></td><td><$button><$action-setfield $tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize" $value="cover"/>Widescreen</$button></td><td><$button>Clear Background</$button></td></tr></table>
<hr>
</$link>
</$linkcatcher>


Help or suggestions appreciated :)

--Zaphod
Reply all
Reply to author
Forward
0 new messages