Blogger Perfect Photo Thumbnail Gallery Tutorial | Life and Linda

Subscribe to receive updated tablescapes, designs and more Click Here!

X

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.


    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.

    19 comments:

    1. Does a gallery page take a long time to load...say if you have 40 or 50 thumbnail pics for a catagory. sheila

      ReplyDelete
    2. Good Morning Linda!

      Please put me on your calendar! It is time for a blog update for Jemma:)
      xo

      ReplyDelete
    3. I think I might need some help with my blog Linda! I have a lot to learn from you :-)

      ReplyDelete
      Replies
      1. I am available. I always try to write tutorials to help people with their blogs. If they cannot update, then they use my services. A BlogFairy

        Delete
      2. Actually my other site is My Fairy Blog Mother.com

        Delete
    4. Thanks for the tutorial, Linda, and you make it seem so easy but it's still above my thinking process. Thanks for designing my blog and giving me so much help!

      ReplyDelete
      Replies
      1. I try to make it easy Gail. You are so welcome. I am thrilled you love your new blog design. We all are talented in different ways.

        Delete
    5. I think it would give me brain drain! Where are the galleries located? I love the idea. I need some updating too!

      ReplyDelete
      Replies
      1. Jackie, since you have so many, this would be perfect for you. A tablescape gallery would be on the tablescape page. Then a gallery for your crafts, cookies...endless possibilities.

        Delete
    6. Hello dearest LInda! YOU are so good with this tech stuff. I am always a few steps behind the newest thing, but it sure is fun. You do a great job and I see Jemma is in line! Thank you so much for visiting my post! I am having fun with photography, that's for sure! Anita

      ReplyDelete
    7. Thank God I have you to do these things!!! Do you think I could use this gallery thing? I am kinda confused; do you mean you create a gallery for each post?

      ReplyDelete
    8. You create a gallery for categories. A gallery for your Tablescapes. Anything category you have. it uses your labels.

      ReplyDelete
    9. I am going to have to go back to this and absorb it all and try it when I have the time to sit down. Thanks for the tutorial, Linda!....Christine

      ReplyDelete
    10. nich ikutseo punya Tutorial Auto Link Dengan Smart Link Blogspot, semoga bermanfaat. jangan lupa berkunjung yaa ^_^

      ReplyDelete
    11. I tried to do this to make a gallery to showcase my artwork. I am not sure I am doing this correctly. I am making each image into its own post and labeling it for the page I want the gallery to be in. I am pretty decent at understanding this coding stuff, but maybe I am missing something. I need help!

      http://sweetsurrenderink757.blogspot.com/p/home.html

      ReplyDelete
    12. I just figured it out! I needed to put the "pages" website address in the main menu pages website to link it! Thank you for this tutorial! It has helped achieve what I have been trying to do for days!!!!

      ReplyDelete
    13. i am suuplier wicker rattan from indonesia. do you want to buy wicker rattan? may visitid www.rotanindo.com

      ReplyDelete
    14. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing photo clipping path services

      ReplyDelete

    I so appreciate your visits and sharing your thoughts at Life and Linda.

    Please note that I use Google Adsense, Shareasale, Rakuten and Amazon affiliate links on this site. This means using them for purchases won’t cost you extra but may earn me a small commission. Our full disclosure is available for viewing under About in the disclosure policy.
    All rights reserved. Our graphics, images and text are all subject to copyright protection.

    Instagram