[TW5] Custom images/icons on internal links

[Frederico Jeronimo]

Hi guys,

I'm quite new to web development but I discovered TiddlyWiki 5 recently and found this amazing program to be the ideal mechanism to keep track of my personal data all in one place instead of the myriad of different programs (e.g. Excel, Todolist, OneNote, Word, etc.) I used before.

To that end, I've been customizing the UI and the CSS to my needs in the last few days. This has been a great learning experience so far but I seem to have hit a hurdle.

It concerns adding images and vector icons to links (both internal and external) and I have two use cases to apply:

1. Manual on demand

I would like to be able to flag individual links with any image/icon I want independently of their type (and for the image itself to be part of the link as well). For example:

While for external links this is not really an issue for me, since I merely want a single image for all of them and can therefore modify the a.tw-tiddlylink-external class, I'm not so sure how to go about with internal ones that can vary on case by case basis as I don't know how to associated them with a custom class using WikiText.

I tried to reconstruct them using normal HTML <a> tags such as in (with contact-icon being the icon CSS class):

<a class='tw-tiddlylink contact-icon' href='#My Tiddler'>The link</a>
<a class='tw-tiddlylink contact-icon' href='My Tiddler'>The link</a>
<a class='tw-tiddlylink tw-tiddlylink-resolves contact-icon' href='#My Tiddler'>The link</a>
<a class='tw-tiddlylink tw-tiddlylink-resolves contact-icon' href='My Tiddler'>The link</a>

but the resulting links are not valid. I suspect this might have to do with the missing Javascript events that replace the href portion in TW5, but I'm not sure how to go about recreating them.

2. Automatically

While having the case above would certainly be enough for my purposes, the ideal complement to it would be to set some of these automatically if I wanted.

I have a series of special tags (with purple colour and a specific different icon each) that indicate the category of a tiddler (e.g. note, idea, definition, person, etc.). One tiddler only has one category tag at most. For instance:

I would like for a resolved internal link to be able to:

1. Scan the target tiddler tags.
2. Retrieve the category tag by colour or less ideally by a static white list (there shouldn't be more than one, but if so, pick the first one).
3. Fetch the associated icon of the chosen category tag (these are vector graphics from font-awesome).
4. Apply it to the left of the link automatically when rendering without the need for the user to specify anything.
   

I understand that this might be trickier to implement, so I'm definitely not too fuss about it (i.e. more than happy to set the icons by hand).

Is this feasible?

Thanks,

Frederico Jeronimo

[Stephan Hradek]

Am Sonntag, 18. Mai 2014 10:57:10 UTC+2 schrieb Frederico Jeronimo:

1. Retrieve the category tag by colour or less ideally by a static white list (there shouldn't be more than one, but if so, pick the first one).

I have no clue what you mean by "category tag". Maybe you can explain?

1. Fetch the associated icon of the chosen category tag (these are vector graphics from font-awesome).

I would associate that with a class where the CSS then links to the graphics.

1. Apply it to the left of the link automatically when rendering without the need for the user to specify anything.
   

I would do this with CSS. Using ":before" selector and "content: url(…)"

Scan the target tiddler tags.I understand that this might be trickier to implement, so I'm definitely not too fuss about it (i.e. more than happy to set the icons by hand).

Actully that is not too complicated. Use a template tiddler. Maybe this gets you going:

1. Put a field "class" into each of your target tiddlers. As I did not understand your definition above, I thought I made it simple first ;)
2. Create a template tiddler "mylink" which does the "magick":

<$set name="myclass" value={{!!class}}>
<span class=<<myclass>>><$link><$view field="title"/></$link></span>
</$set>

You see? I simply put a <span> around the actual link, so you get

<span="value of the tiddler's class field"><a href="…">tiddler's title</a></span>

Your CSS needs to be something like:

span.MyClass > a:before {
    content: url(…);
}

3. Use the template tiddler instead of your normal [[myTargetTiddler]] like so:

{{myTargetTiddler||mylink}}

[Stephan Hradek]

Oops! It's even easier than I thougt! I just tested and tthis is sufficient for my example with using the class-field

<span class={{!!class}}><$link><$view field="title"/></$link></span>

[Frederico Jeronimo]

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):

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):

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):

[Danielo Rodríguez]

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?

[Frederico Jeronimo]

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}}

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'). 

[Måns]

Hi Frederico, Stephan and Danielo

Do you know if it will ever be possible to use tiddler images in a class? 

Imo hardcoding base64 binary code for images in stylesheets has never been "my cup of tea" - however I really like the idea of having few images as tiddlers in a TW - and reuse them for many purposes: as icons - button images etc etc ...

I realize that it *is* possible when tiddlers are distributed via node.js or tiddlyweb as individual entities, because it allows us to point to a binary image tiddler - I am talking about a standalone/one file TW... 

Cheers Måns Mårtensson 

[Danielo Rodríguez]

Thank you Federico.

Looks that you have quite experience with CSS. Thank you for taking the time to explain it to me.

I will put it in practice. Thank you!

[Stephan Hradek]

Am Samstag, 31. Mai 2014 14:46:33 UTC+2 schrieb Måns:

Do you know if it will ever be possible to use tiddler images in a class? 

Just by transcluding them in the stylesheet.
 

Imo hardcoding base64 binary code for images in stylesheets has never been "my cup of tea"

Which would be kind of hard-coding.

[Måns]

Hi Stephan

 

Do you know if it will ever be possible to use tiddler images in a class? 

Just by transcluding them in the stylesheet.

Could you please show me the right syntax for doing that?

I have tried variations like :  

.SomeClass{

    background: url({{$:/core/images/home-button}}) center left no-repeat;
    padding-left: 18px;
}

 - to no avail

Cheers Måns Mårtensson

[Stephan Hradek]

I wish I could but I can't - at least not yet.

[Danielo Rodríguez]

I think it is possible using macros.

The theme Tiddlers uses it

[Jeremy Ruston]

Hi Måns

Do you know if it will ever be possible to use tiddler images in a class? 

Just by transcluding them in the stylesheet.

> Could you please show me the right syntax for doing that?

Here's how it's done:

.SomeClass{

    background: url(<<datauri "$:/core/images/home-button">>) center left no-repeat;

    padding-left: 18px;

}

The datauri maro is needed to convert the tiddler to base64 and prepend the data URI furniture.

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

[Måns]

Hi Jeremy and Danielo

Thank you very much :-)

This was one of the features I was hoping to get with tw5 - GREAT !!

Cheers Måns Mårtensson

[Måns]

Hi again Jeremy

I just tried

.SomeClass{

    background: url(<<datauri "$:/core/images/home-button">>) center left no-repeat;

    padding-left: 18px;

}

and it didn't work.

Then I tried replacing the image with another image (*.png) - still no result..

Am I experiencing a bug?

I'm using TW 5 version: 0.12 beta in Chrome version: 31.0.1650.63 on Linux.  

Cheers Måns Mårtensson

[Jeremy Ruston]

Strange. In order for wikitext processing to occur you'll need to ensure that the type of the stylesheet tiddler is set to text/vnd.tiddlywiki.

Best wishes

Jeremy

—
jeremy...@gmail.com

[Stephan Hradek]

I think ith has to be like this:

a:before {
  content: url(<$macrocall $name="makedatauri" text={{$:/core/images/home-button}} type="image/svg+xml"/>)
}

It works partly. When I inspect a link using Firebug, I see the content url. But nothing is displayed.

[Jeremy Ruston]

The problem here is that the data URI technique will only work with full SVG images (ie tiddlers with the content type image/svg+xml, and that include a DOCTYPE). It won't work with image tiddlers that use embedded SVG elements; they don't actually define an independent image, but rather an inline image that can be transcluded. Have a look at the difference between the source of these two images:

http://tiddlywiki.com/#:%24%3A%2Fcore%2Fimages%2Fhome-button%20%5B%5BMotovun%20Jack.svg%5D%5D

Best wishes

Jeremy.

[Danielo Rodríguez]

I'm still not able to transclude any kind of image to the css.

I tried with a png image (embedded in base64) and with a svg image. No luck in any case. I set up the text to be tiddlywiki on the css.

Can anyone explain how to create new buttons with svg or png images?

[Jeremy Ruston]

Hi Danielo

On Sun, Jun 1, 2014 at 7:16 PM, Danielo Rodríguez <rdan...@gmail.com> wrote:

I'm still not able to transclude any kind of image to the css.

Can you share examples of what you tried? Directly transcluding an image into CSS won't work; you need to use the <<datauri>> macro that is shown above.

 

I tried with a png image (embedded in base64) and with a svg image. No luck in any case. I set up the text to be tiddlywiki on the css.

Can anyone explain how to create new buttons with svg or png images?

There are some examples of SVG buttons in TW5 itself; what are you trying to accomplish?

Best wishes

Jeremy

 

El domingo, 1 de junio de 2014 10:55:25 UTC+2, Jeremy Ruston escribió:

The problem here is that the data URI technique will only work with full SVG images (ie tiddlers with the content type image/svg+xml, and that include a DOCTYPE). It won't work with image tiddlers that use embedded SVG elements; they don't actually define an independent image, but rather an inline image that can be transcluded. Have a look at the difference between the source of these two images:

http://tiddlywiki.com/#:%24%3A%2Fcore%2Fimages%2Fhome-button%20%5B%5BMotovun%20Jack.svg%5D%5D

Best wishes

Jeremy.

On Sun, Jun 1, 2014 at 6:34 AM, Stephan Hradek <stephan...@gmail.com> wrote:

I think ith has to be like this:

a:before {
  content: url(<$macrocall $name="makedatauri" text={{$:/core/images/home-button}} type="image/svg+xml"/>)
}

It works partly. When I inspect a link using Firebug, I see the content url. But nothing is displayed.

--
Jeremy Ruston

mailto:jeremy...@gmail.com

[Danielo Rodríguez]

Hello Jeremy,

There are many svg examples, that's right but they are not very real world examples. Any svg you can find anywhere have thousand of extra fields and parameters. How can we adapt those images?

That's what I'm talking about.

[Ton Gerner]

Hi Danielo,

The basics of using svg icons can be found in [1]
Go to Customization > Buttons & icons > Icons

Cheers,

Ton

[1] http://tw5custom.tiddlyspot.com/

[Jeremy Ruston]

Hi Danielo

There's some background here:

http://tiddlywiki.com/#UsingSVG

It's important to understand the distinction between an SVG *document* displayed in an IMG tag and an SVG fragment inserted into the DOM.

The former allows you to display any off-the-shelf SVG image; just pop it in a tiddler with the right MIME type, and then do {{imageName}} or [img[imageName]]. With this approach you don't get to control the CSS applied to the SVG image; it's sandboxed, like an iframe.

The other approach of embedding a fragment of SVG is done by transcluding a wikitext tiddler that contains an SVG element. The content of the image is subject to the prevailing CSS rules.

To create SVG fragment images is done by taking an ordinary SVG image and trimming off the first couple of lines.

The other approach is to use an icon font; it's much easier to change the colours of them. You can embed an icon font in the same way as the Starlight theme.

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.

[PMario]

On Wednesday, June 4, 2014 6:51:09 PM UTC+2, Danielo Rodríguez wrote:

You can remove most ot the "thousand of extra fields" aka metadata eg: software, that created the svg (+ specific setting crap). Most of the time, there are a lot of useless IDs for groups .... 

You can use eg: InkScape and export a "cleaner version" of your svg's, which also use much less memory. ... BUT
be aware to keep the creator + licensing meta data :)

See: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics and: http://www.w3.org/TR/SVG/
for the details.

have fun!
mario

[Matabele]

Hi

This site does most of the work for you: http://icomoon.io/app/#/select

I find that .svg icons from here require very little cleaning up -- and the resizing is done for you.

regards

[Danielo Rodríguez]

Thank you Matabelle, that looks like a very good set of icons.

[Frederico Jeronimo]

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:

Cheers,

Frederico

[Danielo Rodríguez]

Thank you Federico and Jeremy.

Jeremy, your answer have definitively helped me to create my svg buttons and use them as part of my CSS stylesheets.

Federico, thanks to your awesome CSS rules now my links looks awesome. I prefer to use SVG images contained within TW. It works like a charm.

Thank you all.