Round avatars, thumbnails, and other images

Lately I learned how images can be rounded using CSS. This seems to be a "good formula":

.someclass {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

For some templates, and maybe just for a change, those rounded images can look very good. I'll show you CSS you can add to my hacks, and one Blogger gadget, to make images round. In my hacks you should add the CSS in the code before </style>.

Better recent comments gadget

Add this style:

.recent-comment-ico img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Profile gadget with post count

Add this style:

.author-avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Top Commentators gadget

Add this style:

.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Gadget for YouTube activity feed

This gives a nice "tube TV" like effect, add this style:

div.ytc_thumb img {
border:none;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Just one more, and I think you'll get the hang of it. :)

Popular Posts (Blogger gadget)

Add this style using Template Designer, Advanced, Add CSS:

.PopularPosts .item-thumbnail img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Automatic image caption from img title

I'm administering a Blogspot blog where some of the content uses img title tag to store image captions. Title tags are normally shown in a tooltip window, when user hovers the mouse over the image. There are some scripts around that display the image caption from image's title tag, but I decided to make my own. To get it quickly done, I used jQuery. This code goes before </head> tag, remove first line if you have jQuery already loaded.

Data provided by Pastebin.com - Download Raw - See Original

Now you can use the following html markup on the page:

<img class="caption" title="Image title" src="./pics/pic.jpg" />

and it will dynamically be turned into something like this:

<div class="caption-wrap">
<img class="caption" title="Image title" src="./pics/pic.jpg" />
<p class="caption-text">Image title</p>
</div>

Use the classname "caption" and a title tag for those images you wish to autocaption.

Alignment and left/right margins are copied from img to the wrapping div, so horizontal positioning of the title paragraph is (should be) the same for basic image alignment options (centered or float left/right).

Here's a link to an example article with many auto-generated image captions, the blog is in Finnish, article is about prohibition: Nobel-palkitut ja huippupoliitikot vaativat huumeiden laillistamista.

Blogger post editor's "compose mode" has possibility to set image captions. But I think compose mode is not reliable, and so I mainly use the HTML editing mode. Also the HTML markup is much simpler using title tags and this script.

If you use this, you can adjust the script and the styles for your needs. This script can also be used outside Blogger.


Update January 21st 2013: Changed the script to use $(window).load() function instead of $(document).ready(), which makes sure that outerWidth function always returns the image width correctly. Line 31 was changed.

Combined CSS and image comment bubbles

This article concludes my three part comment bubble article series. If you want comment bubbles in your Blogspot blog, you can pick one these three hacks.

1. Comment bubbles using only CSS
2. Comment bubbles using an image
3. Combined solution, which uses CSS whenever possible (installed in this blog)

As I explained in the CSS only comment bubble hack article, Internet Explorer does not support all CSS needed for rounded comment bubbles with gradient background. And the support varies from version to version.

Internet Explorer 8 and lower

I start with the "CSS only" hack installed, and then add there stuff for different Internet Explorer versions.

IE8 and lower don't have rounded corners and IE7 does not support :after, so I decided simply to use a comment bubble image, when IE version is lower than 9. First I thought that I'll use conditional comments like this:

<!--[if lt IE 9]>
..stuff for ie versions below 9..
<![endif]-->

But after trial and error I found out that it was not so easy. I learned that the browser version number does not actually determine the CSS capabilities, but the document mode (compatibility mode) instead. Well at least in Blogspot blogs, and that's where I'm targeting with my code.

I finally came up with this solution for IE (documentMode) < 9:

<!--[if IE]><script type='text/javascript'>
if(typeof document.documentMode == 'undefined' || document.documentMode < 9)
document.write('<style type="text/css"> a.comment-bubble { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiustzmZZ_DVTnRogE2sCovlleU6eLrJRn1oHbGe6cMmLm4kcqMNhD8BC2ha4QqDKZYbn5I9oxxOTgu6UzxYkRHdJDZ2yZAKaA5BRThJDFlz7nmFTW7ChfqrhG8oO4ZXscQLUwWDwUEoIo/s800/comment_bubble.jpg) no-repeat;width:36px;height:26px;border:0;padding-top:3px;} a.comment-bubble:after { border:0; };</style>');
</script><![endif]-->

That code is placed somewhere after template stylesheet and before </body>. The javascript is seen and runs only on IE. If documentMode < 9 (IE8, IE7, ...), new style definitions are written: bubble background uses an image, set width and height, no border and right padding, and for a:after remove the border that made the triangle. Basically make comment-bubble use same styles as in the image comment bubble hack.

Internet Explorer 9

As we saw in the CSS only comment bubble hack, IE9 does quite well with the comment bubble CSS: only the gradient background is missing. There is a filter provided by Microsoft to make gradients, but that messes the rounded corners. There are workarounds for that, too, but I chose another way: I made a gradient background image and encoded it in base64 to make a data URI, so it could be directly embedded in CSS without external file. Background image is correctly clipped by the rounded corners.

So the comment bubble CSS became:

Data provided by Pastebin.com - Download Raw

Line 15 is new (compared to CSS only solution) and contains the gradient for IE9. Because it is before the background gradient definitions, they override it on browsers that support gradients. And on IE8 and below the background is later reset to use an image (see previous chapter).

The discovery of data URIs base64 gradient PNG lead me do a simple linear gradient tool for making embeddable gradient backgrounds.

Complex solution?

So, is there any point in this complex solution, one might ask. Well, to be honest, I don't know :) You might prefer to use either CSS only or image only solution, for simplicity. I could also have used either, but this way I learned more. In a year or two Internet Explorer will do CSS comment bubbles, too, and then these browser version dependend hacks won't be needed anymore.