Icon based on tag or field value in a list

62 views
Skip to first unread message

Jake

unread,
Jul 1, 2020, 6:29:51 AM7/1/20
to TiddlyWiki
So, the question is that I want to have an icon to show near a project name based on its category. Let's assume I have tiddlers "category1-icon", "category2-icon", "category3-icon", "category4-icon", "category5-icon" with some image (images) in them (not the "content-type: image" thing, just a simple [image[http:/blablalba.jpg]]).  And a "category" field in tiddlers (with values "category1", "category2" etc.)

If I want to put an icon in a text field of a tiddler, I just type smth like this
(thanks again to Eric for "tilda" thing explanation):

<$set name="category-var" filter="[<currentTiddler>category[category1]then[category1-icon]] ~[<currentTiddler>category[category2]then[category2-icon]] ~[<currentTiddler>category[category3]then[category3-icon]] ~[<currentTiddler>category[category4]then[category4-icon]] ~[<currentTiddler>category[category5]then[category5-icon]]"> 
<$transclude tiddler=<<category-var>> /> 
</$set>

And it kinda works. But I don't know how to "shove" all this thing into a list.

For example, if I have a list: 

<$list filter="[tag[project]state[Active]!sort[lastedit]]"> <ul> <li> <$link/> (I WANT CATEGORY ICON HERE) (<$view field="lastedit" format="date" template="0DD.0MM.YYYY"/>) </li> </ul>  </$list>

I don't know how to do that.

Currently I'm just filling TWO separate fields "category" and "category-icon" (with the tiddler names "category1-icon", etc.) for each project and use this:

<$list filter="[tag[project]state[Active]!sort[lastedit]]"> <ul> <li> <$link/> <$transclude tiddler={{!!category-icon}} /> (<$view field="lastedit" format="date" template="0DD.0MM.YYYY"/>) </li> </ul>  </$list>

But that's a bit annoying because it is kind of "double work" filling two fields instead of one for every project. I was wondering if that could be solved more elegantly.

Mat

unread,
Jul 1, 2020, 6:46:32 AM7/1/20
to TiddlyWiki
Possibly, you can use the SetWidgets "select" attribute or if that doesn't work, try with WikifyWidget:

<$set name="category-var" filter="..." select=0>
<$list ...>
<
<category-var>>
</$list>
</$set>

if that doesn't work, exchange the $set widget for:

<$wikify name="category-var" text={{{ thefilter }}} >
...


The WikifyWidget is costly for the system so it is preferred with SetWidget when possible.

<:-)

Eric Shulman

unread,
Jul 1, 2020, 7:06:07 AM7/1/20
to TiddlyWiki
On Wednesday, July 1, 2020 at 3:29:51 AM UTC-7, Jake wrote:
<$set name="category-var" filter="[<currentTiddler>category[category1]then[category1-icon]] ~[<currentTiddler>category[category2]then[category2-icon]] ~[<currentTiddler>category[category3]then[category3-icon]] ~[<currentTiddler>category[category4]then[category4-icon]] ~[<currentTiddler>category[category5]then[category5-icon]]"> 
<$transclude tiddler=<<category-var>> /> 
</$set>

Based on the above, it seems like the name of the icon tiddler is just the value
in the category field, with "-icon" added to it, which you can generate without
needing that long filter to calculate the "category-var".

Instead, you could write:
{{{ [<currentTiddler>get[category]addsuffix[-icon]] }}}

which you would use in the <$transclude> of your list output, like this:
<$list filter="[tag[project]state[Active]!sort[lastedit]]">
   
<ul><li>

      <$link/>
      <$transclude tiddler={{{ [
<currentTiddler>get[category]addsuffix[-icon]] }}} />

      (<$view field="lastedit" format="date" template="0DD.0MM.YYYY"/>)
   
</li></ul>
</$list>

enjoy,
-e

Jake

unread,
Jul 1, 2020, 7:30:08 AM7/1/20
to TiddlyWiki

Possibly, you can use the SetWidgets "select" attribute or if that doesn't work, try with WikifyWidget:

<$set name="category-var" filter="..." select=0>
<$list ...>
<
<category-var>>
</$list>
</$set>
 
Ermmm... the problem is that the above mentioned filter for $set assesses the fields of "currentTiddler"... sooooo... if I'm using it "outside" the list - I'm just applying category icon of the current tiddler to all those mentioned in the list. I need to shove it "inside" the list somehow. :)


 
Based on the above, it seems like the name of the icon tiddler is just the value
in the category field, with "-icon" added to it, which you can generate without
needing that long filter to calculate the "category-var".

Instead, you could write:
{{{ [<currentTiddler>get[category]addsuffix[-icon]] }}}

which you would use in the <$transclude> of your list output, like this:
<$list filter="[tag[project]state[Active]!sort[lastedit]]">
   
<ul><li>

      <$link/>
      <$transclude tiddler={{{ [
<currentTiddler>get[category]addsuffix[-icon]] }}} />

      (<$view field="lastedit" format="date" template="0DD.0MM.YYYY"/>)
   
</li></ul>
</$list>

Unfortunately they don't. :(  I changed the values for the purpose of the example. Though that's not a bad idea. I can rename them and see if that works. I'll check it now.
PS. But btw what to do if the category name is located not in a special field but is just one of the tags? And there are several those tags of course. So tiddler can have: "Type1 Category3" tags or "Type4 Category1" etc. Is there a way to "get" those?

Eric Shulman

unread,
Jul 1, 2020, 8:46:49 AM7/1/20
to TiddlyWiki
On Wednesday, July 1, 2020 at 4:30:08 AM UTC-7, Jake wrote:
PS. But btw what to do if the category name is located not in a special field but is just one of the tags? And there are several those tags of course. So tiddler can have: "Type1 Category3" tags or "Type4 Category1" etc. Is there a way to "get" those?

In my previous reply, I suggested that something like this might work:
{{{ [<currentTiddler>tags[]prefix[Category]addsuffix[-icon]] }}}

Of course, this assumes that there is only one category tag per tiddler, and that all the category names start with "Category".  However, if your category names can be any text (e.g., "Games", "Books", "Music", etc.), then you will need another way to identify which tag is actually the "category tag".  One way would be to create tiddlers for each of those category names, and then tag *those* tiddlers with "Category".

Then you could write:
{{{ [<currentTiddler>tags[]tag[Category]addsuffix[-icon]] }}}

In other words:
"for the current tiddler, get it's tags, then select only tags are themselves tagged with "Category" and add the "-icon" suffix to that tag name

This still assumes that there's only one category tag on each tiddler, but at least the names of those tags can be anything you like.

enjoy,
-e

Jake

unread,
Jul 1, 2020, 8:52:44 AM7/1/20
to TiddlyWiki
I just checked this one (for categories in the fields):
 
Instead, you could write:
{{{ [<currentTiddler>get[category]addsuffix[-icon]] }}}

which you would use in the <$transclude> of your list output, like this:
<$list filter="[tag[project]state[Active]!sort[lastedit]]">
   
<ul><li>
      <$link/>
      <$transclude tiddler={{{ [
<currentTiddler>get[category]addsuffix[-icon]] }}} />
      (<$view field="lastedit" format="date" template="0DD.0MM.YYYY"/>)
   
</li></ul>
</$list>
 
and it worked liked a charm! Thanks a lot!

Now I'm gonna test it for categories in tags...
 

Jake

unread,
Jul 1, 2020, 10:23:50 AM7/1/20
to TiddlyWiki
 
Then you could write:
{{{ [<currentTiddler>tags[]tag[Category]addsuffix[-icon]] }}}

In other words:
"for the current tiddler, get it's tags, then select only tags are themselves tagged with "Category" and add the "-icon" suffix to that tag name

This still assumes that there's only one category tag on each tiddler, but at least the names of those tags can be anything you like.


Yep! This also worked! Thanks again, Eric! 

Didn't even think that you can "tag tags" and select tags by their own tag. :) Might come in handy in the future. Though I think now I better stick to practice to keep "single-value" attributes in the fields and leave tags for those that imply multiple meaning. Thus I think it would be easier to "call" them when needed.
Reply all
Reply to author
Forward
0 new messages