Summarising your Blogger posts

I use a simple JavaScript function to summarise the posts on the home page of this blog. It worked quite well since the Blogger.com hasn't complained about it. Well, things have gotten a little bit ugly. Few days ago, I post a new article "Start your own MVC Framework with PHP" which is quite a long post. It contains code samples, descriptions and CSS code for presentation.

After I published the article, I noticed that some posts on my home page went missing. I set the setting to display 8 posts per page for home page, categories, paging and search results. However the home page only displayed 5 posts and I was not very happy about it. So I went Blogger Help Forum to search for solutions. Voilà ~ The reason is that if one or more of your recent posts is/are too long/big, Blogger.com will cut down the number of the posts to display. The main reason is to enhance the loading speed. Well, fair enough but what should I do now? Divide the post to two or three parts? Mate, I'm not going to do it. So what then? It must be a way to fix it. So I started to search any possible solutions on Google again and found the term "Jump Break".

What does Jump Break do? When you click the Jump Break icon on the Blogger's editor, it inserts a "<!--more--><br />" Html comment at the place where you want to break the content. So basically when the data:blog.pageType is not "item", the server only dispatch the post content up to that point. If you want to know more about it, you can have a look at this tutorial.

Usually I compose the articles with WYSIWYG html editors (BlueGriffon or Kompozer ) on my computer. When the article is completed, I copy the Html code and paste it on the Blogger's editor and then publish it. That is probably the reason I didn't notice the feature of Blogger's editor.

I also use a simple function with JavaScript to summarise the "jump broken" post content and display the first image of the post. It gives me power to control the summary of the post body. So how do I do it?

First of all, you need to edit the Html code of your template. If you don't feel confident to do this, but you are willing to try. You should backup your template before changing anything in your template.

Step 1:

1. When you are in the template Html editor, focus your cursor in the code area.
2. Press Ctrl + F or Command + F if you are using OSX. This should bring up a little search box at right top of the editor.
3. Type </head> in the search box and press enter, the editor should bring you to that part of the code and highlight it.
4. Now you copy the code below and paste it above the </head> tag.

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
    <script language='javascript'>
     (function($){
        /**
         * Summarise the post content
         */
        $.fn.summariseContent = function(id, url){
          var summary_noimg = 650;
          var summary_img = 450;
          var img_thumb_height = 150;
          var img_thumb_width = 200;
          var block = $("#"+id);
          var imgtag = "";
          var imgs = block.find('img');
          var len = summary_noimg;
          if(imgs.length>=1) { 
            imgtag = '<span style="float: left; padding: 0px 10px 5px 0px;">' + 
                     '<a href="' + url + '">' +
                     '<img src="'+imgs[0].src+'" style="background:#fff;padding:3px;border:1px solid #eee;width:'+img_thumb_width+'px;height:'+img_thumb_height+'px;" />'+
                     '</a>' +
                     '</span>';
            len = summary_img;
          };
          var text = block.text().substring(0, len);
          var summary = imgtag + '<div>' + $.trim(text) + ' [...]</div>';
          block.html(summary);    
        };
      })(jQuery);
      </script>
    

Step 2:

This step is pretty difficult since each template places the post body at different places of the code. Sometimes it appears at the part for mobile layout. You will need to test and find out where the actual post body (<data:post.body/>) located. Normally it should appears one or two times when you search the key word "expr:id='&quot;post-body-&quot; + data:post.id". Once you have found it, then place the code below after </div> tag where "expr:id='&quot;post-body-&quot; + data:post.id" belongs to. And then replace "expr:id='&quot;post-body-&quot; + data:post.id" to "expr:id='&quot;summary-&quot; + data:post.id" to make it unique.

 
      <script type='text/javascript'>
        $().summariseContent(&quote;summary-<data:post.id/>&quote;,&quote;<data:post.url/>&quote;);
      </script>
    

This is my version which may give you a idea how it should look like.

When the code is placed, then save the template and reload your home page of your blog. Remember that you may need to test few more times until you find the right <data:post.body/> you want.

I uses the summarise function and jump break together. The jump break feature cuts down the size of post body at home, searchs and categories pages. The summarise function helps me to reorganise it. I just need to be sure that first image falls before the jump break point in order to display it on each summarised post.

If you enjoy this article, please leave a like or a plus and let me know your thoughts in the comments.