Transcluding an image from another tiddler's icon field

128 views
Skip to first unread message

Adrien F

unread,
Aug 8, 2019, 2:42:15 PM8/8/19
to TiddlyWiki
On multiple occasions I need to have buttons display the icon from the "icon" field of another tiddler. In this other tiddler the "icon" field is the name of a tiddler that is not an image but is using a FontAwesome macro. (I also tried on multiple occasions using an svg as the tiddler referenced by the icon field, so I don't think that's the problem)

I tried my best for the past week to find a solution to this problem by myself with online resources but I can't find this very topic mentioned anywhere and the solution keeps eluding me.

For instance this is the content of a modified tabs macro I'm using :

Enter code here...\define viewmode-icon-tabs(tabsList,default,state:"$:/state/tab",class,template,buttonTemplate,retain)
<div class="tc-tab-set $class$">
<div class="tc-tab-buttons $class$">
<$list filter="$tabsList$" variable="currentTab"><$set name="save-currentTiddler" value=<<currentTiddler>>><$tiddler tiddler=<<currentTab>>><$button set=<<qualify "$state$">> setTo=<<currentTab>> default="$default$" selectedClass="tc-tab-selected" tooltip={{!!tooltip}}>
<$tiddler tiddler=<<save-currentTiddler>>>
<$set name="tv-wikilinks" value="no">

<$setvars
_currentTab
=<<currentTab>>
_currentTabIcon
=[[currentTab!!icon]]
tabIcon
="\{{\ currentTabIcon \}}\">

<<tabIcon>>
<$image src=<<tabIcon>> />


<$transclude tiddler=<<currentTab>> field="
role"/>

<$transclude tiddler="
$buttonTemplate$" mode="inline">
<$macrocall $name="
tabIconPath" $type="image/svg+xml" $output="image/svg+xml"/>
</$transclude>
</$setvars>

</$set></$tiddler></$button></$tiddler></$set></$list>
</div>
<div class="
tc-tab-divider $class$"/>
<div class="
tc-tab-content $class$">
<$list filter="
$tabsList$" variable="currentTab">

<$reveal type="
match" state=<<qualify "$state$">> text=<<currentTab>> default="$default$" retain="""$retain$""">

<$transclude tiddler="
$template$" mode="block">

<$transclude tiddler=<<currentTab>> mode="
block"/>

</$transclude>

</$reveal>

</$list>
</div>
</div>
\end


And this is the result whatever I try with my variables. Developper tools confirm that the image src is undefined.

no-tab-icons.png


The closest I got to transcluding the icon was with using 

<$transclude tiddler=<<currentTab>> field="role"/>

... wich made the tabs display the name of the tiddler containing the FontAwesome macro.

Hints ?

TonyM

unread,
Aug 8, 2019, 8:10:08 PM8/8/19
to TiddlyWiki
Adrien,

Your example is so complex, I would advise extracting the simplest example of the problem you face and sharing that. You may even solve your problem  in the process. It is a lot to ask volunteers more than you have to. 

Tiddlywiki documents its own mechanisiums well. If you can find it in the tiddlywiki.com documentation try looking inside tiddletwiki itself. For example the title is displayed on tiddlers with $:/core/ui/ViewTemplate/title and this will show the icon if it is provided. Looking inside this tiddler we see it access the icon as follows

<$set name="foregroundColor" value={{!!color}}>
<span class="tc-tiddler-title-icon" style=<
<title-styles>>>
<$transclude tiddler={{!!icon}}/>
</span>
</$set>

Will this work for your problem?

Otherwise please restate the issue with a minimal case if at all possible.

Regards
Tony

Adrien F

unread,
Aug 9, 2019, 6:18:53 AM8/9/19
to TiddlyWiki
Thanks Tony for your response.

Alas I could not get it to work taking example from $:/core/ui/ViewTemplate/title.

You're quite right, the problem can be simplified alot. I'm very new to using WikiText and thought it could have to do with to the way the tabs macro passes currentTiddler and currentTab, but I could reproduce the issue just this way :

  1. name one tiddler "test/Icon" that contains an image
  2. create a tiddler "test/tiddlerA" with the icon field set to "test/icon"
  3. create a tiddler "test/tiddlerB" with a button transcluding the image referenced as the icon by "test/tiddlerA" like so :
<$set name="refTid" value={{test/TiddlerA}}>

<$button>
   <$transclude tiddler=<
<refTid>> field="icon"/>
</$button>

<$set>

This is easier to reproduce and works (or rather doesn't) the same.


A Gloom

unread,
Feb 2, 2020, 7:09:08 AM2/2/20
to TiddlyWiki

<$set name="refTid" value={{test/TiddlerA}}>

<$button>
   <$transclude tiddler=<
<refTid>> field="icon"/>
</$button>

<$set>


This doesn't work because of

value={{test/TiddlerA}}

it feeds the transclude widget the text field contents of test?TiddlerA ( {{}} transcludes the tidder's content as the variable value) instead of the tiddler's title...


value="test/TiddlerA"

will feed the title to the transclude widget so it can read the icon field of it
Reply all
Reply to author
Forward
0 new messages