First post variation on the thumbnail and summary script

It seems as though we're getting a bit carried away with our thumbnail and summary script... we've created another one for you! This one is also by request; the desire to have the first post on an index page behave differently that the other posts on the page which are in the standard thumbnail and summary (with the small thumbnail).

What we've done in this version of the script is add two variables: firstBig and newspaper. firstBig is either a true or false value, and if set, will make the first post's image full column width instead of a small thumbnail. newspaper is an additional setting telling the script to place the post's title/link after the image instead of the default behavior of before the thumbnail and summary.

Warning! Obviously this script really needs an image in order to look good and/or work. If you don't plan on having a photo in every post, this probably is not the script for you! It also requires that the first image in your post be hosted in Picasa, Blogger's default image hosting solution.

Clean version is available here.

A sampling:


You can view this code in action here.

Comments

  1. What a fabulous code snippet! It's wonderful that you're sharing these wonderful blogger coding tips with us. I *must* check out the Blogger Xpertise Google Hangout if you're having one tonight - it's Friday!

    ReplyDelete
  2. Hi David,
    Thanks for this code. I have a question. Is it possible to apply the Thumbnail/Summary script only to subsequent posts and leave the first post "as is" (the default Blogger view which shows the image at the size I choose with all of the text)?
    Thanks!

    ReplyDelete
    Replies
    1. Of course!

      Look at lines 39 and 49:

      $('.post-body').each(function(n, wrapper){

      if ((n == "0") && firstBig){

      We can look for the value of "n" which is getting +1'd each time the script proceeds through the DOM. So in this case we're acting on n==0 (the first .post-body instance), but we could just as easily do n != 0 at which point it would act on all .post-body instances EXCEPT for the first instance.

      Delete
    2. OK, I did this:

      if ((n != "0") && firstBig){

      but the subsequent posts don't have the thumbnail picture anymore. They do have a truncated post (first few lines and "read more" (see www.sylvialiuland.com)

      Any thoughts?

      Delete
  3. I've copied & pasted the code exactly & still, when I hit "preview" in the template editor, I see no images at all :( Any idea about what I could be doing wrong? I tried the original coding you had as well, and still no images.

    ReplyDelete
  4. Great tool David! I appreciate your help, keep up the good work.

    Thanks,
    John

    ReplyDelete
  5. Hi!

    This code is great! Thanks so much!!

    I just have a couple questions though and am wondering if you can help me modify the code just a bit more. :)

    I often use portrait images as my first image in my blog post, with this code it makes the image ENORMOUS! Is there anyway to set a height restriction on how these photos show up? Even when the photo is landscape, I'd like it all to be a little smaller then the

    Also, I am wondering if it is possible to make the "read more" link a different color and/or bold.

    In addition, is it possible to change the code so that by clicking on the thumbnail image, it will also take you to the full blog post on all photos (thumbnails and on the first special large image)?

    The first blog post title, if the newspaper title is set to false, doesn't seem to link to the blog post, it is possible to make that happen?

    One more thing, it is possible to create a simple frame around each of the blog post areas? In other words, the first blog post would be enclosed in a 1px blog frame, the second would be in a different box etc.

    Thanks SOOO much!

    Ashley
    www.simplydesigning.net
    simplydesigning (at) gmail (dot) com

    ReplyDelete
  6. Hi!

    Sorry. One more thing (well two really). In my previous comment I said that the title link above the first special post wasn't linking, but it is :) Wahoo!

    But, when I open my blog, it first shows as previous (where each blog post is in full) and then it updates to the new layout. Ack. I've cleared my cache so I don't think it is just my computer...is there a way to fix this because it also slows down my load time...I was hoping it would speed it up if anything. Thanks!

    Ashley
    www.simplydesigning.net

    ReplyDelete
  7. Is it possible to enable this so that when I hit the "older posts" button from my main blog page, you would continue to see the thumbnail and snippets with "read more"? It kind of stinks going back to every post in its entirety when you hit the "older post" button.

    Also, I would love to be able to do this so that if I were to hit my tag button for "valentines day" for example, instead of seeing all the blog posts in their entirety, they could be snippets and thumbnails as well.

    Maybe this is asking too much :) Let me know if it is possible!

    Thanks!
    Ashley
    www.simplydesigning.net

    ReplyDelete
  8. First of all, great tool!!

    I have two issue's.

    1. Is it possible that the thumbnail from post are linked to the post itself?
    2. With the 'read more' is default linked to http://www.dennisbuijs.com/undefined, how can i get this to the post itself?

    Gr,
    Dennis

    ReplyDelete
    Replies
    1. Hi Dennis,

      The problem that you're having is because you changed the default template behavior; in all standard templates the post title is a h3 element with the class of 'post-title' and you've changed it to a h2 element with a class of 'art-postheader'.

      You're going to need to change line 42 to be:
      var title = wrapper.parent().find('h2');

      Line 68 to be:
      var link = wrapper.parent().find('h2 a').attr('href');

      And line 104 to be:
      var link = wrapper.parent().find('h2 a').attr('href');

      Delete
  9. Hi,

    Thnx for the reply!

    I only edited line 68 and 104 and that worked out just perfectly (see at www.dennisbuijs.com).

    The only thing left is for the thumbnail to be linked to the post it self. How can i make that happen?

    Gr,
    Dennis

    ReplyDelete
    Replies
    1. What i have done now is use the script on the homepage as it is now and use the script for the labelpage without the first post being big.

      Is there a way for the next and prev page (on the homepage) to be view like the labelpage?

      Delete
  10. Strange... I seem to have forgotten to put that code in there for linking the images! I'll add that functionality and post an update this weekend!

    ReplyDelete
  11. Hi Dennis, I've fixed the script, and have updated the post with a link to the new version. -David

    ReplyDelete
  12. Hi,

    First off, thanks for the code. it is really helpful.:)

    I use this on my blog and I'm seeing some issues. The additional info on the page is not showing, like Posted date, comments count, recommend on and posted by. I tried the original code (not newspaper) and its working fine.

    Also, the page is only showing four topics at a time. Is there a way to control this?

    My blog is bachwitz.blogspot.com

    cheers,

    Naldy

    ReplyDelete
  13. Hi Naldy, do you see the style information that I have at the bottom of the script? That style information is hiding the date header and other information that you like. Just remove it and all that stuff will come back.


    The # of posts being shown is controlled by your Blogger settings... not by the script.

    ReplyDelete
  14. Thanks much for your reply.

    I change it to 'display=none' to 'display=all' and its working perfectly! Yey!

    Actually, forget to tell you yesterday that it the number of max posts in the blog setting is ten, not sure why its showing only four... sometimes only three. If you would click on older posts notice that it will show "max-results=10".



    Cheers
    Naldy

    ReplyDelete
  15. Just to add, is the thumbnails supposed to work as a link to the post? Mine is not working that way. Thanks

    ReplyDelete
  16. Erin- Table for 7May 2, 2013 at 10:31 AM

    Hello- I love this option, but, my first post is not showing any picture at all :( Just the title and snippet of post. The following posts on the page show the thumbnail pic and summary. Plse help! Thank you!!

    ReplyDelete
  17. Hi Erin, what's the URL of your blog?

    ReplyDelete
  18. I don't see this code running in your site...

    ReplyDelete
  19. Erin- Table for 7May 2, 2013 at 4:12 PM

    It showed up on the preview that way..I was afraid to save it with fear of not being able to change back :)

    ReplyDelete
  20. Erin- Table for 7May 3, 2013 at 1:32 PM

    Would a screenshot of my preview be helpful?

    ReplyDelete
  21. please email me directly at david@confluentforms.com

    ReplyDelete
  22. I have been fine tuning my blogger theme and usage for a wile now and this is the result: www.dennisbuijs.com.

    But i have two questions left:

    - Is there a way to make the pic for the first post a little smaller?
    - I am using 'jump break' in my posts now, but as a result i get a extra "read more" icon, is there a way to remove this on the pages i use you're script?

    Greetings,
    Dennis

    ReplyDelete
  23. Is it possible to set a maximum Width for the image of the first post?

    ReplyDelete
  24. Just what I was looking for, thank you!

    ReplyDelete
  25. Hi David - I love the code, its saving me a LOT of time in upgrading my blog (www.enduringepilepsy.com) But I'm having the Newspaper image appear on every page as I scroll through older posts. Is there a way to make it that the Newspaper image is ONLY on the Home page? Thanks :-)

    ReplyDelete
  26. Hi again David,

    I had been tinkering with my blog for quite a while and I really can't make it show more than 3 post on the main page. Can you please help? I have making the # of post higher but no luck.

    https://lh4.googleusercontent.com/-cL2RzfyeK7M/UgWd6pnAKkI/AAAAAAAAB74/S0Vr6Txq-gw/w527-h595-no/blogger.jpg



    Cheers,
    Naldy

    ReplyDelete
  27. This is a great work, But I have one issue. The loading time is doubled and i see that the summary and thumbnail loads after the classic template loaded. How to fix this problem? Is there any shortcut so that the computer just have to load only the final look?

    ReplyDelete

Post a Comment