Color $List link to Tiddler from Field of Targeted Tiddler?

#1

Greetings, All :slight_smile:

Sorry I abruptly ‘disappeared’ from the last conversation/question, but I’ve been in & out of the hospital several times, had a couple of operations and am still recovering from a fairly serious bike accident in July… :frowning:

Anyway, I’m back with another (probably stupidly) simple question:

I’m trying to build a $List of links to Tiddlers with a specific tag Weekly that also contain the Field linkcolor, and color each link according to the value of linkcolor.

linkcolor will contain a value of either CSS color codes (#FF0000, etc) or simple color names (red, etc).

I tried querying AI and it gave me relevant code to create the $List (which I already had), but the coloring aspect that it suggested simply does not work, even after several attempts with different code.

Here is what it gave me originally:

<$list filter="[tag[Weekly]has[linkcolor]]">
  <$link to=<<currentTiddler>>>
    <span style="color:<<currentTiddler!!linkcolor>>;">
      <<currentTiddler>>
    </span>
  </$link>
</$list>

After telling it that didn’t work, it revised:

Let’s try a slightly different approach to ensure the color is applied correctly. We’ll use the $set widget to explicitly set the linkcolor field value and then apply it within the $link widget.

Updated Code
<$list filter="[tag[Weekly]has[linkcolor]]">
  <$set name="color" value=<<currentTiddler!!linkcolor>>>
    <$link to=<<currentTiddler>>>
      <span style="color:<<color>>;">
        <<currentTiddler>>
      </span>
    </$link>
  </$set>
</$list>

This solution also didn’t work, so it suggested:

Let’s refine the approach to ensure the color value is correctly interpreted. We’ll use the $set widget more explicitly to handle the color value. Here’s an updated version:

Updated Code
<$list filter="[tag[Weekly]has[linkcolor]]">
  <$set name="color" value={{!!linkcolor}} >
    <$link to=<<currentTiddler>>>
      <span style="color:<<color>>;">
        <<currentTiddler>>
      </span>
    </$link>
  </$set>
</$list>

But, this also did not color the links, so I told it I was coming here for help, and would return later with the correct solution (we must show the proper respect to our future AI Overlords, ya know :stuck_out_tongue: )

So, can anyone show me how to do this?

Thank You in advance :slight_smile:

#2

Try this:

<$list filter="[tag[Weekly]has[linkcolor]]">
  <$link to=<<currentTiddler>>>
    <span style.color={{!!linkcolor}}><<currentTiddler>></span>
  </$link>
</$list>

See https://tiddlywiki.com/#HTML in WikiText and scroll down to the end of the tiddler to the “Style Attributes” section.

enjoy,
-e

1 Like
#3

Ah, that does indeed do the trick! Thank You, @EricShulman :slight_smile:

Now, how might I incorporate it into this list-links that I have?

<<list-links "[tag[Weekly]sort[caption]]">>
#4

For the kind of output control you want, you can’t use <<list-links>>, which is only intended for use as a “convenience” macro. Its available parameters provide limited control over the output style and do not support applying custom-generated styles to individual link output.

Instead, you can take the solution I provided above, and add a bit more so it produces the same “bullet item” output as <<list-links>>. You can then define your own custom procedure, like this:

\procedure list-links-color(filter)
<ul>
  <$list filter=<<filter>>>
    <li>
      <$link to=<<currentTiddler>>>
        <span style.color={{!!linkcolor}}>
          <$view field="caption"><$view field="title"/></$view>
        </span>
      </$link>
    </li>
  </$list>
</ul>
\end

Place the above into a separate tiddler, and tag it with $:/tags/Global. You can then use

<<list-links-color "[tag[Weekly]sort[caption]]">>

in any tiddler.

Notes:

  • The <ul> and <li> elements are what produces the bullet list output.
  • <$view field="caption"><$view field="title"/></$view> shows the “caption” field by default with a fallback to showing the tiddler’s title if the caption field is missing.
  • Since your intended filter parameter does not include has[linkcolor], the list output will tiddlers tagged with Weekly even if they lack a linkcolor field. The <span style.color=...> syntax will still work as desired when a linkcolor value is present, and will use the TWCore default tc-tiddlylink color when linkcolor is blank or missing.

enjoy,
-e

2 Likes
#5

Thank You so much, @EricShulman ! :slight_smile:

And an extra Thank You for including the detailed explanation of what each element does.

I’ll add this to my growing “Help!” file, that already includes many of your past solutions.

You are The Modfather of TiddlyWiki, Sir!