Eblogger Tricks.com

You might have noticed a growing trend towards using images to link to posts. Could this be the influence of Pinterest? Maybe. Anyhow, some people laboriously code their pictures listing manually in a HTML/Javascript gadget to form a gallery, while others add one picture at a time using a Picture gadget. That’s a lot of work and a pain in the butt – especially, if you publish more than a few posts a week.

Fortunately, you can now use a Recent Posts Image Gallery Widget that allows you to list pictures easily and automatically. It is a perfect solution for listing recipes, design projects and other posts with lots of images.

These are the most important features of this neat gallery:

You can set your preferred image size - any size you want. The image will come out sharp, with no pixelation.
It is light - you see what is actually loaded. Almost all image galleries take ages to load because they first load full size images and then shrink them by using CSS. This gallery loads the specified image size straightaway.
It lets you filter posts by using a label.
It supports multiple galleries on a single or separate page. The options (thumb size and post title overlay) can be set independently for each gallery.

How to install the Recent Posts Image Gallery for Blogger blogs

1. Sign in to Blogger, then go to Template --> Edit HTML.

2. Backup your template.

3. Search for (CTRL + F)

</head>

4. Copy and paste the following script immediately before said tag:

<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html 
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
    var entries = root.feed.entry || [];
    var html = ['<div class="bsrp-gallery nopin">'];
    for (var i = 0; i < entries.length; ++i) {
        var post = entries[i];
        var postTitle = post.title.$t;
        var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png';
        var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
        var links = post.link || [];
        for (var j = 0; j < links.length; ++j) {
            if (links[j].rel == 'alternate') break;
        }
        var postUrl = links[j].href;
        var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
        var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
        var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
        html.push('<div class="bs-item">', item, '</div>');
    }
    html.push('</div>');
    document.write(html.join(""));
}
//]]>
</script>

5. Now, add the following CSS code into the CSS section of your template, immediately before the </b:skin> tag:

/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
/* BloggerSentral Recent Posts Image Gallery CSS End */

Note: If you prefer to put the CSS together with the scripts – either in a post or a HTML/Javascript gadget – you need to enclose it in a </script> tag (<script> at the start, </script> at the end).

6. Lastly, add the following script wherever you want the gallery to appear. You can add it anywhere - in a post, a page, or a HTML/Javascript gadget.

<script>
  var bsrpg_thumbSize = 150; 
  var bsrpg_showTitle = true; 
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery"></script>
<script>

Customization

You can set the image size (in pixel) in line 2.

Set line 3 to true to add post title overlay on each image. False will display the image without overlay. Note: In both cases, the post title will appear in the tooltip that pops up when you hover the image.

To display recent posts under a label (e.g. DESIGN), replace the base URL for the src attribute with the label feed URL, like this: /feeds/posts/summary/-/RECIPE