[TW5] Add icons to the title based on tags

[Danielo Rodríguez]

Hello everyone.

Recently I found an entry on my personal wiki on how to use svg images within TW, specifically for buttons.  Then I remembered that someone made a customization to add icons to certain types of links. That inspired me and I decided to add icons to tiddler's title based on tags to easily identify them. I succeed on my objective partially: I can add one icon, two at maximum. The problem is that I'm using a combination of css pseudo elements (like before) and backgrounds. Could someone help me to get a list of icons of any length?

Here is what I get:

Here is the CSS:

.tc-tagged-linux .tc-tiddler-title .tc-title {

    background: url(<<datauri "tux.svg">>) center left no-repeat;

    padding-left: 38px;

}

.tc-tagged-snippets .tc-tiddler-title .tc-title {

    background-image: url(<<datauri "snippet.svg">>);

    background-position: center left;

    background-repeat: no-repeat;

    padding-left: 38px;

}

.tc-tagged-javascript .tc-tiddler-title .tc-title::before

{ display: inline-block;

  content: ' ';

  background-image: url(<<datauri "js.svg">>);

  background-size: 30px 30px;

  height: 28px;

  width: 28px;

}

Thanks for any support.

[Jeremy Ruston]

Hi Danielo

I'm sure you know this, but the core does already allow a single icon to be assigned to tiddlers that is then displayed in the tag pill and in the tiddler title bar. For example:

http://tiddlywiki.com/#done

Another approach for what you're trying to do would be to add a new viewtemplate segment that just shows the icons corresponding to the tags on the current tiddler. Then you'd put that segment near the top of the viewtemplate, and use CSS to position the icons as best you can.

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Danielo Rodríguez]

El miércoles, 12 de noviembre de 2014 09:35:15 UTC+1, Jeremy Ruston escribió:

Hi Danielo

I'm sure you know this, but the core does already allow a single icon to be assigned to tiddlers that is then displayed in the tag pill and in the tiddler title bar. For example:

http://tiddlywiki.com/#done

I discovered it today, after making my question and I come here to post that I realized exactly that. For my surprise you answered me exactly what I was going to say, so anyway, thank you! I was going to point also: is not possible to accept a icon list instead a single icon? I don't think is too much work.
 

Another approach for what you're trying to do would be to add a new viewtemplate segment that just shows the icons corresponding to the tags on the current tiddler. Then you'd put that segment near the top of the viewtemplate, and use CSS to position the icons as best you can.

How can I position that viewtemplate near to the title? In my experience my custom viewtemplates are appended to the bottom of the tiddler.

[Jeremy Ruston]

Hi Danielo

is not possible to accept a icon list instead a single icon? I don't think is too much work.

Do you mean would it be possible to list the icons corresponding to the tags on the tiddler, rather than the icon corresponding to the tiddler itself?

 

 

Another approach for what you're trying to do would be to add a new viewtemplate segment that just shows the icons corresponding to the tags on the current tiddler. Then you'd put that segment near the top of the viewtemplate, and use CSS to position the icons as best you can.

How can I position that viewtemplate near to the title? In my experience my custom viewtemplates are appended to the bottom of the tiddler.

Use the list-after and list-before fields:

http://tiddlywiki.com/#Tagging

Best wishes

Jeremy 

[Danielo Rodríguez]

Hello Jeremy,

Again, I came here to post something that you already answered me. You are right the list before thing should do the trick, thanks.

Anyway I think the list-before functionality is too hidden, so I opened a github issue:

https://github.com/Jermolene/TiddlyWiki5/issues/1077

Do you mean would it be possible to list the icons corresponding to the tags on the tiddler, rather than the icon corresponding to the tiddler itself?

 

No, I mean putting more than one value in the icon field, like a list, and display that list
icon: tux.svg js.svg
 

[Jeremy Ruston]

Hi Danielo

 

 

No, I mean putting more than one value in the icon field, like a list, and display that list
icon: tux.svg js.svg

There is a way to do that. The tiddler named in the "icon" field is transcluded by the view template, so you can just include multiple images within it:

icon -> myMultipleIconTiddler

MyMultipleIconTiddler -> `{{tux.svg}} {{js.svg}}`

Best wishes

Jeremy.

 

 

[Danielo Rodríguez]

There is a way to do that. The tiddler named in the "icon" field is transcluded by the view template, so you can just include multiple images within it:

icon -> myMultipleIconTiddler

MyMultipleIconTiddler -> `{{tux.svg}} {{js.svg}}`

Cool! maybe this is the way to go! A tiddler that calls svg tiddlers based on tags.

[rdan...@gmail.com]

I finally got a very pleasant solution. I will publish it at braintest.tiddlyspot.com. Does someone have a suggestion on how to distribute it? I think building a plugin is maybe too much, or maybe is perfect because will be easier to remove / deactivate. I'm also horrible with naming so any good name digestion is welcome.

Sent using Boxer