The rest of the post discusses the other "Read More" plugin that I found on the net, its limitations and how I wrote one myself (similar in its functionality to one in the above link) and its source code. Its a good study on how to preprocess your post after you click "PUBLISH POST" button but before blogger actually publishes it. The geeks may continue reading.
Quite some time ago, I was writing a humor article on my blog - Barberic Creatures It badly needed a "Read More" link because as per the the setting I had, I display 10 posts on a page and if one of them is too long (this one was) it dissuades the reader from scrolling all the way down to see the other ones. I couldn't find any plugins at that time (2008/11) and left it at that.
But it came back to haunt me when I wrote Schwartzian Transform Explained. This time I got a hit - Snaphow read more plugin
The instructions were clear and it works. But it didn't address my needs because:
- It inserts "Read More" link at the end of all pages - even the ones that are accommodated in the limits it imposes.
- The link is inserted based on the character limit which implies that the author cannot decide the "logical" break point. I certainly wouldn't want it to display the first 3.7 lines of a poem followed by a read more link. That would break the flow.
- It messes up formatting. The preview post that you see is one big paragraph without any line breaks.
- The author decides where to break his post and the preview content to show to the reader.
- To do this he inserts an HTML comment <!-- cut_from_here --> at the break point.
- When the post is being published a javascream (read javascript) function takes the contents of the post, uses the "<!-- cut_from_here -->" as a delimiter and displays the first part (the part preceding the delimiter) followed by a "Bleed More" (just for kicks) link.
- I gloat.
- DO NOT COPY PASTE THE CODE DIRECTLY . This code has been rendered through SyntaxHighlighter plugin - click on the "view plain" link at the top of the code snippet, copy the code shown to you and before you paste it - run it through an HTML encoder. Here is one - HTML Encoder
- Go to your blog => Dashboard => Design => Download Full template. This is to backup your template. The author does not claim responsibility for any side effect caused by the suggested code changes in this post.
- After backing up your template click on Edit HTML => Check on "Expand Widget Templates"
- Replace </head> with the following code
- Replace <data:post.body/> with the following code
- Save the template
- Edit the most current post of your blog to add <!-- cut_from_here --> at the point upto which you want the reader to see the preview.
- Publish it and click on "View Blog" link. If you click on "View Post" the above code will display the entire post without the preview (will explain the reason soon)
- Jump with joy or curse the author depending upon the outcome.
</head>
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <div expr:id='"preview" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> getPostPreview("preview<data:post.id/>", "<data:post.url/>"); </script> </b:if>
First you decide when your javascript function will be called. That is done by the code in Step 5 . As you can see it is an if-else block. The condition it checks is:
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/>
which means if the pageType is "item" - which means "a specific post" - then show the body as it is. Which makes sense, because if you clicked on a specific post there is no point in adding a "Read More" tag in it. The "Read More" tag is used to reduce the per-post-hog-limit on the index page of your blog. More information on pageType - here
If the pageType is not "item" then:
<b:else/> <div expr:id='"preview" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> getPostPreview("preview<data:post.id/>", "<data:post.url/>"); </script>
call the getPostPreview function with the post id and the post url and let it compress the post into a preview post. The data:post.id, data:post.url hold this meta-information.
What goes on inside the getPostPreview function?
line 02 : Initialize the pattern at which the post will be split into 2 parts and only the first one
(the one before the pattern) will be displayed.
line 05-06 : get the HTML corresponding to the post id.
line 07 : get the point at which the cutPostAtPattern occurred.
line 10 : if the pattern is not found, the preview content is equal to the document itself.
line 12-14 : if the pattern is found, split the content at that pattern and append the preview content with
the "Read More" link.
line 16-17 : Place the preview content + link within a div and set it as the post's HTML content.
This is just one example. You can replace the getPostPreview function by any function to preprocess your post before displaying it. A google search on the buzzwords - data:blog.pageType, data:post.id, etc. will give you many hits to know more about the tag syntax and meta information.
When I was done testing this plugin (it has one small flaw which I leave for the reader to observe and point out), I wanted to submit it on some site that hosted blogger plugins. It was then that I found out that blogger had already integrated a similar feature in their rich text editor - Read More That's the one I used for adding a "Read More" link to this post. But I enjoyed the process as I got to know interesting things while working on the plugin. Hope you find this information useful while playing with blogger templates.
No comments:
Post a Comment