Hi guys,
One final note from me if you want an alternative to a custom macro and
don't mind compromising a bit on the tiddler titles by having a reserved
sub-string such as a prefix or suffix to indicate the type of link.
This allows you to completely bypass a custom template tiddler by simply
using text formatting CSS selectors such as $ ('end with'), * ('contains')
or ^ ('starts with').
Please note that in CSS, identifiers (including element names, classes, and
IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A1 and higher, plus the hyphen (-) and the underscore (_).
This means that any other characters such as spaces (%20) or accented
characters (e.g. é = %233) will need to be escaped.
For example, in your CSS:
/* For tiddlers with names containing "Note -" as part of their title. */
a[href*='Note%20-']
{
background: url("./images/category_note.png") center left no-repeat;
padding-left: 20px;
}
/* For tiddlers with names containing "Article -" as part of their title. */
a[href*='Article%20-']
{
background: url("./images/category_article.png") center left no-repeat;
padding-left: 20px;
}
/* For tiddlers with names containing "Idea -" as part of their title. */
a[href*='Idea%20-']
{
background: url("./images/category_idea.png") center left no-repeat;
padding-left: 20px;
}
Then you can create links using normal TiddlyText format (e.g. [[link]])
and the correct icon will be picked up automatically according to the
target tiddler's title.
One added bonus of this approach is that default Tiddlywiki links such as
those in the 'Recent' or 'Tools > All' lists will also display the icon
automatically out of the box, as in the image below:
<https://lh6.googleusercontent.com/-cBH_VFgjZBU/U5L_bK_r2KI/AAAAAAAAAEQ/LnMWLZ9qa4E/s1600/InternalIcons.png>
<https://lh6.googleusercontent.com/-cBH_VFgjZBU/U5L_bK_r2KI/AAAAAAAAAEQ/LnMWLZ9qa4E/s1600/InternalIcons.png>
Cheers,
Frederico
On Saturday, May 31, 2014 12:49:07 PM UTC+1, Frederico Jeronimo wrote:
> Hi Danielo,
>
> I don't see why this wouldn't work with other svgs or any other image
> format for that matter. As a quick related test, I tried with a normal
> image instead (a gif) and detected no problems:
>
> *CSS*
> span.archive> a
> {
> background: url("./images/Icon_Winzip.gif") center left no-repeat;
> padding-left: 18px;
> }
>
> would lead, for example, to a link pointing to a tiddler ('Zoology
> Research - Mammals (2013)') with the field 'class' set to value 'archive'
> as such:
> {{Zoology research - Mammals (2013)||mylink}}
>
>
> <https://lh5.googleusercontent.com/-ck_XaWuMXGs/U4m9XJav4eI/AAAAAAAAACY/uuDquaXK3ak/s1600/ZoologyResearch.png>
>
> As for the amount of work required, I think it really depends on the
> number of individual icons you want for your tiddlers. For me, I only have
> about 5 or 6 main categories of tiddlers, so I only need 5 or 6 classes in
> total. To put it in context, I can have a class called 'note' with about 30
> tiddlers and another called 'idea' applied in 40. All the notes have the
> same hyperlink icon as well as all the ideas.
>
> Of course, if I wanted individual icons for each and every tiddler, I was
> looking at specifying 70 classes in total, which might be quite a bit of
> work...
>
> To make this easier to manage, I'm in the process of creating template
> tiddlers that will populate the class field automatically (and define the
> overall structure of the tiddler) when I generate new ones (e.g. if I want
> a note tiddler, the class will be filled with 'note').
>
>
> On Tuesday, May 27, 2014 10:59:05 PM UTC+1, Danielo Rodríguez wrote:
>>
>> Can this work with normal svg images? I like the font awesome icons but
>> I'm worried about compatibility. So for each link you have to create a new
>> tiddler with the title and a field called class? how do you manage this?
>>
>> Would you consider to post a public online example?
>>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
