Recent Posts with Pictures (take 1)
If I remember correctly, I used a recent post widget developed by beautifulbeta. It’s a great widget (think they call it gadgets now), but I wanted to have like a picture in it to… like the first picture in the post. So I kinda added stuff to their javascript code. While I was in there, I added a few other things too. Well, in addition to having pictures, you can choose to ignore a number of your most recent blog posts. For example, ignore the latest 3 (or something like that) by setting the variable numpoststohide. In your layout, add a html/js widget and copy-paste the code below. Don’t forget to put in YOURBLOG.COM.
<script style="text/javascript" src="http://recentPostsWithFirstPic.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;var numpoststohide=5;</script><script src="http://YOURBLOG.COM/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>By the way, this is a pretty long post with some javascript and css sprinkled in. ^^
Here’s the javascript. I don’t have any place host it for you, so please host it where you can.
function showrecentposts(json){for (var i = numpoststohide; i < numposts+numpoststohide; i++){ var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; // get the postcontent // if the Blogger-feed is set to FULL, then the content is in the content-field // if the Blogger-feed is set to SHORT, then the content is in the summary-field if ("content" in entry) var postcontent = entry.content.$t; else if ("summary" in entry) var postcontent = entry.summary.$t; else var postcontent = "";
// For getting the first photo. var firstPic = /<img \S[^>]*>/; if(postcontent.match(firstPic)) var firstPicURL = postcontent.match(firstPic); else firstPicURL = 'nothing'; var gotPic; // format firstPicURL attributes var width = /width="\S\S\S"/; var height = /height="\S\S\S"/; if(firstPicURL.toString().match(width)){ firstPicURL = firstPicURL.toString().replace(width, 'width="200"'); firstPicURL = firstPicURL.toString().replace(height, " "); gotPic = true; } else if(firstPicURL.toString().match('BLOGGER_PHOTO_ID')){ // blogger pics firstPicURL = firstPicURL.toString().replace("/>", 'width="200" />'); gotPic = true; } else gotPic = false; break; } } posttitle = posttitle.link(posturl);
var readmorelink = "(more)"; readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t; var cdyear = postdate.substring(0,4); var cdmonth = postdate.substring(5,7); var cdday = postdate.substring(8,10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; if ("content" in entry) var postcontent = entry.content.$t; else if ("summary" in entry) var postcontent = entry.summary.$t; else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (!standardstyling) document.write('<div class="bbrecpost">'); if(gotPic == true) document.write('<a href="' + posturl + '">' + '<div class="crop">' + firstPicURL + '</div></a>'); document.write('<br>'); document.write(posttitle); if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday); if (!standardstyling) document.write('</div><div class="bbrecpostsum"">'); if (showpostsummary == true){ if (standardstyling) document.write('<br/>'); if (postcontent.length < numchars) { if (standardstyling) document.write('<i>'); document.write(postcontent); if (standardstyling) document.write('</i>'); } else { if (standardstyling) document.write('<i>'); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0,quoteEnd); document.write(postcontent + '...' + readmorelink); if (standardstyling) document.write('</i>'); } } if (standardstyling) document.write('<br/>'); if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>'); }}One more thing. ^^. I used some code for cropping pictures. Please add
/* For cropping */div.crop { height: 90px; width: 90px; overflow: hidden; margin-left: auto; margin-right: auto;}div.crop img { margin: -40px 0 0 -50px;}to the header of your html template file. Near all the other css styles. Anywhere between <b:skin><![CDATA[ and ]]></b:skin> should be ok.
When everything is done properly, it should look something like this.
I’m not an expert at javascript or css. So writing all these from scratch is a little beyond my reach in terms of time constraints. So I’ve taken the easy way out. I’ve took what was there and pieced them together whilst adding a little in return.
Anyway, I thought this might be useful since there are lots of sites with recent posts widgets, but I’ve yet to see one with pictures included. It works for blogger. I don’t know about wordpress etc. Anyone care to test it out for me?
Related posts:
- Problems opening in IE7 fixed! I had the IE woes. This site would open in...
- Blog Update I’ll be changing some elements in this blog over...
- I survived! Or rather my posts survived the move! I lost...
Related posts brought to you by Yet Another Related Posts Plugin.
September 9th, 2008 at 4:03 am
may i please use that code?
[Reply]
September 9th, 2008 at 4:05 am
@otaku-dan, go ahead. ^^. let me know how you went.
[Reply]
September 9th, 2008 at 6:08 am
Nice Hack!! ^^ I’ll try this!!
But..One question (or more?!)
Can it list my 20 latest post?? :p
[Reply]
September 9th, 2008 at 6:17 am
@sandy-kun, yeap you can. look in the first scroll box above. you can find something like numpost=5 and numposttohide=5. just change the first ‘5′ to ‘20′ and the second ‘5 to ‘0′. this will list your 20 latest posts. the maximum you can go with blogger is 25. that’s the maximum number of entries in the JSON feed i think. ^^
[Reply]
September 9th, 2008 at 6:25 am
Thank you k…
I’ll try this out so…
and then, second question… How to put the news item that aren’t shown in our main page??
(i just figure that your recent comment is not in the main page, but in the past page…)
[Reply]
September 9th, 2008 at 6:50 am
@sandy-kun, you mean recent posts? just set the variable numpoststohide (spell miss in my previous comment, forgot the ’s’ in posts). if you have 3 posts in your main page, set this variable to 3 etc. this will make sure that 3 most recent posts will not show up in the widget. let me know if you have any problems ^^
[Reply]