Recent Posts Image Gallery For Blogger Blogspot

Mahi7ete | 05:58 | 2 comments

I notice a growing trend towards using pictures to link to posts. Pinterest effect perhaps? Anyway, some people code the pictures listing manually in a HTML/Javascript gadget to form a gallery, while others painstakingly add one picture at a time using a Picture gadget. It's a pain.
But there is a good news: you can now list the pictures easily and automatically using our recent posts image gallery widget. Perfect for listing recipes, design projects and other photo-centric posts.

Below are some the features of the gallery:
You can set your preferred image size, any size. Image will come out sharp, no pixelation.
Light -what you see is what actually loaded. Most image galleries take forever to load because they load full size images and then shrink them using CSS. This gallery loads the correct image size the first time.
Posts can be filtered using a label.
Support multiple galleries. The options (thumb size and post title overlay) can be set independently for each gallery.

Installation
1. First go to Template > Edit HTML and add this script before the </head> tag in your template.

<script>
// Blogger Recent Posts Gallery by bloggertrickstutorialtemplate.blogspot.com/
// Tutorial at http://bloggertrickstutorialtemplate.blogspot.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" title="Get this from BloggerSentral.com">'];
    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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDryQHacipd6c3HgjLIMV6KIVnyc3ZP3GMxAGkTpNumbzAAk83hAN4ZP7dhA9I7jYI8buyzAqgGfilCSO_9Q-5Cuh0KxqbajN48qibP_GUBuye-RQepQ4-bbcL-oFmeftaDk8w_t0ZNvm/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>

2. Then, add the following CSS code into the CSS section of your template (right before </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: #7f7f7f\9; 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 */

If you prefer to put the CSS together with the scripts (in a post or in a HTML/Javascript gadget), you must enclose it in a </script> tag.

3. Finally add this script wherever you want the gallery to appear. It can be added anywhere -in a post, a page or a HTML/Javascript widget.

<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>

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 image without overlay. However, 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. RECIPE), replace the base URL for the src attribute with the label feed URL, like so:
/feeds/posts/summary/-/RECIPE
Set the number of posts to be displayed by changing the value of max-results query parameter.

This one shows the latest 10 posts from Blogger Sentral's general feed (/feeds/posts/summary). Image size is set to 100px, and post title overlay is set to false.

This one displays the latest 6 posts from Blogger Sentral's "widgets" label feed (/feeds/posts/summary/-/widgets). Image size is set to 140px, and post title overlay is set to true.


Category: , , ,

About GalleryBloggerTemplates.com:
GalleryBloggerTemplates.com is Free Blogger Templates Gallery. We provide Blogger templates for free. You can find about tutorials, blogger hacks, SEO optimization, tips and tricks here!

2 comments:

  1. If facing any problem, just knock on comment.

    ReplyDelete
  2. Very informative article thank you for sharing.

    Rocks Player also has a very interactive and attractive interface. This way, you can easily access all your hidden media with a secured PIN or password. You can access all of its unique features with added privacy protection. Along with protecting your videos and photos, you can also enjoy private browsing in the app. This way, you can access any content on the web without letting anyone else know what you have been watching.

    ReplyDelete

Blogger templates