Recent Posts Image Gallery For Blogger

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.

blogger recent posts image gallery

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 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" 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/AVvXsEjzhy8QJb5qheHFi-RxJJHmNSMO9aJZlK5M66_fzppTay7DABdbUatVGobXhZzERLSoEu9PV_Sn8OJ94X88rUKIe2L07GBXoMrGDRm-maJWqNEN-bzY1Q4mObAbbJM5D3MoHf049hHW7ZcJ/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.

Demo

Below are two live demo galleries.

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.

Enjoy!

53 comments to "Recent Posts Image Gallery For Blogger"

Meri Pellens May 20, 2013 at 11:53 PM    

Loved!!!

Unknown May 21, 2013 at 1:22 AM    

Love it but the post titles are not overlaying for me, they show up on the side. The thumbnails also won't go next to each other, no matter how small I make them they always show stacked on top of each other with means lots of white space. (Even if I set the post titles to false.) Can you help?

Arham Sukardi May 21, 2013 at 7:28 AM    

Very cool, I'll try it soon, thank you master

Neu May 21, 2013 at 10:28 AM    

nice share GL. sure blogspot user will love to try this

Tarana Khan May 21, 2013 at 9:24 PM    

Thank you! I would really like something similar for Popular Posts too!

Unknown May 22, 2013 at 1:14 AM    

Any help?? Would love to use it but not with the formatting the way it is...

Anonymous,  May 22, 2013 at 1:37 PM    

Could you please help me to make /feeds/posts/summary url in my blog?

Greenlava May 22, 2013 at 4:33 PM    

@Jon Thorsen
Install it and give me the URL. I need to see it live.

Unknown May 22, 2013 at 11:09 PM    

It is... http://ReverseWineSnob.com
On the right sidebar near the bottom.

Greenlava May 24, 2013 at 2:26 AM    

@Jon Thorsen
There is a missing closing curly bracket for "#AdSense1" selector in your CSS, here:
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}#AdSense1{
text-align:center;
/* BloggerSentral Recent Posts Image Gallery CSS Start */
.bsrp-gallery {padding:10px; clear:both;}

Frank Cern May 24, 2013 at 2:37 AM    

Nice share on this one. Pinterest really is having an effect across the web. Just look at G+ and their new interface.

Unknown May 24, 2013 at 3:38 AM    

Ugh, yes, thank you Greenlava! That fixed it, much better now!!

Botão Doce May 28, 2013 at 7:40 PM    

I've tried to place the gallery on a static page, which is my homepage but the post titles are not overlaying for me too, they show up on the side.
The thumbnails also won't go next to each other, they show stacked on top of each other.
How can I fix this?

by the way, can you recommend a cool and simple slider for the same page?

Thanks
Botão Doce

Gina's Craft Corner June 3, 2013 at 10:43 PM    

Hi! Love all your tips. This is working pretty good for me, except there is some html script appearing at the top of my blog. Why is it showing up there?

Gina
http://www.ginascraftcorner.blogspot.com

Greenlava June 4, 2013 at 3:31 PM    

@Gina Wamsley
Where is it?

Thejas Kamath June 10, 2013 at 10:46 PM    

Thank you for sharing an amazing tutorial to set up gallery widget.

Mohammad Fazle Rabbi June 18, 2013 at 5:10 PM    

bro ur widget is awesome. I am impressed..thanks for sharing.

Miss Thomas June 22, 2013 at 9:46 AM    

That was so darn easy to understand thank you. I've currently got it in my footer widget but would love it to be centralised because at the moment it's to the left. How do I do this ??

Also I have a rich snippet and breadcrumb bit of data to put in my template but don;t have a clue where it should go ??

Please have a look at my site and give me some advice

http://www.enochandplonk.com

Thanks so much

Nicola x

Dumindu June 23, 2013 at 5:07 PM    

Thanks it works for me.
But how can I maximize the paragraph length hovering on the image.
Thanks Again.

Ahmed,  June 23, 2013 at 11:54 PM    

Nice one! Thanks for sharing this awesome tutorial. I already installed this on my blog and now want to show random post instead of recent post. Any help?

Kimmie June 26, 2013 at 3:59 AM    

I love this but I am confused on how to change max-results because I only want 5 to show up. Would highly appreciate it if you could please tell me.

Kimmie June 26, 2013 at 4:25 AM    

Please disregard my previous comment as I have figured it out. Can this be done to popular posts though? And thank you for helping those of us that can edit/add HTML but cannot build it. Much appreciated.

Pradeep Hegde June 27, 2013 at 2:31 PM    

Wonderful!
Thanks a LOT !

notesonindianhistory July 8, 2013 at 3:16 AM    
This comment has been removed by the author.
Unknown July 12, 2013 at 7:27 PM    

Thanks soooooo much for this! You don't even know how long it took me to find this! It's perfect!

culture July 23, 2013 at 1:36 PM    

Thanks soooooo much for this

Rachael (Rachos Nail Love) August 1, 2013 at 5:57 PM    

Just want to say thank you - your tutorials are absolutely fantastic and in the space of half an hour my blog has got exponentially better!

Rachael

Unknown August 2, 2013 at 11:27 PM    

Finally, something that I have been looking for!

Just customized by blog. Check http://orgolyo.blogspot.com/

Thanks!

Hi Me Libin August 9, 2013 at 2:23 PM    

error message

Error parsing XML, line 3575, column 52: The reference to entity "alt" must end with the ';' delimiter.

Carissa Posion August 27, 2013 at 2:41 PM    

wow..thanks so much your posts have been a great help for me today and I'm enjoying applying them to my blogger

much love..

Miss Thomas August 28, 2013 at 11:54 AM    

worked a treat. Is there anyway to select which image from the post is displayed in the gallery ?

Anonymous,  August 29, 2013 at 4:41 PM    

Great widget,but on my blog some titles of the posts which are shown in the gadget aren centered and the background isn't 100% wide: http://iamtimblog.blogspot.com

The Two Bite Club August 30, 2013 at 5:13 AM    

I have no problem getting the full feed to show, but I am having no luck with the labels feed. One of my labels is Appetizers. Should the code read:


script src="/feeds/posts/summary/-/Appetizers?max-results=200&alt=json-in-script&callback=bsrpGallery"

????????

Greenlava September 1, 2013 at 2:14 AM    

@Nicola Thomas
It defaults to the first image in the post. Can't change that :(

@iamtimblogger
I don't see any of the problems you mentioned. Have you fixed them?

@Becky
The code looks good.

Inderjeet Singh September 6, 2013 at 12:22 AM    

Very nice thanx for this i will try it on my blog in future

Top Scam Reviews September 7, 2013 at 9:39 AM    

Thank you for this

Laura September 10, 2013 at 3:20 AM    

I am echoing a comment from above that I did not see a response to "Could you please help me to make /feeds/posts/summary url in my blog?"
I have no clue how to actually format my address correctly. My feedburner url is: http://feeds.feedburner.com/therookiecook/wLnZ
I am trying to load this onto a test site but I can't get anything to show up.

Thanks so much!!

Laura September 10, 2013 at 3:32 AM    

Never mind, I figured it out - thanks! You are a genius!! I currently am using inlinkz for my photo gallery but it is super annoying to have to update all the time and I never remember to do it. I absolutely love this, thanks again!

Unknown September 19, 2013 at 3:47 PM    

............feeds/posts/summary?max-results=8&alt=json-in-script&callback=bsrpGallery...

Really great work but i need only one thing that I want to callback from particular array number to another, Means like 'maxresult=20'(condition) in callback function. I need callback code to show recent posts from Particular array number like this i=9 to i=15. So please let me know that it is possible to callback from particular array number to another.

Unknown September 24, 2013 at 3:56 PM    

Wow this is great! But how do you make it so that it shows older posts instead of the most recent posts?

Elena Litsova PHOTOGRAPHY October 7, 2013 at 6:37 PM    

I REALLY need help. I try to follow all the steps but on the Step#3 i don't know where to locate the script.
I'd like to replace the default image to my own picture from the recent post.
Here is my blog: http://elenalitsova.blogspot.co.uk

Thank you in advance
Elena

Greenlava October 8, 2013 at 9:49 PM    

@Elena Litsova PHOTOGRAPHY
I notice you host your images on Photobucket.
I'm sorry but this widget only works with images hosted on Picasaweb ie. images uploaded via Blogger post editor, Google+ or Picasaweb website.

Greenlava October 8, 2013 at 10:08 PM    

@Ram V
Use "start-index" query. If you want to get the 9th until the 15th posts, use this:
feeds/posts/summary?start-index=9&max-results=7&alt=json-in-script&callback=bsrpGallery
(max-result is set at 15-9 +1 which equals to 7)

Greenlava October 8, 2013 at 10:21 PM    

@Emme E
You can select older posts using the start-index method I described above.

Badri Tek November 15, 2013 at 8:38 PM    

Thanks Greenlava it was a great turorial.
Just wanted to know one thing. There is an option to either hide or display the post title but is there any workaround to show the title in a small window when hovering over the thumbnail ? Or maybe the title appearing when you hover over the image?

I am using the code and its working fine, however, with the title display: on, the image completely gets covered.

Thanks in advance

Unknown November 17, 2013 at 8:23 PM    

Error parsing XML, line 685, column 24: The content of elements must consist of well-formed character data or markup.
Showing this erroe on first code

Romeu November 17, 2013 at 10:09 PM    

Hi!
Thanks for this upload.
Is it possible to center the gallery? Like, have a two columns centered on the page...
Thanks in advance.
Romeu

Mel Ancheta November 22, 2013 at 4:36 PM    

how to put this widget in homepage only? because this widget shows also on page? what should I do?

Kashish November 25, 2013 at 5:28 AM    

It worked like a Charm on my Picutres blog --> http://www.images.christmasabbottblog.com
I had been searching to create a gallery homepage for it and finally my search ended.

Is there any way by which I can make this widget to choose posts (load posts) randomly everytime the page refreshes instead of the default ordered post sequence ?
THanks

Greenlava December 5, 2013 at 12:53 AM    

@Jerahmeel Barlaan
That is explained here: Display/hide widget on specific pages in Blogger

@Kashish Jain
Sorry but at this time the answer is no.

Financial Planner December 13, 2013 at 11:25 AM    

I've been looking for this for soo long. Thank you very much :)

Malaysia Tercinta December 13, 2013 at 11:28 AM    

Easy to install and light too. Thanks

Shameem December 25, 2013 at 3:00 PM    

Instead of using plugins we can use the code to reduce our loading speed which this code really great for displaying image gallery on my blog