Mark external links using CSS and inline image

[Stephan Hradek]

Hi!

I'm using TiddlyWiki for some days now and really like it. I also started to tweak a bit the sytlesheets and thought that, maybe, some of you would like to have a small icon after external links too.

For this, I edited the StyleSheetLayout tiddler, adding the 2 definitions below. Hope you like it.

a.externalLink:after {
    display: inline-block;
    content: "";
    width: 12px;
    height: 8px;
    background: transparent url(data:image/gif;base64,R0lGODlhCAAIAIABAABmZv///yH5BAEKAAEALAAAAAAIAAgAAAIPjAMJd5q2HoQLsTpto84UADs=) no-repeat center;
}

a.externalLink:hover:after {
    display: inline-block;
    content: "";
    width: 12px;
    height: 8px;
    background: url(data:image/gif;base64,R0lGODlhCAAIAIAAAP///////yH5BAEKAAEALAAAAAAIAAgAAAIPjAMJd5q2HoQLsTpto84UADs=) no-repeat center;
}

[Stephan Hradek]

Oops... Just noticed my mistake. Of course you should add the 2 definitions to the StyleSheet Tiddler.

[tiziano de togni]

Il 19/09/2012 15:18, Stephan Hradek ha scritto:
> Hi!
>
> I'm using TiddlyWiki for some days now and really like it. I also started
> to tweak a bit the sytlesheets and thought that, maybe, some of you would
> like to have a small icon after external links too.
>
> For this, I edited the StyleSheetLayout tiddler, adding the 2 definitions
> below. Hope you like it.
>

where did you find this extremely compact icon? There are more like this
somewhere?

yes I like it, for TiddlyWiki this technique is very useful for small UI
icons, and images because the file doesn't depend from external images
and works even when it's downloaded and used locally.

but you should also explain us the underlying technique.
----
By using the Data URI scheme [1] you can embed images directly into your
HTML and CSS. It works by encoding an image into a base64 string and
place it directly withing an HTML image tag or as a CSS background URL.
The image below is encoded directly into the HTML on the page:
<img alt=""
src="data:image/gif;base64,R0lGODlhEgASAKIGAO7u7ru7u3d3d4iIiKqqqv///////wAAACH5BAEAAAYALAAAAAASABIAAAMgaLrc/jDKSau9OOvNcSBgGEhEYZ4DeQIFkEbEIM9CdyUAOw=="
/>

or declared into a CSS rule:
background-image:
url(data:image/gif;base64,R0lGODlhEgASAKIGAO7u7ru7u3d3d4iIiKqqqv///////wAAACH5BAEAAAYALAAAAAASABIAAAMgaLrc/jDKSau9OOvNcSBgGEhEYZ4DeQIFkEbEIM9CdyUAOw==);
----

Tiddlytools offers a package to "store or link binary files (such as
jpg, gif, pdf or even mp3) within your TiddlyWiki document and then use
them as images or links from within your tiddler content" [2].

Also, I think every OS has it's own command line base64 command to
encode files to base64.
-----
[1] http://www.phpied.com/data-urls-what-are-they-and-how-to-use/
[2] http://www.tiddlytools.com/#AttachFilePackage

regards
--
tiziano de togni
______________________________________
http://tiziano.tiddlyspot.com

[Stephan Hradek]

Thanks Tiziano for explaining the background.

I simply created the icon using Gimp (http://www.gimp.org/).

Base 64 encoding I did with perl:

perl -MMIME::Base64 -e 'local $/; print encode_base64 <>' iconExternalLink.gif

[Eric Shulman]

> I simply created the icon using Gimp (http://www.gimp.org/).
> Base 64 encoding I did with perl:
> perl -MMIME::Base64 -e 'local $/; print encode_base64 <>'
> iconExternalLink.gif

For people who do not have Gimp and Perl (i.e., most Windows users),
you can use
http://www.TiddlyTools.com/#AttachFilePackage
to generate tiddlers containing Base64-encoded binary file content
(such as the .gif images Stephan is using). You can then copy/paste
the Base64 text into your CSS, as Stephan has done.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://www.TiddlyTools.com/#Donations

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact

[andrew.j.harrison84]

I have ie7 on windows xp and I installed AttachFilePackage and pulled in a couple bmp files that I am going to use as a copy to clipboard icon but I was hoping to figure out how to make it look interactive. I want it to display one img and then a different one when i hover over it and to go back to the first when clicked. I am not sure how to format that. Should I do the UI with css? Any suggestions?

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To post to this group, send email to tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

[andrew.j.harrison84]

ok, well i am on my way to answering my own question. I was stuck on trying to use head.js because it had some psuedo-class defining but not the hover class. So now i think I'll look into lab.js+modernizr or some other combination. From what I read on the internet about best practices, it is best to load an external file so it can be cached by the browser. Does AttachFilePlugin do browser caching? I want svg graphics since I understand that is where technology is headed but ie7 wont display svg. Anyone have any suggestions?