J.S. Blog Stop: Blogger: View Your Blog as Images

I've been hard at work on projects and contract work which has taken me away from this blog of late. It's been a really busy and my time working on Blogger tools isn't what it was. However, I did come up with a fun little not long ago I thought some readers might enjoy.

It all started one day while browsing Reddit.com when I stumbled upon a blog specializing in photo shopped celebrity pictures which for some strange reason removed their eyebrows. The pictures were a fun little time killer to break some tension, but wading through the near year old collection of 1 photo each day was taking a while. So, being as this blog was using Blogger I decided I'd use a script to pull their feed and spit out the pics so I could see them all in one big collage.

Using This Script

This script requires jQuery, as most other items I've posted on here do. If you have it enabled on your blog, you'll need only include the following JavaScript either in your template or with an HTML/JavaScript widget. Here's the script:

<script type='text/javascript'>
var jsBloggerCollage = function(){
var $collages = [],
init = function(){
var $tempCollages = jQuery(".blogger-collage");

$tempCollages.each( function() { //spawn off a collage for each item
$collages.push(new Collage($(this) ) )
});
};
function Collage(parent) {
var $parent = parent,
config = {
"blogUrl": "",
"maxResults": "1000",
"showMax": 10,
},
init = function() {
//load config options and clean if needed
jQuery.extend(config, jQuery.parseJSON( $parent.attr("data-config") ) )
if(config.blogUrl > "") { //only request if valid url
//clean blogUrl
config.blogUrl = config.blogUrl.replace(/\/$/, ""); //remove trailing backslash
var index = config.blogUrl.search(/(?:(http\:\/\/|https\:\/\/))/i);
if(config.blogUrl.search(/(?:(http\:\/\/|https\:\/\/))/i) === -1) { //prepend http:// if not found
config.blogUrl = config.blogUrl.replace(/[\/:]/, ""); //remove backslashes and : just in case
config.blogUrl = "http://" + config.blogUrl;
}
var qs = {
alt : "json",
"max-results": config.maxResults
},
url = config.blogUrl + "/feeds/posts/summary?callback=?";
jQuery.getJSON(url, qs, process);
}
else {
$parent.append("<h3>Invalid blogUrl Provided</h3>");
}
},
process = function(data, status, xhr) {
var i = 0,
nShown = 0,
entries = data.feed.entry,
//$picTemplate = $("<span><img></img></span>"),
$pic;

for (i; i < entries.length; i++) {
if(entries[i].media$thumbnail){
$pic = jQuery("<span class='js-collage-entry'></span>");
$pic.append("<a target='fullsize' href='" + entries[i].media$thumbnail.url.replace("/s72-c/", "/s1600/") + "'><img src='" + entries[i].media$thumbnail.url + "'></a>");
$parent.append($pic);
nShown++
if(nShown >= config.showMax) {
break;
}
}
}
};
init();
}
jQuery(document).ready(init);
}();
</script>

That does the work, but you need to include HTML markup to tell it what you'd like shown. Here are a couple of examples:

<div class='blogger-collage' data-config='{"blogUrl": "jsblogstop.com", "showMax": 10}'></div>
<div class='blogger-collage' data-config='{"blogUrl": "celebswithouteyebrows.blogspot.com", "showMax": 10}'></div>

You may include as many of these on a single page as you'd like. Simply change the blogUrl entry to your own, then set a maximum number of pictures to show. This will pull in each post for which Blogger stores a thumbnail image. Each thumbnail then links to a larger version if you've used your Picasa Web album(where Blogger stores images by default) to post pics. Below is the 2nd example.

Celebs with no Eyebrows

Further Configuration through CSS Styles

I included a .js-collage-entry CSS class on each image container to allow for further customization. You'll need to know some css to get this working, but out of the box each picture should show up with the same styles as any other on your blog. Most newer templates include padding and a box shadow for a pleasing effect.

Conclusion

This is really just a fun little script I threw together on a whim. It's hardly an exhaustively designed piece of code, but I thought some readers may enjoy it. Give it a look and have some fun with the quick collages. Maybe I'll share a more robust version at some time in the future.