Category Archives: WP-Plugins

Wordpress plugins

Twitter Timeline Updated

In my previous post Timeless Belt Of Time: How I Integrated Twitter in Timeline, I posted the code for laying out twitter posts on the timeline.

Previously that was done by calling the json Twitter API. It work well for the current 20 status but the archive call (80 posts) didn’t work. I filed a bug report at Twitter, but when I last check again 3 days ago, it was still not working.

To implement a workaround for archives, I modified my server side php code to get the XML format. SimpleXML was used for parsing the xml, then since my server didn’t support json, I use the json library from pear php.

Here’s the updated code for download.

Recently, I have a regain interest in adobe products, namely flash lite and flex. My first flash lite app is a Metronome, and maybe I might post it if I polish it up.

Juicing Up Photo Viewing Experience: Part I

on this blog, on your wordpress site, or anywhere else. This series is a result of my recent craze with scripting/programming and photo ideas.

Screenshot of Fotobook Highslide

Previous Next Close
Fotobook Highslide - Mash up of WordPress, Facebook Photos & Highslide JS

1. Photo Gallery
I tried a couple of wordpress plugins in the past: Gallery2, Simple Extended Gallery, Flickr….

They were perhaps good, but perhaps complex, lacking and I didn’t seem to like it. Then I created PhotoZip and even though Photozip plugin had its short comings (eg. perhaps a little slow due to batch processing), I’m glad Tim have the interest to improve it so much better than I would.

It is only recently I found out about Aaron Harp’s Fotobook, an integration/mashups of Facebook’s photos into your blog. So I tried it, and it works.

The integration is good (since I use facebook too), the layout neat, the configuration all done with much ease. It seems like it was something I tried looking so hard before, now that I found it, I love it. My photo gallery can be viewed by clicking on the Photos tab.

2. Highslide
Tim’s improved PhotoZip supports LightBox, so does Fotobook. No doubt it gives great effect and I like it too when used appropriately. Even my cousin’s portfolio uses it to enhance viewing experiences.

However, a reason why I don’t use it? Perhaps it was due to some negativity when I experienced it on some sites. But when I come across the Highslide javascript library, I thought I would use it for the following reason
1. At the first impression it reminds of LightBox- to expand an image in the same window.
2. However, unlike Lightbox, it is less obstructive. The background is not grayed out, and window can still scroll, and the expanded image can be dragged around.
3. It seems more reactive.

Not only it good to find the right tool for the right job, it good to find the best package available. So I’m using Highslide WordPress plugin. Since fotobook was written in a way it was simple to customise it, I created a style/theme similar to Aaron’s lightbox style, except it works with highslide. Check out one of my gallery for example.

(Tip: You can use arrow buttons on your keyboard to navigate through the photos. You can also click/expand more than one photo at a time too.)

Click here to download Highlight Style for Fotobook.

Instructions:
Ensure you have Fotobook and Highslide plugin working.
Copy the highslide folder into fotobook styles folder
(eg. /wordpress/wp-content/plugins/fotobook/styles)
Select the highslide style under fotobook options.
View your photo gallery, test and enjoy!

Blog Posts on a Timeline

Its 2008, so wishing all readers here a very happy new year!

Yesterday, I touched about glancing back at a previous year (2007) , and one good way is to retrieve all the posts on your blog and place visualise it on a timeline. Of course there are other ways, say looking and sharing photo albums with friends could be a better way to bring back memories.

My Blog on the Timeline

I revisited Dandelife (A Social Biography Network?), and found that they have made more features and progress, compared to the last time I tried using it. Some features include importing “life streams” from flickr, facebook, blogs, feeds etc… anyway I didn’t manage to import my blog so I moved on.

Next I tired SIMILE Timeline plugin for WordPress. Pretty good it seems, but I encountered couple of problems which i didn’t bother to troubleshoot and fix much. I considered implementing my own wordpress plugin when I got the idea to create a client which uses MetaWeblog API, so that it can work not only for my blog, but any wordpress blogs, blogger sites etc.

I will use the metaWeblog.getRecentPosts method to retrieve the post from the webservice. Since metaweblogapi is based on xmlrpc, I used the library phpxmlrpc. The data returned is then formatted as timeline xml to be used the timeline api (in my case I chose to truncate blog contents too). Pretty simple right?

Here’s my source code which I glued together quickly, isn’t too pretty, but works dandy for me. I’ve placed the script online, so you may want to try it.


<?php
/* by http://zz85.is-a-geek.com/ 31 December 2007 */
session_start();
if ($_POST['login']) {
	$reponse = blogconnect ($_POST['blogaddr'],1, $_POST['username'],$_POST['password']);
	if ($reponse->errno=="0") {
		$_SESSION['blogaddr'] = $_POST['blogaddr'];
		$_SESSION['posts'] = $_POST['posts'];
		$_SESSION['username'] = $_POST['username'];
		$_SESSION['password'] = $_POST['password'];
		showhtml();
	} else {
		echo "login failed";
		showform();
	}
} elseif ($_GET['js']) {
	$_SESSION['username'].$_SESSION['password'];
	printxml(blogconnect($_SESSION['blogaddr'],$_SESSION['posts'], $_SESSION['username'],$_SESSION['password'])); 
	exit;
}else {
	showform();
}

function blogconnect($link, $posts, $username, $password) {
	//requires xmlrpc.inc from http://phpxmlrpc.sourceforge.net/
	require_once('lib/xmlrpc.inc');
	
	// Using metaWeblogApi http://www.xmlrpc.com/metaWeblogApi	
	$client = new xmlrpc_client($link);
	 $client->return_type = 'phpvals';
	 //$client->setDebug(1);
		
	 $params[] = new xmlrpcval("n/a");
	$params[] = new xmlrpcval($username);            //your wordpress login
	$params[] = new xmlrpcval($password);
	$params[] = new xmlrpcval($posts);  
	 $msg    = new xmlrpcmsg("metaWeblog.getRecentPosts",$params);
	$response = $client->send($msg);
	return $response;
}
function printxml($response) {
	header('Content-type: text/xml; charset=utf-8');
	echo "<data date-time-format=\"iso8601\">";
	foreach ($response->val as $entry) {
		/*
		['dateCreated']
		['userid']
		['postid']
		['description'] 
		['title'] 
		['link']
		['permaLink'] 
		['categories'] 
		['mt_keywords']
		['wp_author_display_name']
		['date_created_gmt'] -8
		*/
		
		$description = htmlentities (substr($entry['description'],0,255)."...");
		?>
<event 
        start="<?=$entry['dateCreated'];?>"
        end="<?=$entry['dateCreated'];?>"
	link="<?=$entry['link'];?>"
        title="<?=htmlentities($entry['title']);?>"
        >
	<?=htmlentities ($description);?>
        <?=htmlentities('<br/>by '.$entry['wp_author_display_name'].'');?>
</event>
		<?php
	}
	echo "</data>";
}

function showform(){
?>
<form method="post">
Blog Address: <input name="blogaddr" value="http://yoursite/blog/xmlrpc.php" size="40"/><br/>
No. of posts: <input name="posts" value="100" /><br/>
Username: <input name="username" /><br/>
Password: <input name="password" type="password" /><br/>
<input name="login" type="hidden" value="1"/>
<input type="submit"/>
</form>
<a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a>
<?php } 

function showhtml() {
?>
<html>
  <head>
  <title>Wordpress (MetaWeblog) API and Timeline API Integration</title>
   <link rel='stylesheet' href='http://simile.mit.edu/timeline/docs/styles.css' type='text/css' />
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
    <script>
    	var tl;
	var eventSource = new Timeline.DefaultEventSource();
	
	function onLoad() {
		createTimeline();
	}

function createTimeline() {
  var bandInfos = [
      
   Timeline.createBandInfo({
        width:          "25%", 
	//timeZone: 8,
	eventSource:    eventSource,
        intervalUnit:   Timeline.DateTime.DAY, 
        intervalPixels: 50
    }),
    Timeline.createBandInfo({
	showEventText:  true,
	eventSource:    eventSource,
	width:          "60%", 
        intervalUnit:   Timeline.DateTime.WEEK, 
        intervalPixels: 100
    }),
    Timeline.createBandInfo({
        width:          "15%",
	eventSource:    eventSource,
	showEventText:  false,
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 95
    }),

  ];
  
  // sync bands
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  bandInfos[2].syncWith = 1;
  bandInfos[2].highlight = true;
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

  Timeline.loadXML("<?php echo $PHP_SELF; ?>?js=1", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}

  </script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
  	<h2>Laying Out a Year (2007) Full of Blog Posts on the Timeline</h2>
	Using Simile Timeline Library, WordPress API/MetaWeblog API, and PHP to translate that into Timeline XML. <br/> 
	<div id="my-timeline" style="height:450px; border: 1px solid #aaa"></div>
	<a href="http://zz85.is-a-geek.com/">http://zz85.is-a-geek.com/</a>
  </body>
</html>
<?php } ?>

So now, I can have twitter and blog posts displayed on the timeline. If I have the time, calendars and metadata would be next. But there’s also too many other data sources around. Emails- run a search on gmail. On handphone, view the calendar data and smses for a year. Photos: Run time view in Picasa. Diary: read. Gps: Color tag them on googlemaps? Too many! so I’ll be satisfied with the blogs posts on the timeline for now.

Happy revisiting your posts!

WP 2

Ok, so WordPress 2.0 ‘Duke’ was released.

Offical release here.
http://wordpress.org/development/2005/12/wp2/

Download it here
http://wordpress.org/download/

Read whats new
http://asymptomatic.net/2005/11/29/2135/whats-new-in-wordpress-20

Learn about how to upgrade from your previous WP versions.
http://codex.wordpress.org/Upgrading_WordPress

Or maybe you want to read some slashdot commotion about it
http://developers.slashdot.org/comments.pl?sid=172631

[Edit]GRR.. no idea why do my posts keep getting truncated.

I tried out wordpress 2 over at the free blogging service at WordPress.com which is not bad, comes with themes, plugins like live search..

http://zz85.wordpress.com/

My consensus, no doubt, wordpress has been and is improving. wp2 has more features, especially ajax admin, more abstraction so on.. As for ajax admin, that was what I like and hoping for, but for now, im not trusting it yet. On the programmer’s side, I not willing to commit time to develop any plugins. But I’m sure, given some time, we should get some impressive plugins from other writers for wp2. On the user side, its pretty much the same.. so my decision is still to hold on the older versions.

Threaded/Nested Comments History and Beta 1

When I first saw it(can’t remember on some forums or wordpress), the threaded comment idea got stuck to me.

When I wanted to install that for my blog, it seems that I couldnt even decide which webpage to visit and even more complex for to to decide what to install.

Anyway at least I knew later 3 important names were involved.

Dodo.
Mark.
Brian.

It was difficult for me to know whats going on, because the installation instructions does not seem to be easy and for no reason I still cannot visit Brain’s blog (I managed to get the code looking at the source, and from wiki/). So as far as I could make out the history, the story goes something like this.

Dodo, running her on blog using the b2 engine,  created the earilest threaded comments hacks or plugin I could find.

Mark,  came to "translate or port" the script for wordpress 1.2. Although it supports non-javascript browsers, everytime you click on a comment  to reply it, it redirects you to another page to post your comment.

Dodo have since moved over to wordpress. She finds that  its troublesome to open another page just to submit a comment. She add javascript and a hidden field to mark’s script  so a visitor can post a thread reply in the same page.

Dodo then switch to 1.5, and has upgraded her scripts. She also has plugins for notifying visitors who made comments through email called Threaded Comments Notification.

The latest advancements for the plugin was made by Brian. More javascript and DOM was involved, css, and option page was also there. Brian’s threads could be expanded and hidden, giving the wandering effect. Clicking the reply to comment would move the commentbox into the thread, compared to previous version where the page just scrolled to the bottom to make a comment.

Then came along I, who wanted to make things even similar. I didnt want to modify the database or edit the comment.php file. So I used javascript, "injecting" fields into the comment page, using DOM to do the reordering of comment boxes. Much work was based from Brain’s version. If someone do no have javascript enabled, he would see the normal layout.

Of course its far from perfect, and it has alot of issues. Anyone who can help is great. Esp. it does not work with IE.

Goto the plugin page.

Installing… Blog Improvements

1. Anti-spam.

For a quick, easy solution to be tested first, Bad Behaviour is installed. Take a day or 2, and I’ll see the results.

Next line defense, if I have to try is Spam Karma 2.

2. K2 Theme

Or the Kubrick 2 theme. The old version of kubrick, which is not bad, comes installed with WordPress 1.1

Now with K2, wow, the blog turns high-tech, with its powerful features (of which i dreamt) with its compatibility with other don’t-miss-it plugins at the snap of fingers.

Now due to those brute forced plugins I had with my previous themes, the site has couple of issues (as usual). Plan A? Import K2 into previous theme. Plan B? Migrate all features I had into K2. Meantime, i’ll enable theme switcher again.

Click here to use K2 Theme
Click here to use Landzilla Theme

another update. I have started to use SK2. Next solution if needed would be secureImage

Spot the difference for Spell Check Engine

Before…
Before

After…
After

Can you see the difference? What is the change?

Suprise, suprise..

Now my live ajax spell checker is linked to Google’s spellcheck webservice thanks to many of the webmonkeys (Chris meller, PhotoMatt, Chris meller, and many others) out there. (don’t worry, you can still use aspell engine if you want to)

I have also merge changes from Garrison Locke’s latest ajax spellchecker v2.2.

What are you waiting for, try out the new features of the my live ajax spell checker.

I’m missing my zZzzZz lately.. gotta go!!

Work today

Its funny I always work at the wrong time, its a weekend but I’m “working”.

But so I completed a trial overhaul for the webpage of Everfeed, an engineering company in Singapore. Current site, Redesigned site. Nothing fanciful, just trying to make it plain simple but usable.

Today 2 batch of people I know left Singapore, one in the morning, one at night. This is the 3rd time I failed to see them off at Changi, and suprisingly this makes me feel “sadder” than when I usually see people off at the airport.

An interesting post on how I could work on my ajax spell checker plugin, PhotoMatt mentions how google spell checking webservice could be used.

The issue to this is that, using ajax (in fact javascript), browser security won’t allow you to call a webservice for a remote site. This means, ajax scripts still have to contact its parent server, which in turns “relays” and contacts google’s webservice.

This means, most likely this would be much slower than (aspell thru) pspell, but, given google has mutiple language support or other more advance features, this could be played around with.

Chris Meller implement a cool php script for it already, and I could be modifing pspell (again) to use google spelling webservice.

Another thing I did today, was writing a mix scripts (bash, javascript). Then i realised, 1 powerful feature of unix/linux is in its tools, piping them and writing batch shell scripts could do almost what you need. In a way this is simpler than programming “apis” and get done what you need sooner.

Features for next Photozip releases.

Thanks for all those who gave feedback about the plugin. (Some even use russian but thanks too)

Planned features for next releases.

a) styles (border and shadow) support
b) insertation customisation (links, size, style)
c) admin options
d) spg(/Gallery) integration
i) better thumbnailing
ii) integrated gallery (wif cool access keys)
iii) panorama scripts
iv) xml info (+comments)
v) + exif info
– long into the future maybe

e) php unzip
f) single image uploading
g) gallery managment
h) photo editing

PhotoZip, Live SpellCheck Plugin Updates

My PhotoZip and Ajax Spellcheck plugins are updated!

PhotoZip now allow you to view your image folders on the server, delete them, or insert them into the posts again. In case the javascript for inserting to the post box don’t work, a textarea with the htmlcode is created so you can copy and paste the code from the textarea.

Ajax Spellcheck now uses Emil’s DHTML(&Rich Text) Spellchecker. Now words are spell checked while you type! For demonstration purposes, (to know how it works), try on this site.

Links to WordPress Support pages
http://wordpress.org/support/topic/36181
http://wordpress.org/support/topic/37913

Writing plugins are pretty fun for now.. but I guess I wont be able be easy to commit time and effort (time will tell soon – playing with plugins by others would be enough to tire me out). Although I always have lots of ideas, and perhaps to fullfill them would be to code them myself, I should learn how to live with constraints and be satisfied with what I have too.