Display image from field stored in variable

, ,
#1

I’ve got the following:

title: $:/images/jam/pizza-slice
text: --svg code--

title: pizza
tags: kind
icon: $:/images/jam/pizza-slice

And I’m iterating through all kinds with the following:

<$list filter="[tag[kind]]" variable="currentKind">

<!-- currentKind icon should be displayed here -->

<$link to=<<currentKind>> />

</$list>

I’m trying to display each kind's icon right next to its link and no matter what I’ve tried I cannot figure out the correct syntax.

I’ve tried a straight <$transclude $tiddler={{pizza!!icon}} /> and it works, but how can I do the same with a rolling variable instead of a fixed tiddler reference?

PS I know the variable use in this case is superfluous, but this is a simplified example. In my actual case it’s a multi-layered list and it helps me having clear variables on each layer instead of relative <<currentTiddler>>s.

#2

try removing the variable=current kind so the currentTiddler changes instead

#3

As I’ve mentioned, it’s a multi-layered list. I’m using the currentKind variable and the various assumed currentTiddler variables in different levels. If I remove it from the top, all other layers will break.

You can have a look at my sandbox. There’s a option, kind and place already loaded, along with the templatePlace that binds them together. The relevant code begins at !!! All Options, per Kind

#4

I’ve added the following to try to understand what’s going on (available on the sandbox above):

`Icon name`: <$transclude $tiddler=<<currentKind>> $field="icon"/>

`Icon plain`: <$transclude $tiddler=<<currentKind>> $field="icon" $type="text/plain"/>

`Icon svg`: <$transclude $tiddler=<<currentKind>> $field="icon" $type="image/svg+xml" />

I realized it transcludes the name of the tiddler and not its contents. That’s why the Icon svg displays a broken image; it tries to render $:/images/jam/pizza-slice as SVG, not its contents.

Do I need to somehow use a double transclusion (transclude the contents of the transcluded name)? My brain hurts :dizzy_face:

#5

Hi @Lamnatos

Try this:

<$transclude $tiddler={{{[<currentKind>get[icon]]}}}/>

Which means: "currentKind variable contains a tiddler title, get this tiddler’s icon field value and consider it a tiddler title to transclude."

Fred

#6

Without looking at the code again, just now at least, the thing is {{!!fieldname}} looks in the current tiddler.

#7

Hi @Lamnatos

This should also work:

<$tiddler tiddler=<<currentKind>>><$transclude tiddler={{!!icon}}/></$tiddler>

This code temporarily sets currentTiddler to the value of currentKind, then transcludes the tiddler whose name is stored in the icon field.

Fred

#8

That’s the one! Thank you very much, I thought I had tried that incantation at some point, but obviously I had not :sweat_smile:

The final code I’ve settled for is this, use the icon and color it accordingly:

<$let fill-color={{{ [<currentKind>get[color]] }}}>
    <h3 style=`fill:$(fill-color)$`>
        <$link to=<<currentKind>> >
            <$transclude $tiddler={{{ [<currentKind>get[icon]] }}} type="image/svg+xml"/>
            <<currentKind>>
        </$link>:
    </h3>
</$let>

You can see it live at the sandbox.

The only thing I’m missing is how to scale down the transcluded images.

1 Like
#9

One solution is to scale the image with CSS:

  • Add a class parameter to the <$link> widget:
    <$link to=<<currentKind>> class="myClass">

  • Add a stylesheet with this:

a.myClass svg {
width: 1em;
height: 1em;
}

I’m not a CSS guru, so there might be a better selector, at least this one works! :wink:

Fred

1 Like