Tuesday, January 31, 2006

WIP

Just been farting around with my template again over at my TaoTest blog. After seeing the cute and excellent site design over at OrderedList I decided to take mine to a "low tech, single post" level. In order to do this effectively I would have to limit the size of the inital view of the latest posting to a few lines and then introduce a "Read More" item at the bottom for people to load the full thing up. I did a search for Blogger Hacks and found this posting by Nerdier than thou! on how to create such a thing. The only issue I can see with this is that you have to insert some CSS code into your post to get it to work correctly - which I don't want to do. I just want to make a posting and have the first portion of it displayed automatically. So... Off to JavaScript land I went and came up with something that actually works! Here's the code bit i stuck in my template: <mainorarchivepage> <script type="text/javascript"> var str_length=400; str = '<$BlogItemBody$>'; last_dot = str.indexOf('.',str_length); document.write(str.substring(0,last_dot + 1)); </script> <br><a href="<$BlogItemPermalinkURL$>">Read more!</a> </mainorarchivepage> <itempage> <$BlogItemBody$> </itempage> The blog post is written into the variable str and then the post is scanned for the next full stop after the number of characters specified in the str_length variable. To show more content, increase the value of str_length. The post is then re-written using the document.write command as far as that full stop character to allow for proper sentences to be displayed rather than being cut off in mid flow. The JavaScript is between the <mainorarchivepage> tags to allow it to be shown on the front page. A normal <$BlogItemBody$> tag is shown between the <itempage> tags to allow it to be displayed in full when you click the "Read More!" link. This is still a Work In Progress - so please don't take it as gospel - but I think it works ok. Not sure how it will work with pictures though. Rather than messing with CSS code, I was thinking of putting some keywords into the text such as !start! and !end! to signify the start and end of the posting you want to be displayed before the "Read More!" link. That should be pretty easy for JavaScript to sense and strip them out, and alot easier than going into the HTML code when posting.

8 comments:

Tao said...

Just did some more testing and realised that if you use any quotes or brackets or something that the Javascript may not work correctly...

Needs a little tweaking perhaps - but i am not (and do not proclaim to be) a javascript guru by any means!

amit upadhyay said...

Hey dude,

Glad you liked it. As of picking what goes on main/archieve page vs what goes on item page, I prefer to be explicit, that is why I put the extra span, or was it a div.

Am looking for beta testers for my latest project, www.labelr.com, tell me if you would be interested.

bigfootcookie said...

You lost me after the word "farting"........

Chris said...

Very interesting Mr Bond.

On a (mostly) unrelated note. Do you know where I can get an equvalent to Simpletext for both my Mac and PC?

Since rebuilding my Mac last week it's OSX only, I don't want to put classic back for one measly tiny app. But all supposed Notepad apps have too much functionality, I want to write pure html and save it as raw .txt every damn program I try ends up "displaying" the code.

Cheers luv

Chris said...

I've trawled download.com and come up with "Thomson Text Editor" for the PC and "TextWrangler" for Mac OSX.

They both sound suitably lo-tech for me.

Tao said...

I did come across a list on Engadget.com that listed the "must have" applications - but i can't find it again...
That had a mac only text editor...

I will have another look now that Desparate Housewifes is coming on....

DOH!

Tao said...

You are right there on the moneyshot pal! Splurge!

It was TextWrangler2 that i found on this posting over at LifeHacker.com.

It's recommended somewhere down in the comments...

joyce said...

Hi Taoksi,

I am trying to do the "expandable post summary" trick.

I tried Amit's solution. It's good, but like you, I want the first portion of every post to be displayed automatically.

I tried your solution, altho I wasn't sure where to put your code in the template. (I put it in the place Amit suggests.) Now I get FIRST the long text, THEN the first sentence. My problem is visible on my test page http://losangelinotest.blogspot.com, where I'm trying to figure out how to collapse huge posts like the ones there.

Was I supposed to delete some code in the template? Or put it somewhere else?

If you've got a minute, I would appreciate your help. I am experienced with DTP, but not with programming. But I use UltraEdit and can find and repair broken code, if I know what to look for... :-(

Thank a million.
LA