[Question] Filtering tags based on their colour code.

203 views
Skip to first unread message

Odin Jorna

unread,
May 14, 2020, 5:17:49 AM5/14/20
to TiddlyWiki
I use tags extensively to categorize, and link tiddler to the same theme together. I have a colour based system to differentiate between tag-types.
Is it possible to filter tags based on their colour hex code? For example: Making a list of all tags of the current tiddler that aren't red. 
Or: When viewing a tiddler (not editing it), hiding all green tags. But then keeping all red tags visible.

Is there a way to create these functionalities?

Mark S.

unread,
May 14, 2020, 1:16:11 PM5/14/20
to TiddlyWiki
What you probably  want is to distinguish between themes. Then the color can follow the theme as needed. When you assign a color to a tag, that tag also becomes a tiddler with the field "color". You can assign a tag to that tag tiddler, which can then be used to limit the tags you see in the drop down.

The attached plugin can work as a start for that. Backup your files. Drag and drop. Import. Save. Reload.

In this example, it is assumed that you have tags that are themselves tagged BlueTheme, and some tag tiddlers that are tagged RedTheme. You can limit which tags you see to "RedTheme" tags or "BlueTheme" tags in the drop down.

Of course, those aren't the themes you really want. You can edit this part of

$:/core/ui/EditTemplate/tags to match your own tags:


<$select tiddler="$:/temp/mytags">
<option value="[tag[BlueTheme]]">Blue Themes</option>
<option value="[tag[RedTheme]]">Red Themes</option>
<option value="[!tag[BlueTheme]!tag[RedTheme]]">No Themes</option>
<option value="[!is[system]]">Standard</option>
</$select>

Warning! This import overwrites core tiddlers. You may need to delete or disable this  tiddler or any changes you make to

$:/core/ui/EditTemplate/tags or $:/core/macros/tag-picker when you upgrade.


Filter Tags by Theme or Topic.json

Mat

unread,
May 14, 2020, 2:09:38 PM5/14/20
to TiddlyWiki
Another approach:

First, create "super tags", i.e have your tags be tiddlers that are in turn categorized by using tags. For example your red tags might be: tomato, strawberry and cherry and your green tags might be broccoli, cucumber, avocado. So you let all six of those tags be tiddlers which you in turn tag with "red" and "green" respectively.

To "make a list of all tags of the current tiddler that aren't red" you'd use

{{{ [all[current]tags[]!tag[red]] }}}

To "view a tiddler (not editing), hiding all green tags but keeping red tags visible" is possible but there's some kind of silent concensus that it is a bad idea to hide tags. If you still want to do it, here's a strategy:

Create a new viewtemplate (i.e tagged $:/tags/ViewTemplate) that contains

{{{ [all[current]tags[]tag[red]] || $:/core/ui/TagTemplate }}}

this creates a new row with only the red tags. (You can click the $:/tags/ViewTemplate pill to reorder so that it is positioned where tags are supposed to be positioned). The problem is that you'll get this applied for all tiddlers so you might want to add a criteria to the current tiddler, e.g that is is by itself tagged red, like so:

{{{ [all[current]tag[red]tags[]tag[red]] || $:/core/ui/TagTemplate }}}

You can do the equivalent for green.

Likely you'll want the original tags viewtemplate to be hidden. For this you can style the tiddlers that contain any of your cucumber, tomato etc tags so that they hide the original tags row:

<$list filter="[tag[red]] [tag[green]]">
[data-tags*="{{!!title}}"] .tc-tags-wrapper {display:none;}
</$list>

OK, the above is untested but I think it should give the idea.

<:-)

Odin Jorna

unread,
May 14, 2020, 3:58:27 PM5/14/20
to TiddlyWiki
Thank you both for the ideas!  And the detailed explanations. I am going to try them out tomorrow :)

Op donderdag 14 mei 2020 20:09:38 UTC+2 schreef Mat:

Odin Jorna

unread,
May 15, 2020, 8:33:18 AM5/15/20
to tiddl...@googlegroups.com
Hi Mat,

I tried fiddling with the examples you showed. I am afriad of tagging each tags, when I have a lot of them. So it becomes a lot of work. So I was a bit stubborn and tried filtering on fields.

I changed your snippet of code to this:

 {{{ [all[current]tags[]field:color[#ffeedd]] || $:/core/ui/TagTemplate }}}


which works!  It creates a list of only the tags with that colour underneath every tiddler. Now I want to add a conditionality, so that this list only appears IF I have tags the tiddler with a tag of this colour. I had used this snippet of code before to only add a template to a tiddler if it was tagged with the tag 'person'. <$list filter="[all[current]tag[Person]]"> </$list> So I tried modifying it for this case as well:

<$list filter="[all[current]tags[]field:color[#ffeedd]]">
see also: {{{ [all[current]tags[]field:color[#ffeedd]] || $:/core/ui/TagTemplate }}}
</$list>


But then it doesn't work. I think I am not using the right code for this? Or is the filters not made for fields? Maybe someone knows how to add this conditionality.

Secondly, I tried your last snippet of code to filter a type of tag from the tag list. But also couldn't manage to make it work, probably because it changed it to filter on the color fields. 

Attached a picture, showing what I am envisioning. I feel like I am close, but not quite there yet.

Anyways, I hope I am asking not too much from the people on the forum, but any help is appreciated.

Kind regards,
Odin

Op donderdag 14 mei 2020 20:09:38 UTC+2 schreef Mat:
Another approach:
Knipsel.JPG

Mat

unread,
May 15, 2020, 10:19:49 AM5/15/20
to TiddlyWiki
Hm, I misled you in my previous attempt at a viewtemplate, i.e this


[all[current]tags[]field:color[#ffeedd]]

...only takes the current tiddlers tags and, of these, which ones have the color. Thus, the output is the tags, not the current tiddler title.
Instead, for a conditional viewtemplate I think you can do this

<$set name=curr value=<<currentTiddler>>>
{{{ [all[current]tags[]field:color[#ffeedd]tagging[]match
<curr>] || $:/core/ui/TagTemplate }}}
</$set>


<:-)

Odin Jorna

unread,
May 15, 2020, 11:36:10 AM5/15/20
to TiddlyWiki
Hey, thanks for replying! I tried your snippet, but unfortunately, it creates a new tag with the title of the current tittler instead of listing the tiddlers. See pictures.

Op vrijdag 15 mei 2020 16:19:49 UTC+2 schreef Mat:
after.JPG
after2.JPG

Mat

unread,
May 15, 2020, 2:25:57 PM5/15/20
to TiddlyWiki
Sorry, my mistake. 
OK, I get this to work on tiddlywiki.com

{{{ [all[current]tags[]color[#ffeedd]] || $:/core/ui/TagTemplate }}}

If it doesn't work for you, pleaes try it on tiddlywiki.com and see if it works there.

Just to make sure I didn't misunderstand: It shows the current tiddlers tags that are of the specified colour.

<:-)

TonyM

unread,
May 15, 2020, 7:49:47 PM5/15/20
to TiddlyWiki
Odin

I had a thought rather than list by color why not tag your tags with a group tag, then create a button to set tag tiddlers so tagged to the colour for that group.

Subsequent list filters use the more meaning full tag group tags.

Regards
Tony

Odin Jorna

unread,
May 16, 2020, 9:40:00 AM5/16/20
to TiddlyWiki
Hi mat!

I managed to get it to work.  I made a tiddler tagged, $:/tags/ViewTemplate and used your code. I added a `list-after` field with `$:/core/ui/ViewTemplage/body, so the tags show up underneath the text of the tiddler. 
<$set name=curr value=<<currentTiddler>>>
{{{ [all[current]tags[]color[#ffeedd]] || $:/core/ui/TagTemplate }}}
</$set>

Then I modified the `$:/core/ui/ViewTemplate/tags` tiddler so it shows all the tags without the #ffeedd color. In bold is what I added.
<$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
<div class="tc-tags-wrapper"><$list filter="[all[current]tags[]!color[#ffeedd]sort[title]]" template="$:/core/ui/TagTemplate" storyview="pop"/></div>
</$reveal>
This did the trick! The normal tagline above a tiddler doesn't show any tags with the color #ffeedd.

Thanks a lot for your help and patience with me :-)

Op vrijdag 15 mei 2020 20:25:57 UTC+2 schreef Mat:
Reply all
Reply to author
Forward
0 new messages