Re: [tw] Mark external links using CSS and inline image

[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

-- 
You received this message because you are subscribed to the Google Groups 
TiddlyWiki group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/tiddlywiki/-/FZHY-8IMJQIJ.
To post to this group, send email to tiddlywiki@googlegroups.com.
To unsubscribe from this group, send email to 
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/tiddlywiki?hl=en.

Re: [tw] Mark external links using CSS and inline image

[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///wAAACH5BAEAAAYALAASABIAAAMgaLrc/jDKSau9OOvNcSBgGEhEYZ4DeQIFkEbEIM9CdyUAOw== 
/


or declared into a CSS rule:
background-image: 
url(data:image/gif;base64,R0lGODlhEgASAKIGAO7u7ru7u3d3d4iIiKqqqv///wAAACH5BAEAAAYALAASABIAAAMgaLrc/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

--
You received this message because you are subscribed to the Google Groups 
TiddlyWiki group.
To post to this group, send email to tiddlywiki@googlegroups.com.
To unsubscribe from this group, send email to 
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/tiddlywiki?hl=en.

[tw] 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///yH5BAEKAAEALAAIAAgAAAIPjAMJd5q2HoQLsTpto84UADs=)
 no-repeat center;
}

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


-- 
You received this message because you are subscribed to the Google Groups 
TiddlyWiki group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/tiddlywiki/-/Z4qcMzaqdQ8J.
To post to this group, send email to tiddlywiki@googlegroups.com.
To unsubscribe from this group, send email to 
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/tiddlywiki?hl=en.