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? El domingo, 18 de mayo de 2014 13:21:29 UTC+2, Frederico Jeronimo escribió: > > Thanks Stephan. This works like a charm. :) > > Ah, it seems that copy pasting images directly in the Google Group's > editor does not upload them when posting (they do display in the preview > though) so they are all missing from my original post. I will try again by > using the *Insert Image* macro instead now. > > Sorry for the confusion about the "category" tags. They are completely > normal TW5 user tags that simply have a different semantic value in my own > wiki. They act as both a visual indication and grouping of tiddlers of the > same type (e.g. for example all tiddlers that contain definitions of > concepts have the 'definition' category tag and all the ones that contain > ideas for future implementation are flagged with 'idea'). > > They have an unique colour (purple) and individual icons to differentiate > betwen them. Other than that, just plain TW5 user tags. Here's one example > tag pill (hopefully image uploads this time): > > > <https://lh4.googleusercontent.com/-z_pe93--FUA/U3iSREAHxiI/AAAAAAAAAAw/E85U_1f4XOo/s1600/TW5-NoteCategoryTag.png> > > > I was originally thinking of using them here to avoid duplicating data > (e.g. all tiddlers with 'Note' tag will automatically have the same link > icon) but having an extra class field as you suggested works perfectly (can > be a bit more error prone for the user but perfectly manageable). > > It's pretty much as Stephan explained, but if anyone is interested in how > this is working for me, here it is for reference (uses Font > Awesome<http://fortawesome.github.io/Font-Awesome/> > ): > > 1. CSS > > /* Missing links in red */ > a.tw-tiddlylink-missing > { > color: #af0000; > } > > /* All external links with the same icon */ > a.tw-tiddlylink-external::before > { > content: "\f0eb"; /* Font Awesome icon: fa-lightbulb-o */ > } > > span.book > a:before > { > color: blue; > content: "\f02d"; /* Font Awesome icon: fa-book */ > } > > span.calendar > a:before > { > color: blue; > content: "\f073"; /* Font Awesome icon: fa-calendar */ > } > /* [...] As needed */ > > > 2. mylink tiddler > > The simplified version works perfectly: > > <span class={{!!class}}><$link><$view field="title"/></$link></span> > > > 3. Target tiddlers > > Then I created two tiddlers with class fields : *Meeting with Anna > (class=calendar)* and *Dystopian futures in science fiction (class=book)*. > > 4. Links themselves > > {{Dystopian futures in science fiction||mylink}}<br> > {{Meeting with Anna||mylink}} > > leads to (image): > > > <https://lh3.googleusercontent.com/-BFoT5X47EHo/U3iU4PdKmaI/AAAAAAAAABE/DuuMratbfy4/s1600/TW5-Example.png> > -- 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.
