Discussion:
[tw] [TW5] Add icons to the title based on tags
Danielo Rodríguez
2014-11-12 07:23:02 UTC
Permalink
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:

<Loading Image...>
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.
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Jeremy Ruston
2014-11-12 08:35:09 UTC
Permalink
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
Post by 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?
<https://lh5.googleusercontent.com/-fZOcFO52_lg/VGMKk5OCe5I/AAAAAAAALlI/UeAcFYbAP2Q/s1600/iconsExample.PNG>
.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.
--
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
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
--
Jeremy Ruston
mailto:***@gmail.com
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Danielo Rodríguez
2014-11-12 08:42:43 UTC
Permalink
El miércoles, 12 de noviembre de 2014 09:35:15 UTC+1, Jeremy Ruston
Post by 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
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.
Post by Jeremy Ruston
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.
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Jeremy Ruston
2014-11-12 08:47:35 UTC
Permalink
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?
Post by Jeremy Ruston
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
--
Jeremy Ruston
mailto:***@gmail.com
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Danielo Rodríguez
2014-11-12 08:56:18 UTC
Permalink
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
Post by Jeremy Ruston
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
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Jeremy Ruston
2014-11-12 10:35:31 UTC
Permalink
Hi Danielo
Post by Danielo Rodríguez
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.
--
Jeremy Ruston
mailto:***@gmail.com
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
Danielo Rodríguez
2014-11-12 12:15:18 UTC
Permalink
Post by Jeremy Ruston
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
icon -> myMultipleIconTiddler
MyMultipleIconTiddler -> `{{tux.svg}} {{js.svg}}`
Cool! maybe this is the way to go! A tiddler that calls svg tiddlers based
on tags.
--
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 ***@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
r***@gmail.com
2014-11-12 17:27:42 UTC
Permalink
<p dir="ltr">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. </p> <p dir="ltr">Sent using Boxer</p> <div class="quote">El 12/11/2014 13:15, Danielo Rodríguez &lt;***@gmail.com&gt; escribió:<br type='attribution'><blockquote class="quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><blockquote class="gmail_quote" style="margin: 0;margin-left: 0.8ex;border-left: 1px #ccc solid;padding-left: 1ex;"><div dir="ltr"><div><div class="gmail_quote"><div>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:</div><div><br></div><div>icon -&gt; myMultipleIconTiddler</div><div><br></div><div>MyMultipleIconTiddler -&gt; `{{tux.svg}} {{js.svg}}`</div><div></div></div></div></div></blockquote><div><br>Cool! maybe this is the way to go! A tiddler that calls svg tiddlers based on tags. <br></div></div></blockquote></div>

<p></p>

-- <br />
You received this message because you are subscribed to the Google Groups &quot;TiddlyWiki&quot; group.<br />
To unsubscribe from this group and stop receiving emails from it, send an email to <a href="mailto:tiddlywiki+***@googlegroups.com">tiddlywiki+***@googlegroups.com</a>.<br />
To post to this group, send email to <a href="mailto:***@googlegroups.com">***@googlegroups.com</a>.<br />
Visit this group at <a href="http://groups.google.com/group/tiddlywiki">http://groups.google.com/group/tiddlywiki</a>.<br />
For more options, visit <a href="https://groups.google.com/d/optout">https://groups.google.com/d/optout</a>.<br />
Continue reading on narkive:
Loading...