Tip: A better automatic thumbnail and summary script for Blogger

When we first started creating custom websites using Blogger, one of the first real script needs that we ran up against was the need for an automatic thumbnail and read more function, one where you could set the size of the thumbnails and the word count of the summary. This was before Blogger added jump breaks, but also allowed you to slip a thumbnail in there even if the image was later in the post.


It did the job, was sort of customizable, but it had a bunch of things in it that just didn't work out well, namely:
  • all of the thumbnails had to be the same size, even if they had different orientations
  • for long pages it seemed to crash, leaving the page half-rendered
  • lots of people had trouble installing it because it required that you delve into widget code

So we have created our own.

Our script uses JQuery and contains a number of customization options:
  • you can set the max-width that you want the thumbnail to be
  • set whether you want the image squared or proportional when resized (squared requires Picasa)
  • determine orientation for a left or right float
  • set the word count of the summary
  • can even set the word count to 0 to just have the first image as the contents

You can download a clean version of the code here.

The code:

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function() {
// change the dimension variable below to be the max pixel width you want the thumbnails to be
var dimension = 90;

// set this to be the word count of the lead-in
var words = 80;

// set this to be left, right, none or inherit
var orientation = "left"; 

// set 1 for squared image or 0 for proportional,
// squared images only works for images hosted in Picasa
var square = 1;

// continuation of the introduction paragraph
var addon = "...";

// optional read more link, leave empty if you don't want it
var readmore = "read more";

// image margins such as 1em or 5px
var margin = "1em";

$('.post-body').each(function(n, wrapper){
var newContents = "";
var wrapper = $(wrapper);
var image = $(wrapper).find('img').first();

var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
if (words > 0) textContents += addon;
wrapper.empty();

if (image.attr('src')) {
var imageOriginalHeight = image.height();
var imageOriginalWidth = image.width();
var imageParent = $(image).parent();
wrapper.append(imageParent).append(textContents);
if (square) {
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension + '-c')});
image.attr('width',dimension).attr('height',dimension);
} else {
image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension)});
image.attr('width',dimension);
var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
image.attr('height',newHeight);
}
imageParent.css('clear','none').css('float',orientation);

switch (orientation) {
case "left":
imageParent.css('margin-left',0).css('margin-right',margin);
break;
case "right":
imageParent.css('margin-left',margin).css('margin-right',0);
break;
default:
imageParent.css('margin-left',margin).css('margin-right',margin);
break;
}
} else wrapper.append(textContents);
if (readmore) {
var link = wrapper.parent().find('h3 a').attr('href');
wrapper.append('<br /><a href="' + link + '">' + readmore + '</a>');
}

wrapper.append('<hr>');
$('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
});

});
//]]></script>

Place the above script into your template before the </head> tag.  If you run into any trouble, or have any suggestions for making it even better, please leave messages in the comment form below! You can see a demo 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 == "index"'>


</b:if>

Note: for videos, this will only properly resize the video if it is a YouTube video (which provides a thumbnail via Picasa's structure).

Update: 
We've generated a version that will now change the link of your thumbnail into a link to the post itself; this is good if you don't want summary text, but want a thumbnail link to the posts. Here is the clean version that includes the Lightbox kill script. Use this in conjunction with CSS to create a grid of image links.

Update: 08.30.2012
The code has been updated to allow for cases of no images in a post and still function properly.

Update: 10.08.2012
The code has been updated to fix the bug where no summary was showing if no image in the post.

Update: 11.01.2012
We've created additional variations on this script!



Comments

  1. Hello,
    is it possible to get thumbnail of videos at posts?
    Second questions; is there a working demo link?
    last question; does this work for only index page or for other pages like label, seaech and archieve pages?
    Thanks for your sharing.
    Regards

    ReplyDelete
    Replies
    1. Hello!

      Question #1: yes, it will resize the thumbnail image that is included if you add a YouTube image into your post.

      Question #2: no, I didn't set one up, mainly because most of this script is a variation on lots of other scripts already posted in this site

      Question #3: as written it will run on ALL pages in your blog, however, you can easily place this script within an if tag based on the page type (instructions here) so make it for the home page, index pages, search pages, etc.

      Delete
    2. Hi David,
      thanks for your fast response.
      I add a video at post like;
      <iframe src="http://player.vimeo.com/video/.......></iframe>

      But it doesn't work.

      Secondly,I want to use this script at only some pages. For This, I will use some if tags as you give above post, but could you please explain how can I call the script inside if tags?
      Regards

      Delete
    3. Unfortunately it will not process a vimeo thumbnail as it's not provided in the format necessary.

      To only show on "index" page types, you'd put the script inside:

      < b:if cond='data:blog.pageType == "index"'>

      < /b:if>

      Delete
    4. Unfortunately, it doesn't work properly.
      In my blog, I have several jquery applications like, colorbox, slidedeck, menu..
      I think your script conflicts with them.
      Is there any code to put beginning of your script for noconflict?
      Secondly, what is the minimum version of jquery which your script works with?
      regards

      Delete
    5. It should work just fine w/ the version of JQuery you're running. And yes, you have a TON of scripts all running, it's not surprising that you're likely to have namespace conflicts!

      Delete
  2. Great Work Bro.
    I will try it in my blog. Thanks for sharing

    ReplyDelete
  3. Is there a site that shows an example of this being used? I am curious how it will look on my blog, www.raymondduke.com

    ReplyDelete
  4. One issue I have with this is that it moves the image caption to the post preview...

    ReplyDelete
    Replies
    1. Thought that'd be a good thing! Was under the assumption that people would want to keep the image's wrapper (in your case the caption table) with the image as opposed to simply pulling the image out of context. So you'd prefer it just be the image, with no wrapper?

      Delete
    2. Well, in my case I use the caption of the image to add a short description and to give attribution to the image source. I would prefer the thumbnail to still show the caption. But, I wouldn't worry about it. This is a cool idea but doesn't necessarily fit the format and style for my blog. Thank you for the reply though!

      Delete
  5. I added it to my blog but for some reason it doesn't seem to be working right. The front page looks great but when you click through to the full post it still gives a truncated post.

    www.treegoldandbeegold.com

    ReplyDelete
    Replies
    1. My apologies, I skipped a final step in the instructions (which I have now added!).

      Please read the 2nd to last paragraph that starts "To limit this functionality to only certain pages or types of pages..." and it will explain it to you!

      Delete
  6. What I would really like is a way for my homepage to be generated using the thumbnail image, resized to a size I want, and the first few lines of my post, to a length I specify, without having to load the data:post.body content on the index page. I had hoped to do this using the itemsnippet and thumbnailUrl tags, but the former doesn't return quite enough text for my home page description.

    The reason being, I use fairly large images on my site, and if I have six posts, even though the images are resized in script, they are still loaded in the users browser, which takes up quite a bit of load time. Any thoughts as to how I might do this appreciated. You can see my site at http://www.findingtheuniverse.com

    ReplyDelete
    Replies
    1. Hi Laurence, if you place the script written above into your site as it currently exists it would resize the returned thumbnails and size-down the itemsnippets. It would never load the full post.body and all the images. Your snippet would essentially be the "max size" for the script above. The only change that you'd need to make would be to the regex lines for the image resizing such as:

      image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});

      In this case it'd be necessary to remove ?imagemax=450 from the image URL, and since the /sVALUE/ isn't in that URL, the regex would need to change to instead look for the last / and insert the replacement code.

      Or, you can use the jump breaks as you currently are, but instead of doing the images the way you currently are, get a generic thumbnail and let the above script resize it accordingly.

      Delete
  7. Nice work! I used this to only function on labels, but I was wondering if there's a way to adjust the post-body size to display each post as a thumbnail (only on labels/search pages)? Sort of like Wordpress' category section. Ex: http://thedesignfiles.net/category/retail/

    I'm unfamiliar with jquery/blogger's conditional tags and I've been looking for something like this for a while now. TIA!

    ReplyDelete
    Replies
    1. I think I've created what you're looking for, however, it will still need some CSS work on your part to configure it for your individual blog.

      http://pastie.org/4493406

      Enable the imagelink variable, then remove the summary content, and that will give you the title (as link) and thumbnail (as link). You'll then need to use CSS to set a .post-outer fixed height/width, float them (or inline-block), and you'll have your grid!

      Delete
  8. Hi David,
    First of all, Thanks for your so good sharing.
    I want to use it, with thumbnail and post title only. But, what I need is, title, and date have to right of thumbnail.
    I applied your code at my test page :http://karikaturevi-test.blogspot.com/search/label/Ziyaret%C3%A7iler
    As you see, date and post title are above of image.


    What I need is like; http://karikaturevi-test.blogspot.com/p/yurtici-etkinlikler.html

    At the other hand; could you advise; how can I hide "labels" at only search/label page?

    Many thanks at advance for your cooperation.
    Regards

    ReplyDelete
    Replies
    1. Hello, unfortunately what you're asking for requires quite a bit more work re-arranging the DOM of the page, mainly because the Title is outside the .post-body div where the image is located, and date is even further outside that part of the DOM.

      If you're looking to create a list like you are, but not on a label page but instead a static page, you can use your XML feed to generate the page list in whatever display you'd like. For example, look at the News & Events section of Pinch Gallery's homepage.

      Delete
  9. Thank you for your fast reply.

    I use it static page with script using feeds as you can you see my sample given above post.
    Your study was very useful for two reason; one is reducing static page usage and second is below problem.

    Scripts using feeds, there is a problem. Because, script define number of post as variable. After each new post at specific label, I have to update number of post variable.
    Script can not stop at max number of labelled post if numpost greater than existing posts.

    If you have any suggestion for this problem, so appreciated.
    Regards

    ReplyDelete
  10. Hi David,
    I try to use your study as grid. but, I have some troubles;
    firstly, I put display:inline-block; , but it float posts that have the same dates only,
    secondly, I disabe to show labels, but it still show labels.
    thirdly, is it possible to show titles below thumbnails.

    You can see what I said at my test page;
    http://karikaturevi-test.blogspot.com/search/label/Ziyaret%C3%A7iler

    Thanks at advance for your cooperation.
    Regards

    ReplyDelete
    Replies
    1. Hello Atilaozer, that is how the DOM works within your template; each post is currently grouped within a date div, hence why they are only displaying as a grid by date. Changing them to a complete grid on that page would necessitate changing your entire template structure by removing the date-outer grouping. I don't see in your CSS where you disabled labels... you might want to check on that again. Yes, it is possible to show titles below thumbnails, but that is not part of this script. This script is only designed to manipulate the post-body; the post title is outside the post-body. You'd want to change the entire script to prepend the wrapper to wrapper.parent().find('h3 a') which could be an interesting variant to this script, but is not this script at this time.

      Delete
    2. Hi David,
      Thanks for your cooperation.
      In this situation, it is difficult to changing template for me. Later, I can work on it.
      About disable labels, I unchecked labels at blog post box at desgin page of blogger. But, it didn't it. I think that is also from template tweaks .

      Thanks again
      Regards

      Delete
  11. Hi David,
    This great is great!. But I have problem if any post with no image in homepage. The summary is not working well. Its become full post.

    ReplyDelete
    Replies
    1. Hi Ali, thank you for the bug report; I've updated the code to still function properly if a post does not contain an image.

      Delete
  12. Hi David,
    Thank you for your fast respons. Why the post summary (with no image) is going to hide too?

    ReplyDelete
  13. Hello David.
    I have installed the code. On a post that has an image it works fine. There is a post with no images, but a YouTube video and all it has is the jump link with no summary. If you could shed some light I would greatly appreciate it.
    Thanks!

    ReplyDelete
    Replies
    1. Do you have the code set to show a summary for posts, and is it simply not showing a summary for the YouTube posts? If you're not doing a summary text and there is no image, what should the thumbnail show? Can you perhaps link me to the site in question?

      Delete
    2. Hey David. I actually found a different code that worked. But thank you for your response, sorry I didn't get back sooner!

      Delete
    3. Hey Amazon! Could you please tell the code that you used so that the youtube video posts will provide thumbnails? Thanks in advance!

      Delete
    4. From an embeded YouTube video you can parse out the ID of that video, and from that ID you can generate a thumbnail to be used.

      For example:
      This video http://www.youtube.com/watch?v=_hFSlHjmB68&feature=player_embedded

      The id is _hFSlHjmB68

      And the thumbnail would be http://img.youtube.com/vi/_hFSlHjmB68/hqdefault.jpg

      Using javascript you can extract the value between the = and the & to get the ID and then write in a thumbnail.

      Delete
  14. Hi David,

    Thank you very much indeed for sharing this wonderful script with us. I have been looking for ages for something similar. I made some changes; for example, I removed the
    tag before the "read more" link. Simply because I like to have that link inline with the summary. You can see the result at my blog: http://anneishimaginaryadventures.blogspot.com. Thanks and have a nice day!

    ReplyDelete
    Replies
    1. Nicely done and a gorgeous blog, thanks for sharing!

      Delete
  15. Hey David,

    Just wanted to say thanks for the great script. I was having the sames issues that you were having with the previously posted script that has been floating around the inter-webby-tubes. This one was amazingly clean and straight forward. I was also able to adjust it to a grid layout fairly easy. So long story long, I really appreciate it. My site (jojosstuff.com) is still currently being put together. Once it's in full swing, I'll be listing your site in a thank you post describing the sites that I found helpful as I was setting up my blog. Thanks again. ~ Josie

    ReplyDelete
  16. Hi, I just tried this script and when I click on read more, my post doesn't expand, but it does take me to the post page. Is there a way to fix this?

    ReplyDelete
    Replies
    1. Hi Kathryn, I'm sorry, I'm a bit confused. The summary/thumbnail script is meant to shorten your posts on the index pages (such as Home), and then to read the full post it takes you to the post's page. It's not meant to expand and show you the rest of the post in-page as I believe you're describing?

      Delete
  17. It does create the thumbnail and summary on the index page which I really love. And, when I click on read more, it does take me to the full post, but my full post isn't there. It's cut off at the summary. Please see blog.graspinggreatgadgets.com I copied and pasted your code exactly and have not made any changes.

    ReplyDelete
    Replies
    1. Hi Kathryn, I think you skipped the last step...

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

      (the 3 paragraphs after the code in our post)

      Delete
  18. David,

    Thanks for all of your help! I was able to get the code up and running and I love that the pictures aren't distorted in any of the thumbnails.

    ReplyDelete
  19. Hey David,
    Great plugin, and thanks for the support. I like the fact that you only have to paste this in the Head and you're done. I don't have to go through the code to do any more edits.

    One question though. I seem be having an issue with posts that don't have images. It just doesn't work well. For now I'm going to add images because I need to do a demo, but I'm going to let you know later when I'm done with the dome so that I can show you the issue.

    I'm using the script here > http://pastie.org/4493406. The thing is, it works well until it encounters a post with no image. For that first blog, it summarizes just well, but doesn't add a "Read More" link. And for the remaining ones it just shows the full posts.

    my test blog is najaribublogs.blogspot.com

    ReplyDelete
    Replies
    1. My apologies, I updated the code in the post, but not the pastie. Give this code a try: http://pastie.org/4797657

      You'll see in it (line 42) that we're checking to see if there is an image source.

      -David

      Delete
  20. Hello David

    Thanks great plugin
    but it have a bug see this http://nptechs.blogspot.com
    no text is appearing for the post without images

    Hope you fix it soon

    ReplyDelete
    Replies
    1. Hi Rajeeb, fixed the bug.

      Change:

      }
      if (readmore) {

      to:

      } else wrapper.append(textContents);
      if (readmore) {

      -David

      Delete
    2. Its not working.

      plus if the post has no image, it will break the post summary on the underlying post on that particular page.Thanks for the script!
      kindly please check:

      http://cardinalscene.blogspot.com/search?updated-max=2012-01-03T23:39:00%2B08:00&max-results=4&start=16&by-date=false

      Delete
    3. Hi Cardinal, it looks like you're using an old version of the script? Please check the links above and replace the script with the newer version.

      Delete
    4. Hi David, i am using your lightroom kill script. That is where the bug is occuring. Isn't that updated? thanks again! :)

      Delete
    5. I don't see an error, but I also don't see the kill script in your code...?

      Delete
    6. oh sorry, i temporarily used the script without the lightbox kill.

      you can see the effect now. Its particularly affecting here:

      http://cardinalscene.blogspot.com/search?updated-max=2012-01-03T23%3A39%3A00%2B08%3A00&max-results=4#PageNo=6

      Delete
    7. Hi Cardinal, you're still using the old code. You're missing the whole if statement that looks like so:

      if (image.attr('src')) {

      This is testing to make sure there is an image, and if so, perform the image replacement. That's why your script is failing on that one post.

      Delete
    8. Thank you David, i just used your pastie from the last two comments. I am using your codes from the main post. :) highly appreciated the hardwork. More power!

      Delete
  21. Will this auto readmore work in internet explorer

    ReplyDelete
    Replies
    1. Yes, should work in all javascript-enabled browsers.

      Delete
  22. Hi David,

    Fist of all, thanks for your great script!

    I tested your clean script version, that will change the link of the thumbnail into a link to the post itself ... but it seems not to work - just as the 'read more' link get a 'undefine' URL.

    Any idea, what could be broken?

    Greetings Oliver

    ReplyDelete
    Replies
    1. Hi Oliver, the script is crashing because you didn't give those blog posts post titles. Without a post title, it can't reference the h3 element, and without the h3 element, it can't get the h3 a element where the "read more" is grabbing the URL from. :)

      Delete
    2. Hi David,

      thanks for fast response ... oops and you are right, the problem are my missing post-titles. Now, script is working like charm :).

      Delete
  23. Hi David, this is great, thanks for posting the code.

    Is there any way to have the most recent post show with the image in its actual size, and then the rest of the recent posts show below in their thumbnail sizes? For impact on my blog, it's always great to have the first image in its actual size.

    Thanks for your help!

    Mark

    ReplyDelete
    Replies
    1. Hi Mark, sure, that's definitely possible. It won't be until a bit later this week if you can wait...

      Delete
    2. Hi David, any update on this? Thanks again for your help!

      Delete
    3. Hello David, Mark's advice is kinda cool, i am a reader of http://blog.chasejarvis.com/blog/

      The layout seems great and i think it compliments Mark's suggestion? 2 column post is also nice.
      Have a great All Hallow's Eve!

      Delete
    4. So I've made a version that makes the first post's "thumbnail" a full size image; in fact it makes the image resize to be full column, then has the summary text below the image. Does that work for you all?

      Delete
    5. Thanks David! Can't wait to give it a try. Have you posted the code?

      Delete
    6. Something like this? http://www.thephotoargus.com/

      Delete
    7. Hi Guys, just in case you haven't seen the new code you can grab it here and here.

      Delete
  24. Hi Cardinal, that setup looks good. Was it easy to do?

    ReplyDelete
  25. Thank you so much - I love this code! Not being an html person, I had to really work to figure out where to put the "if homepage..." code. But I figured it out. Now I'm having some issues with formatting. I'm a photographer so it's image heavy. I want a larger thumbnail and some text, but if I don't have enough text then the headings get bumped up and the formatting looks weird by the bottom (www.debrawallacephotography.blogspot.com). Is there a way to format it so it's aligned correctly regardless of the length of text?

    ReplyDelete
    Replies
    1. Hi Debra, it looks like it's working perfectly! I'm sorry, I'm not sure what I'm looking for that you think is wrong... can you email me a screenshot illustration to david@blogxpertise.com?

      Delete
  26. Hi mark,if you mean the given links that i posted, no i did not created them. They are a good inspiration on designing though. :)

    ReplyDelete
  27. Hi David.

    Thank you for this great code. How can I make the Thumbnails larger?

    Thanks

    ReplyDelete
    Replies
    1. Hi Vourne, look for this line in the code:
      var dimension = 90;

      Change the value to be the new dimension of the thumbnail.

      Delete
    2. Hi David.

      Thanks for the reply. It shows the thumbnail and the summary perfect, but when you click the post title or the read more link it goes to the post page but it doesn't show the rest of the post and just cuts off after the summary. Can you help?

      Thanks

      Delete
    3. Hi Vourne, please provide the URL of your blog with the script available so I can see the issue directly?

      Delete
  28. Hi David.

    Here's a link to my blog: http://www.thefireborn.blogspot.co.uk/

    Thanks

    ReplyDelete
    Replies
    1. Hi Vourne,

      It looks like you skipped the step in our post about wrapping the script in an "if" statement:





      You can read more about page types here.

      Delete
  29. Hi David

    Would you mind explaining how I do this? I'm trying to put the code into the if statement but I can't seem to get it to work.

    Thanks

    ReplyDelete
    Replies
    1. Hi Vourne, go here. That has the code AND the if statement.

      Delete
    2. Hi David

      Thank you very much for your help :)

      Delete
    3. thank you for the code with the if statement, because I also forgot it and it didn't work but now it work just fine

      Delete
  30. Do you think it would be possible to combine this with infinite scrolling? I installed this widget http://blog.manki.in/2012/04/how-to-add-infinite-scrolling-to.html But when you scroll down it just shows regular posts and not condensed ones. Thanks!

    ReplyDelete
    Replies
    1. No reason why you wouldn't be able to combine them, but that's probably not what your site is set up to do. When you call the instance of infinitescroll, you also need to parse those results through the thumbnail and summary script, otherwise it's just to get them as normal.

      Delete
  31. Hi David. Thanks a million for this. MUCH better than the original blogger summary script. Using your latest version and found a minor bug if the length of the post text is shorter than the number of characters specified for the summary. It will show a call to the "createSummaryAndThumb" function in the post.

    Example:
    "This text is shorter than the minimum specified createSummaryAndThumb("summary3010618698898664219"); Read more... ...
    Read more..."
    I've not looked at the code to see if it was obvious, but thought you'd want to know.
    Thanks again.

    ReplyDelete
    Replies
    1. Hi Ken, that "createSummaryAndThumb" is from the PREVIOUS summary and thumbnail script that you added to your site, not to the script that we wrote. You'll need to remove that other script in order to remove that bug.

      Delete
    2. How right you are, Sir. All good now. David, I can't thank you enough for this post, script and support. I'll be making a contribution to your tip jar :)

      Delete
  32. Hello David,
    Thanks for such an amazing snippet. i ran into a little problem after installing this script, My blog post titles and post meta are now merged with the excerpt itself :(

    Right now i'm using a custom template with an old Summary Thumbnail script.

    Link here: http://mytheme123.blogspot.com/

    ReplyDelete
    Replies
    1. Hello, I'm sorry, but I can't assist you if I can't see the code running in the site.

      Delete
  33. Hello David, sorry did not made it through the invitational hangout, got busy with work, i tested this script again with my blog, cardinalscene.blogspot.com, its working fine with chrome, i noticed in firefox that the image thumbnails are falling out of place. Care to check? thanks.

    ReplyDelete
    Replies
    1. In the script, near the end, change this line:

      $('hr').css('width','100%').css('background-color','transparent').css('border-width',0);

      to be:

      $('hr').css('width','100%').css('background-color','transparent').css('border-width',0).css('clear','both');

      That should do it.

      Delete
  34. Hi Mr. David, I tweak my blog and follow google's auto read more but it seems its not working anymore, a friend told me that the the script is in 404, If I put your code will it still work even if the previous one was still there.
    here is my blog http://raketermama.blogspot.com/ it loads so much slower now than before

    ReplyDelete
  35. It worked! Thank you so much! If even I managed to do it, everybody can!

    ReplyDelete
  36. David, Thank you so much-- I've been looking for something like this for ages. This may be a silly question, but how can I style the 'read more button?' Mine shows up in a small blue box, with bright blue text (my link color) and is hard to read. I'd just like to remove the box. Thanks again, Palak

    ReplyDelete
  37. GREAT plug, David! My only beef is that the thumbnail image of the latest post on my test blog (http://hoopnut-test.blogspot.com/) isn't showing :( Can you help?

    ReplyDelete
    Replies
    1. Try deleting that photo and re-adding it as a new image. This is one of those one-in-a-million where your image URL happened to misfire the regex that I use for the image thumbnail conversion.

      Delete
  38. Also, when I click on the read more and the title links, the post is still in its summarized form...

    ReplyDelete
    Replies
    1. Hi Enzo, you added the script, but didn't finish reading the blog post! In the post I tell you how to limit the script to only run on certain pages or types of pages. You needed to add the code within the following:



      (insert script here)



      This limits the script to only run on "index" pages (which you can read more about here)

      Delete
    2. Sorry, Blogger removed the code which you can find here.

      Delete
    3. Oh ok so all I need to do is wrap it in the if codes? i'll try that thanks!

      Delete
  39. Hello,
    I used this in one of my blogs. works fine.
    I want to align the "read more" link to right. How can I do that.
    thank U

    ReplyDelete
    Replies
    1. Hello!

      Do you see this line?:

      if (readmore) {
      wrapper.append('
      ' + readmore + '');
      }

      It's meant to be a read more link right after the text. To make it right align you'll likely need to put it into a div with text-align right, like so:

      if (readmore) {
      wrapper.append('
      < div style='text-align: right;'>' + readmore + '< /div>');
      }

      (beware of spaces I added before div and /div to get it into the comment box)

      Delete
    2. sorry, Blogger removed lots of the code. Find it here.

      Delete
  40. hello and thank you for quick reply.
    for some reason I can get it to work. I found this line as you said 'in the original code'. line 70-74.
    its something like this;

    if (readmore) {
    var link = wrapper.parent().find('h3 a').attr('href');
    wrapper.append

    I am trying to put the div as you suggested (http://pastie.org/5498559) in the original code, but cant get it to work.
    what am I doing wrong?
    thank you

    ReplyDelete
  41. Hi! Awesome code! BUT, I must have done something wrong? When I click "read more" it takes me to the same summary and thumbnail as the home page. Then I click Read more again and it says "Sorry, the page you were looking for in this blog does not exist.". This is really frustrating me. It is also causing my slide bar to not "slide" and it causes the description from slide 3 to overlay on slide 1... What did I do wrong? I hate HTML lol! PLEASE HELP! -Matt

    ReplyDelete
    Replies
    1. To only show on "index" page types, you'd put the script inside:

      < b:if cond='data:blog.pageType == "index"'>

      < /b:if>

      Delete
  42. I can NOT get it to work :( I do that and nothing changes, something must be wrong with my template code causing the above code to not effect the blog. I add it in between

    < b:if cond='data:blog.pageType == "index"'>

    < /b:if>

    And the homepage does not change at all, just regular format, getting ready t just leave it like that, been working on this too long. I think I need to pay someone to do this lol!

    ReplyDelete
  43. I think I did, let me re-write it

    ReplyDelete
  44. Yeah I did do it without the spaces, still nothing, I am convinced it is something in my code but I have no idea what... Thank you for the help though! I am either going to just give up or find someone I cab pay to fix it. I have MS and that effected my cognitive skills so I do not have the patience for this anymore haha!

    ReplyDelete
  45. Hi,
    I have it installed on my blog, but dates no longer show up before post titles on the main page. Is this normal? I'd really like to have them still show up. It just seems odd without them. Thanks!

    www.gluesticksblog.com

    ReplyDelete
  46. Also...only 8 posts show up on my homemage now. I've tried using the blogger feature to have 15 show up, but with no luck. Did the new html change this so that the blogger feature no longer applies? How can I get more than 8 post summaries to show up on the home page? Thanks!

    ReplyDelete
  47. Hi, thanks for making this. But is there a way to do something like this? http://i.imgur.com/84L3YNk.jpg

    The 'image' is not a thumbnail though, it is the first image before 'read more' are inserted in the blog post. Basically 'image' will resize down at the index but appear normally in its own post page. If it can't resize normally and I have to resize the image manually for the index its okay too, but is there a way to make the layout looks like that in the index without changing its size in individual blog posts (ex: 300px per box/post in index but normal size, ex: 1000px at individual page)?

    I really hope it is possible. I don't know what keyword to use to find this kind of code in google too. Hopefully you guys can help! Thanks in advance! :)

    ReplyDelete
    Replies
    1. Did you read our post on making a grid of post thumbnails for index/listing pages? That's what you want to implement... with some minor revisions to create the layout that you diagrammed... actually it does exactly what you want, you just need to change how I place the title and the read more link.

      Delete
  48. Hi @David Kutcher ... Can this plugin be modified to either get the first image or first video on the page?

    ReplyDelete
  49. Hi, I´m also using that infinite scrolling script on my blog but I don´t have a working knowledge of javascript to link the two. I´ve done a bit of fiddling with various results but none that work correctly. How would this work? I love your script by the way, I'm extremely impressed by how well laid out and easy to use it was!

    ReplyDelete
  50. Hi David, I am SO happy to find this code. However, when I download the code and put it on my blog, it makes me "slider" disappear? Any ideas how to remedy this? I'd love to use your code! www.sheseclectic.com (angel@angelquintana.com)

    ReplyDelete
  51. Your Script worked! (look at 1st screen shot).
    But there is a serious problem in it, when i open any post it is opening again with read more link (2nd screen shot).
    and when i click on read more link it is opening in blank screen with undefined (3rd screen shot).


    In short main problem is when i click on my post i can see only bit part of post, remaining part is not opening.

    Please can you fix this problem?
    waiting for your reply.

    thanks...

    ReplyDelete
  52. Did you follow the step regarding putting the script inside the index page type? If you skipped that step you'd get this issue. The undefined issue might be if you had switched h2 and h3 elements in your template as the code is looking for "h3 a"

    ReplyDelete
  53. Great!! Thanks a lot @David Kutcher.
    My Problem is solved now.

    ReplyDelete
  54. @David Kutcher sorry for again trouble i was asking that is this script or this change can affect the SEO of our Blog?

    ReplyDelete
  55. Sure, that's what it does. But if you're talking about being able to specify, on a post by post basis, which should be used, no it can not.

    ReplyDelete
  56. thanks a lot, works excellent on my blog: http://kiesoft.blogspot.com/

    ReplyDelete
  57. Hello sir,
    I've Tried on http://www.whatismyresults.com But its not working properly.
    any solution please

    ReplyDelete
  58. Hi, it work's great, but I want to use a CSS style on Read More. Is that possible? Thanks for the script.

    ReplyDelete
  59. Yes, you can add any class that you'd like into the script where the read more link is inserted; from there you can put any css you'd like into that class.

    ReplyDelete
  60. Hello! I am really glad I found this script because the image thumbnails are better than any other codes I've seen. I like that you can make it proportional or squared. I do have a question though. Is there a way to maintain the text formatting in the summary? Right now the summary is just the first 80 words, with no line breaks, or text formatting. So it just looks bunched together. Hoping this makes sense. Thanks again for your help and the code is great!

    ReplyDelete
  61. Yes, the script removes the styling that you might have in that text description, but for a HUGE reason: if it didn't, and the description cut off, it might break tags that were started in the shown description, but cut off by the limit. If that were to happen the entire template might break...


    hence why it removes all styling :)

    ReplyDelete
  62. thanks, david. unfortunately that probably means this code won't work for what i want but i think it's still a great code. thanks!

    ReplyDelete
  63. email me (david@confluentforms.com) and explain what you're trying to do, maybe I'll write a script ;)

    ReplyDelete
  64. If I wanted to edit the size, color, etc. of the "Read More" text, how would I go about doing that? Is there a simple code I could just plug in?

    Also, thanks so much for this tutorial. All of the other tutorials I've found on "post summaries" didn't work for me at all and it was driving me absolutely insane. So again, thanks a ton!

    ReplyDelete
  65. Hi David,

    I'm new to blogging and this script has been very helpful! Thank you. I would like to know how can I put the read more link directly after the end of my text and not on a separate line? Also with this how I can I right align it on the text line. I tried messing around with the code to right align you gave a few posts down but had no luck. What should the entire new readmore right align code or directly after text look like? Thanks again!

    ReplyDelete
  66. Hey, this code looks great. One question - everyone seems to want to have little thumbnails posted left or right. I want my image to remain the same size, with a small excerpt for text - my blog is image heavy and often has loads of images and media.
    Where do I tweak the code to automatically display one image and a quick snippet?
    thank you in advance.

    ReplyDelete

Post a Comment