Blogger Perfect Photo Thumbnail Gallery Tutorial

I am working on the image  navigation tutorial, but in the meantime, I have another photo thumbnail gallery tutorial for you  This one comes from Bloggersentral.  You can use this to create galleries on your pages for your recipes, projects, gardening, decor and more.  It uses your labels to pull up posts.

This does involve HTML editing.  For those of you that are uncomfortable editing your HTML, you can always  hire me. Here's an example of a Easter Page Gallery I created using this coding.
Remember you can have lots more links!

Easter Gallery - Thumbnail size - 160

• You have the option to change the thumbnail image size.  Your images will be sharp and not fuzzy.
• This image gallery is quick to load and loads the precise image.  No more slow loading time
• Posts are found using your label.  So, when you create a gallery, you want to make sure all of your posts in that category name, are labeled as such. Example: You want to create a gallery using the name, Projects,.  Go through and find your all of your projects posts and make sure they all have the label Projects,.  Add a comma by the label and click Done.

INSTALLATION:

1. Go to Template > Edit Template. Copy and paste the script below BEFORE </head> tag in your template.

TIP: To find the </head> tag, just hold down the CTRL and F key on your keyboard.  A search box will pop up.  Type </head> in the  box.

<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/AVvXsEjJL6jCGGw3IcTgpH13ozLyiMiSQaoO9IktcO6xF0lxILQ-EoWTpAJ_WDPYPcraSw77FKKbyF8P4RCi_muatJxNqSbGOCAgLCm98hrc6IVfDlU9AZWSvC8_DKXySphS_3weGQt45qkN21UV/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.  Now, add the  code below into the CSS section of your  Template, just before <b:skin>

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

3.   Next step is to copy and paste the code below into a page you have created for the gallery.
Make sure you copy and paste it in the HTML, and not the compose.

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

4.  Last step is to add the label of your choice to the code you just added to your page where the gallery will be. This means you are adding the post summary label.

Let's use my Projects page as an example.

Notice the /feeds/posts/summary/-/Projects?
After summary is where you will want to add your label.    /-/Projects

So if you create a page gallery for Recipes, you use /-/Recipes after summary.
Don't touch the rest of the code.  Just add your label to the page.
TO CUSTOMIZE GALLERY:

1. You can change the thumbnail size by changing the pixel size from 150 to whatever number you choose. For the Easter Gallery, I used 160.
2. If you choose to not have a title, then change true to false.
3. To set the number of thumbnails showing, change the number where it says max-results=8 to whatever you want.

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

Do this for any page gallery you may want to create. Whether it's Recipes, Projects, DIY, Decor.
Don't forget the labels on your posts! Here's the Projects example below: The thumbnail size is 180.

As I stated earlier, I design blogs and offer my services for Blogger Support.  If you find this too complicated and would like a gallery, you can contact me regarding my fees.

Life and Linda

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.