Tip: A grid of post thumbnails for index/listing pages

Our thumbnail and summary script was such a success that people have been asking us for further and further customization based off of it. The most frequent request has been the ability to set just a thumbnail image for the blog post and use it to create a grid of images.

Your wish, our command.

The script we've created can be seen as a fork of our original thumbnail script, combined with our interactive captions script.

The script grabs the first image of each of your blog posts, resizes (and converts to a square if you specify), and re-parses the structure so that the thumbnail image becomes a link to the post. To make this work we've included the LightBox disable script so that clicking on the thumbnails doesn't open up a Lightbox instead of the intended behavior of going to the blog post.

Clean version of the script is here.

To limit this functionality to only certain pages or types of pages, you'll want to learn about the different page types, and choose the one you want to use. For example, if you only want it to show on "index" page types you'll want to put the above script into an "if" statement such as:

<b:if cond="data:blog.pageType == &quot;index&quot;">

</b:if>

Comments

  1. Hello David

    I don't understand how you create a thumbnails, in the case the post contains only a YouTube Video

    I cannot found anything about youtube or Picasa in your script

    Thanks to help me

    --

    prac

    --

    ReplyDelete
    Replies
    1. Apologies, it does not create/modify YouTube thumbnail.

      Delete
  2. I can't seem to get the thumbnails to align properly. They'll appear side by side but one is higher than the other and then the same thing in the next row. The captions are also not lining up properly. Any ideas?

    ReplyDelete
    Replies
    1. Can you provide a link so I can see/debug the issue? Thank you!

      Delete
    2. Sorry I didn't reply sooner. Here's a screenshot of what's going on: http://s5.postimage.org/6pi2w8szb/screen.png

      All the images are on Picasa and are even already square. I tried adding the code you replied with to Cardinal, but that doesn't change anything for me.

      Delete
    3. Can you provide me with the URL of the code in use on your site?

      Delete
    4. http://brctestblog2.blogspot.com

      Delete
    5. Why are those posts not linked up? Are they not blog posts? Please show a demo with actual posts and true content?

      Delete
    6. Yes, those are actual posts and until I put the code in, the posts show up just fine and the links go to their post pages.

      Delete
    7. There are lots of CSS issues that are compounding to create that issue. For instance, remove:

      .post's padding-bottom of 1.5em and margins of .5em 0 1.5em.

      Then remove .post img's padding of 4px.

      The last problem is that it seems that you removed the default behavior of Blogger which is to wrap a href around any image that you insert. That link is being used by this script to create the link around the thumbnail, so by removing that default behavior it is breaking the script and not creating the link to the post. You can change the script around to create a new href instead of using an existing one, but that's why that part is not working.

      Just a note: these scripts are created to take advantage of the generic templates and generic behaviors. Advanced usage within your posts or templates will need to be taken into consideration when using any blanket after-market script.

      Delete
    8. I see, thank you. I'll play around with it. Thanks for helping!

      Delete
  3. Hi David! First of all thank for the yet another wonderful script that you made! :)

    Unfortunately mine is also displaying the same way as broken road creative.

    I am also witnessing some lag in running the script? My blog seems to load the script about 2 seconds before taking effect.

    You can check my link here:
    cardinalscene.blogspot.com, thanks again!

    ReplyDelete
    Replies
    1. Hi Cardinal, thank you for the bug report! To fix the issue, add this into the < style>< /style> section of the script I provided:

      .post-header, .post-footer {
      display: none;
      }

      Regarding the delay, that delay stems from the fact that this is an "after the fact" script, as opposed to a template redesign. The script has to run after *everything* else in your web page has loaded, so if you have a page with long posts and lots of images... that's the delay. The best way to shorten that delay is to use jump breaks in your post. Basically add a jump break into your post after about the first page, enough to get an image or two and a paragraph or two of text before the jump break. This makes it so that the browser has significantly less to load before the manipulation takes effect.

      Delete
    2. Some observations:

      - I am displaying 6 post per page, some of the pages on navigation display just 4 or 2
      - Widget titles disappear on every part of the blog.
      - non picasa hosted images lose post title
      - is there a way to customize the post title? like removing the underline?

      Delete
    3. Change the line where I say:
      h2, .post-footer {
      to
      .date-header, .post-footer {

      (that will fix the widget titles disappearing.

      I need to add a disclaimer that this really only works if your images are hosted in Picasa, or at least if your first image is hosted in Picasa.

      To customize the post titles edit the styling in here:

      a.postImage div {

      Add font-family, size, color, etc.

      Delete
    4. Hi david how can you add a css3 hover effect on the thumbnail images like this, is it possible? thanks! http://bavotasan.com/2011/a-simple-fade-with-css3/

      Delete
    5. See how in the < style>< /style> section of our script we have two classes, "a.postImage div" and "a.postImage:hover div"? That's the same as that linked script's .fade and .fade:hover. Simply add the styling that that site provides to those existing classes.

      Delete
    6. Hi david its me again,thanks for the awesome job,scripts and the great help :))
      just one quick question, if i remove the sidebar, can the post be expanded to 3 columns? thanks.

      Delete
    7. My pleasure (and please feel free to tip the help!)

      The thumbnails are forming a grid simply due to their same dimensions and a left float. So if you remove the right column, and the container for the thumbnails have enough room to support 3 columns, the thumbnails will automatically fill in a 3 column area. They just need the room, no extra code necessary.

      Delete
    8. Hello david, thanks for the heads-up, i got the 3 column working by hiding the sidebar. :)

      About the optimization on page load of the script, i added page break on the first 5 or 6 post on my home page, but still there's a lag, i guess i have to apply it with all the posts? or i have a lot of javascript running? i am really not sure. (Observation going on)

      I still have the observation that my homepage is displaying 9 posts, but when i click on the older post which is the 2nd page of all of my posts, it just display 6 posts, then again it displays 7 on the 3rd page then 8 on the 4th page which is a total of 30 post which is correct,

      But doesn't it have to display 9 post regardless of which page i am in?

      Delete
    9. Hi Cardinal, you've got a LOT of JS running, plus lots of other things. Audit the site loading times using Chrome or Firefox development tools. For the page breaks, yes, all posts. For the older/newer, that's entirely on Blogger's side, has nothing to do with the script. And no, it doesn't have to show 9, it just won't show more than 9.

      Delete
    10. Oh god, yes i forgot about that (auditing), thanks david, ill check it, i see you are also a big help on the blogger forums on support.google.com, God bless you friend. Subscribed on your google+, have a great day!

      Delete
  4. Hi David,

    I'm trying to have my "Looks" page be populated with the thumbnail grid of all my posts with the label "looks". I think your code would achieve this for me, but I'm not sure how to implement it. Can you advise?

    Thanks!
    (www.stylesmithsdc.com)

    ReplyDelete
  5. Hello David, i made some observations regarding vertical photos used as thumbnails, if the proportion is set to 0 in

    // set 1 for squared image or 0 for proportional,
    // highly recommend squared otherwise grid might not display properly
    // squared images only works for images hosted in Picasa
    var square = 0;

    Horizontal photos appear perfectly well. But vertical photos lose post title display, i am wondering if there is a limit on pixel dimension for height? Is there a way to constraint vertical photos? My particular problem is occuring in this page: http://www.cardinalscene.com/search?updated-max=2013-01-29T16:18:00%2B08:00&max-results=6&reverse-paginate=true&start=6&by-date=false, you can see grid 1,2 and 6 are verticals.

    - Second problem: I used custom theme for Mobile, the pageholder image is appearing in my mobile theme?, is there a way to disable the post summary script on mobile?

    Thank you for your patience!

    ReplyDelete
  6. Hi Cardinal, it's losing the post title because the div with the title is offset -pixels from the bottom. So if it's a vertical image, being cut off by the grid, that post title div is still way down there and now it's being cut off. That's why I recommended squaring...

    Regarding disabling for mobile, i believe you can do an if statement on the value of data:blog.isMobile; if true, it's mobile, if false, it's not.

    ReplyDelete
  7. Hi David,



    Thank you so much for this. I am trying to implement it on a blog but, I am having trouble getting the images to align horizontally - they are appearing in a stair step kind of alignment.



    The blog is: http://emeraldaffair-clddemo.blogspot.com/ and the specific page is http://emeraldaffair-clddemo.blogspot.com/search/label/Recipes. Any assistance would be appreciated.

    Thanks,
    Carrie

    ReplyDelete
  8. Hello David,
    I've got the script installed, but it is displaying in a step pattern and not along a straight line. I've changed the overall width of the page body to see if that would help, but it did not. Can you help identify where this issue is coming from?

    http://www.charadowrusticworks.com/search/label/designs

    Thank you so much for your help.

    ReplyDelete
  9. Hi Carrie, mind sending me your template? david@confluentforms.com

    ReplyDelete
  10. Hi Alene, mind sending me your template? david@confluentforms.com

    ReplyDelete
  11. just sent it. thanks for your help!

    ReplyDelete
  12. Hi david and goodmorning! this seems to be a great new enhancement for the script: http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout

    ReplyDelete
  13. Hello David,

    did you get the email? just wanted to make sure. let me know if i can help you help me aha

    Thanks again.

    Alene

    ReplyDelete
  14. Erin- Table for 7June 5, 2013 at 7:29 PM

    Hi David-

    I am confused how to implement this on just one static page.

    Do I use below and how do I specify which page? Thank you!



    ReplyDelete
  15. Hi Erin, this page will teach you all about it : http://www.blogxpertise.com/2012/11/blogger-blogspot-page-types.html


    :) -David

    ReplyDelete
  16. Erin- Table for 7June 6, 2013 at 1:37 PM

    Thank you!!

    ReplyDelete
  17. Hi, do we only need to install this by adding a new gadget? or adding to the main HTML? Thanks

    ReplyDelete
  18. Just discovered your post after doing quite a bit of googling. This is EXACTLY what I was looking for and such an elegant example of how Blogger can be customized!

    I implemented the code successfully to show on just my label pages. Looks great!

    The only thing that I wish was different is this: I wish that I could disable the interactive captions functionality and just have the title in small text below the pic. I'm working on customizing the code so that I can do that but it's a lot of trial and error. However, I am very, very grateful that you shared this code! Thank you so much!

    ReplyDelete
  19. Katherine PummillJuly 8, 2013 at 4:52 PM

    Super easy and works great on my "labels" page. I implemented the code there and now when you click on any of my categories, everything is displayed in grid with hovers rather than a long post! Here is my site if you want to see a demo - http://www.thefitgirlskitchen.com/search/label/recipes

    Thank you so much!!

    ReplyDelete
  20. This is just what I was looking for! I applied it to my labels pages so that readers won't need to scroll through all the posts at once. Thank you for sharing :)

    ReplyDelete
  21. I am trying to do just what you did and apply to my "labels" page. Did you use the if statement above to do it? I can't seem to get it to work!

    ReplyDelete
  22. You can certainly do it, the problem is that if you have long titles or titles of different length it breaks up the grid format, hence why we went with this approach instead.

    ReplyDelete
  23. If you're trying to have it to a specific label, use:




    If to all labels, use:




    If all pages that show multiple posts, use:

    ReplyDelete
  24. Jonathan Cao-NguyenAugust 11, 2013 at 3:30 PM

    Hello! I was hoping to install this to my search labels as well! I'm having trouble with the code because it isn't working the way it suppose to. When I click on the labels, I could tell that the code is working because of the interactive captions script, but its not making everything into a grid. I would love some help!

    Thank you!
    -Jonathan

    ReplyDelete
  25. Sometimes template-specific objects make the grid not work. You'll need to go through the DOM to identify which objects are causing the break and use CSS to hide them.

    ReplyDelete
  26. Jonathan Cao-NguyenAugust 15, 2013 at 2:23 PM

    Ok, I'll try it out. Thank you!

    ReplyDelete
  27. This looks like the style I've been looking for!!! I love it! But do you have instillation instructions for "dummies", because I have no clue how to install this to my blog.

    ReplyDelete
  28. I love this! I added it to my blog but it did the main blog, not the individual "label" page that I wanted. I included the <b:if code with the full code, but maybe I put it in the wrong spot because it affected my main posts. Where am I supposed to insert the <b:if code to get it only for the label pages?

    ReplyDelete
  29. This link tells you where to implement it: http://www.blogxpertise.com/2012/07/tip-better-thumbnail-and-summary-script.html

    ReplyDelete

Post a Comment