Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

The Broga Hill Experience

I can’t believe how long have I not been updating this blog. I’d partly blame Tumblr (yea, I blog more often over there now) and partly because I’m currently interning with a local design firm. Plus, I’m juggling a design gig with Claudia, and then I have to fulfill my responsibilities as the publication officer of my university’s photography club. Basically, it’s too many things and too little time.

Most of the photos taken during this trip are done in the RAW format, and therefore most of them have been converted to pseudo-HDRs. There are only a handful of shots that remained unconverted. Sorry, once I have Photomatix I couldn’t stop myself!

My aunt, her boyfriend Josh, and I hiked Broga Hill in the early Friday morning a few weeks back. It was Vesak Day, a public holiday in Malaysia and we rose at 4.30 in the morning so that we could catch the sunrise shortly after we reach the peaks. I wouldn’t say that I’m an avid hiker, but I do love scaling hills a lot. Whenever I return to Malaysia, my aunt would bring me along to hike Gasing Hill, a popular hill among the suburban residents in my area. But then when her boyfriend came along she rarely asked me out already *laughs* I guess she has finally found someone to go with her.

We were taken aback by the sheer size of the crowd. Imagine hundreds of cars and people swarming around the oil palm plantation located at the foot of the hill at 5.30am in a remote town located far away from the city center. The sky was still dark and our surroundings were still pitch black. However, the chatters of the people and the beams of light from their torches slices through the darkness and silence of the morning.

This is so crazy, I said to myself. I looked at my aunt and Josh. Both of them were silent, mouth agape. I’m not too sure if they were amused, amazed or astonished by the amount of people.

Along the way up the hill, people constantly flowed around us. There were families who rested along the way to let their young and old to catch a breather; there were teenage couples who couldn’t stop hugging while making their way up; and then there were groups of noisy, rambunctious adolescents who just couldn’t stop talking all the way up, at the top of their voice.

Suddenly, the entire hiking trip felt like a massive early morning pilgrimage.

There were many samaritans along the way up. There were several sharp turns and steep inclines that were hard to navigate in the dark, even when we were armed with LED torchlights. These people stood close to these danger areas and shone their torches at us and at the walkway, guiding us through. Midway up the hill, a landslide greeted us. It ran parallel to the track but there were many instances when the cliff came too close to our footpath for comfort. Nylon strings were tied between trees for us to hold on to our dear lives.

The hike gave me hope. You could see people pulling each other up steep slopes. Mommies were spotted pushing their little sons and daughters up. The elderlies were offered walking sticks spontaneously fashion out of fallen branches. People offering words of encouragement to each other as they laboriously navigated through crazy turns.

After around an hour’s worth of hiking, we emerged through the secondary tropical forest and onto landing full of weeds. Further ahead you could see yet another steep climb up a hill. The interesting thing is that the hill is no longer covered by trees or any tall foliage. It’s covered with weed. A windy and steep path led hikers to the first peak of Broga Hill, and we could see torchlights flashing. I thought they were fireflies.

The climb from the clearing up to the first peak was the craziest ever. I reckon the inclination to be around 45 degrees, and at some points they could be as steep as 50. However, human traffic has carved steps out of the footpath, making hiking a lot easier than the way less traveled.

Finally, we reached the first peak at 6.30am. Although dawn is yet to break, I could see campers and a whole lot of people through the darkness. There was almost no standing space. My aunt, Josh and I found a secluded spot and decided not to move on to the other peaks because there were simply too many people. Like a swarm of angered bees, they went ferociously for the remaining peaks.

Light trails on Broga Hill

Light trails on Broga Hill

Enjoying the view

Enjoying the view

It took us awhile to find a less crowded spot on the barren peak. A few huge boulders were scattered around so we picked one that pricked our butts the least :) From left: my aunt and Josh. And then we started snapping away!

People. And more People

People. And more People

From the photo above you could see how crazeh the size of the crowd is. There was almost no standing space left, and if I was any shorter I would have drowned in a sea of sweaty backs and armpits. Everybody waited patiently for the sun to rise above the hills ahead, while new hikers kept walking past us to the remaining peaks.

Windy Path Ahead

Windy Path Ahead

A snaking path brings hikers to the next 3 peaks. The boulder we sat on offered a panoramic view of the path leading to the remaining peaks, and I just snapped away, in awe of the sheer size of the crowd.

Broga Hill, in infrared

Broga Hill, in infrared

The one and only infrared photo of the trip. I took a handful of infrared photos but I suspect it’s because of the low light conditions that made most of the photos unusable. This is the “Goldilocks photo” – it was not too dark, and yet the sun was yet to be seen (so there was barely any lens flare in the photo, which infrared photos are notoriously known to have).

Through the Grasses

Through the Grasses

As the sky continued to brighten, the crowd gets stronger by the minute. More and more people starting surging from the jungle and oil palm plantation below and heading straight at us. All we could do is to hold our fort and hopefully there won’t be any rude intrusion onto our little boulder.

Glowing

Glowing

The weeds lay under the weak morning sky glow. The glow from the sky above seemed to bounce right off them :) pretty lovely. Taken with the trusty old KM f/1.7 lens.

Awww! I smell romance in the air.

Awww! I smell romance in the air.

My aunt and her boyfriend Josh. Love is in the air. And I adore his tattoos, although I’m yet to ask him what they meant to him.

Girl and Polaroid Camera

Girl and Polaroid Camera

Shortly after I took this photo, the girl called me over and asked for me help to take a group photo with her friends using that very camera. Pretty cool! An alternative crop of this photo is available here ;)

In her own little world

In her own little world

A girl reads her book as her father (left) snaps away. I’m surprised how she managed to remain attentive throughout my entire stay on the peak because the crowd is extremely noisy – well, I couldn’t blame them for being disruptive because of the excitation from conquering Broga Hill and the prospect of seeing the sun rising before their eyes. An alternative crop of this photo is available here.

The Crowded First Peak

The Crowded First Peak

The first peak remained crowded throughout our stay. Everyone is looking at the direction where the sun is rising.

The Sun is Out! #1

The Sun is Out! #1

The Sun is Out! #2

The Sun is Out! #2

The sun is finally out, and everybody snapped away furiously. My aunt was shown in various awkward poses because her boyfriend was playing the role of the artistic director in his photos, heh.

Looking Over

Looking Over

I was looking over my aunt and her boyfriend, as I struggle to maintain my balance on yet another boulder. When this photo was taken I wished I had a fisheye lens with me because the horizon will definitely look damn good with it :)

Heaven & Earth

Heaven & Earth

Another shot of the windy path leading to the other peaks. The wispy cloud caught my attention. My aunt joked that most of my photos will turn out to be photos filled with human heads. Well, she was definitely half right about that!

On our way down #1

On our way down #1

On our way down #2

On our way down #2

We savoured enough of the magnificent views and decided that we should make our way back to the foot of the hill before the crowd makes it impossible to pass. Afterall, it’s a narrow path that bridges the peaks and the street below – and what really separates us between the peak, the queue, and our car parked way below is a good tumble down the hills :P People were already queueing up to get down. Can you imagine the number of people up there?

Family of Four

Family of Four

A family of four admires the great view, oblivious to the crowd around them.

Wispy Clouds

Wispy Clouds

Definitely one of my favourite photos in this pack. It looks like the man’s head is steaming :P Oh and it’s the same people as the previous photo. Just that I photographed them from a lower angle.

On our way down #3

On our way down #3

We stopped at the steps along the path, carved out by human traffic, as we waited patiently for our turn to descend. Impatient queue-cutters were taking the easy but dangerous way down, which includes sliding down with their asses on a slippery, muddy slope.

Common sense, or the lack thereof?

Common sense, or the lack thereof?

People please, stop wearing slippers to climb a hill. That’s not good, and you’re placing everyone in front of you in danger. Dumbasses that are the shining example of the imbecility.

On our way down #4

On our way down #4

Finally, the queue is moving. Goodbye, Broga Hill!

WP Widget: Load posts in a category

As I was tinkering with Theme Hybrid lately to prepare myself for major design jobs up ahead, I felt that I should no longer try to hardcode anything into the hybrid sidebar. I have to admit that it is indeed lucrative to simply put a copy of sidebar-primary.php in the child theme folder – identifical files will force Hybrid to load the file from child theme folder instead. Afterall, one will simply have to copy the file, remove the dynamic sidebar codes and replace with your own hardcoded sidebar elements.

Justin Tadlock, the creator and developer behind the Hybrid framework (of which the current WP theme is built on), has written a meticulous and beautiful tutorial on how to create a widget from scratch for WP2.8 and above. His tutorial is straight-forward and simple – more importantly, he provided a sample widget code that you can download at the end of the day and tinker with it on your own site.

There are two ways to introduce widgets into your WordPress installation:

  1. Through a plugin file, which you place in your /[blog-root]/wp-content/plugins/ folder, or
  2. Through your theme’s own functions.php file located in /[blog-root]/wp-content/themes/[theme-folder]/. If the file is not present, you can create it yourself but most probably the theme does not support widget and further tweaking of sidebar.php is needed (Jeff Starr explains it all in his tutorial).

I will not be covering how to write a widget in this article – I recommend you to read Justin’s tutorial if you need to understand any part of the code I’m posting below. Since I’m working on Theme Hybrid, which has a handful of widget-ready areas, I will no longer have to go through the process of making my child theme widget friendly.

The Widget – Loading Posts in a Category

I don’t have an official name for the widget – and I don’t have any intention to. There are too many plugins out there who offer a similar, or perhaps improved, functionality. What I’m presenting is a piece of code that you can simply put in your theme’s functions.php file without even needing to install a plugin or whatsoever.

Of course, if you want to hardcode it, it’s rather simple:

<?php $recent = new WP_Query("cat=[category_ID]&showposts=[integer]"); while($recent->have_posts()) : $recent->the_post();?>
<ul>
	<li><a href="<?php the_permalink() ?>" <?php the_title(); ?></a></li>
</ul>

Why do it the hard way?, you may ask. It’s simple – you don’t have to modify anything in your theme file in the future. Action and filter hooks have a special place in WordPress, which allows us to construct child themes from frameworks without needing to touch any of the core files at all – except for a single functions.php file in your child theme’s folder. When the framework is upgraded to a new version, one no longer needs to worry about porting the changes over to the new version, or go through the same mind-wrecking cycle of comparing new and old codes.

What the widget does is actually simple – to load posts from a specific category. You will enter the category ID and let the plugin do the crunching. Of course, more customization options are offered too. Just in case you’re curious, this is how the widget looks like in WP2.9:

WP Widget: Load posts in a category

WP Widget: Load posts in a category

The Code

Simply place the codes below sequentially into your theme’s functions.php file. After that, navigate to the widget page from your WP dashboard and you should see a new widget named “List Post in a Specific Category”. I think I heard a silent scream over the naming of the widget, but that’s the best the inner linguist in me can go. Go ahead and give it a new name if you feel like it.

Most of the code is modeled after Justin’s very helpful, heavily annotated example widget code. I have removed some of the comments (that’s why it’s better that you read his tutorial beforehand) for simplicity’s sake. The overall structure remains the same, except for the core functionality of the widget itself.

Add action hook

The first thing we need to do is to register the widget to a function, and then hook the function up with widgets_init.

// Load Custom Theme Widgets
function custom_widgets() {
	register_widget('posts_in_category');
}
add_action('widgets_init', 'custom_widgets');

Declaring a new widget

After adding the action hook, we will need to declare the new widget. We go through a few mandatory lines that describes the widget and assigns it a unique identifier. If you are intending to replace any of the variables, make sure to replicate the changes downstream as well – simply use the “Search and replace all” tool (or any equivalent) that will help you make global changes to the identifiers.

class posts_in_category extends WP_Widget {
 
	// Custom Theme Widget: Display posts from a specific category
	function posts_in_category() {
		$widget_ops = array( 'classname' => 'posts-in-category', 'description' => __('A widget that displays posts from a specific category', 'posts-in-category') );
		$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'posts-in-category-widget' );
		$this->WP_Widget( 'posts-in-category-widget', __('List Posts in a Specific Category', 'posts-in-category'), $widget_ops, $control_ops );
	}

Determine what will the widget display on screen

Of course, when your widget is activated, you would want to present saved data (if input from the user is allowed) in the widgetized area. We will declare 5 different variables, namely:

  1. $title – The title of the widget that will appear in the widgetized area, usually wrapped between header tags.
  2. $category_id – The ID of the category where posts will be fetched from.
  3. $post_count_limit – The maximum number of posts to be queried from the database and be displayed.
  4. $post_orderby – How do you want to arrange the posts in the list? By author, title, date, modified and etc. You will be given the option to choose.
  5. $post_offset – How many posts to skip/pass before displaying the first post.

For more information about the query_posts() function, you can refer to the WordPress codex.

To fetch the code, we will use the template tag get_posts() (how to use it?) to help to fetch posts from a specific category.

Don’t forget to wrap the displayed content between echo $before_widget; and echo $after_widget; – we do not define what wraps around the widget, because that is usually pre-determined by the theme in use already.

	// Displaying widget on screen
	function widget($args, $instance) {
		extract($args);
		$title = apply_filters('widget_title', $instance['title'] );
		$category_id = $instance['category_id'];
		$post_count_limit = $instance['post_count_limit'];
		$post_orderby = $instance['post_orderby'];
		$post_offset = $instance['post_offset'];
		echo $before_widget;
		if ($title) {
			echo $before_title . $title . $after_title;
		}
		$category_posts = get_posts('category=' . $category_id . '&numberposts=' . $post_count_limit . '&orderby=' . $post_orderby . '&offset= ' . $post_offset . '');
		if ($category_posts) {
			$category_posts_result .= '<ul>';
			foreach($category_posts as $post) {
				$category_posts_result .= '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
			}
			$category_posts_result .= '</ul>';
		}
		else {
			$category_posts_result .= "No posts found in this category";
		}
		echo $category_posts_result;
		echo $after_widget;
	}

Updating widget settings

We cannot forget that we’re allowing users to input the category IDs and other parameters in the widget from the dashboard. However, in order to allow changes to be made to the variables, we will have to allow them to update the widget parameters.

The strip_tags() function is used to remove any tags – we only want texts to be entered, not tags. The reason why post_orderby doesn’t need to be passed through the strip_tags() function is simply because it obtains its values from a dropdown list, which does not contain any tags at the first place.

	// Update widget settings
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['category_id'] = strip_tags($new_instance['category_id']);
		$instance['post_count_limit'] = strip_tags($new_instance['post_count_limit']);
		$instance['post_offset'] = strip_tags($new_instance['post_offset']);
		$instance['post_orderby'] = $new_instance['post_orderby'];
		return $instance;
	}

User input interface

In order for a user to enter specific parameters, we have to set up a user interface. The following piece of code simply sets up the input fields for the user – a few text inputs and a dropdown list.

	// Widget setting controls
	function form($instance) {
		$defaults = array('title' => __('Category Name', 'posts-in-category'), 'category_id' => __('1', 'posts-in-category'), 'post_count_limit' => __('5', 'posts-in-category'), 'post_orderby' => 'date', 'post_offset' => __('0', 'posts-in-category'));
		$instance = wp_parse_args((array) $instance, $defaults); ?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('category_id'); ?>"><?php _e('Category ID:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('category_id'); ?>" name="<?php echo $this->get_field_name('category_id'); ?>" value="<?php echo $instance['category_id']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_count_limit'); ?>"><?php _e('Post Count Limit:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('post_count_limit'); ?>" name="<?php echo $this->get_field_name('post_count_limit'); ?>" value="<?php echo $instance['post_count_limit']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_offset'); ?>"><?php _e('Offset:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('post_offset'); ?>" name="<?php echo $this->get_field_name('post_offset'); ?>" value="<?php echo $instance['post_offset']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_orderby'); ?>"><?php _e('Order Posts By:', 'posts-in-category'); ?></label>
			<select id="<?php echo $this->get_field_id('post_orderby'); ?>" name="<?php echo $this->get_field_name('post_orderby'); ?>" class="widefat" style="width:100%;">
				<option <?php if ( 'author' == $instance['format'] ) echo 'selected="selected"'; ?>>author</option>
				<option <?php if ( 'date' == $instance['format'] ) echo 'selected="selected"'; ?>>date</option>
				<option <?php if ( 'title' == $instance['format'] ) echo 'selected="selected"'; ?>>title</option>
				<option <?php if ( 'modified' == $instance['format'] ) echo 'selected="selected"'; ?>>modified</option>
				<option <?php if ( 'parent' == $instance['format'] ) echo 'selected="selected"'; ?>>parent</option>
				<option <?php if ( 'ID' == $instance['format'] ) echo 'selected="selected"'; ?>>ID</option>
				<option <?php if ( 'rand' == $instance['format'] ) echo 'selected="selected"'; ?>>rand</option>
			</select>
		</p>
 
	<?php
	}
}

The final code

I have also uploaded a copy of the entire piece of code. Simply download it, copy it in its entirety and paste in anywhere in your theme’s function.php file – okay, not really anywhere, but do stay within the <?php > tags that are found on the first and last line in the file.

Download: WP Widget - Posts in CategoryVersion 1.2 \ File size: 4.99 KB \ 721 downloadsA WordPress widget that allows you to load posts from a specific category with several other customizable parameters.

Last

If you have any problems regarding the widget, or any suggested improvements, feel free to reach me through the comments or the contact page. Thank you!

NTU HDR Photography

My summer vacation has official started. All will end on the 30th of August, so I have around three and a half month’s time to do whatever I want. Of course, I will be picking up design jobs (and perhaps some writing as well, given that I write on a whim) along the way and see how it goes. After a few weeks of work I finally completed the first mockup for my club’s new site design. The old website was in shambles and we needed a new face badly.

I’m barely into the second day at home and I’m missing Singapore a lot. I miss the freedom to leave my room anytime I want and roam the streets of Singapore, fearless. In Malaysia the situation is a little different, I will have to be more cautious when I’m out and will have to try avoid late night outs at all costs.

A few weeks back, I walked around my university in the evening. I was nearing the completion of my second academic year in my university and I simply could not believe that I’m already half way through now. Two more years down the road I will graduate, then toil and tumble in the real working world.

The HDR photos below are merged from photos of identical scenes taken at different exposure settings (with bracketed exposure option turned on). If you want to know how to create HDRs, read this tutorial.

School of Arts, Humanities and Social Sciences

School of Arts, Humanities and Social Sciences

School of Arts, Humanities and Social Sciences - Love the cuboidal structures.

School of Arts, Humanities and Social Sciences - Love the cuboidal structures.

The building that houses the school of humanities, arts and social sciences is the latest addition to the sprawling university campus. It has a minimalist touch to it, with a simple colour scheme of mainly black, white, grey and earthy tones. I haven’t got the chance to explore the building much, but when I visited my academic writing tutor in the building, the interiors were very simple too. Their carpet smells nice though.

The fountain plaza underneath the blue skies

The fountain plaza underneath the blue skies

This is the fountain that connects the north academic complex and the students services center. The latter is tucked behind the trees in the background so you can’t see it quite clearly. On clear warm days you would see the birds drinking from the fountain. How adorable :)

Outside the administration office

Outside the administration office

A wide avenue brings visitor to the academic complex and the Nanyang auditorium, as well as the carparks located in the north academic complex. When we have visitors from other institutions or nations visiting, their tour buses would line the avenue, adding more life and vibrancy to this quiet stretch of campus road. Except for main functions, this place is usually deserted of vehicular and human traffic.

If you’re interested to view more photos of NTU, you can browse the Photography category. I have also published two entires containing infrared photos taken on the campus too.

Have a great week ahead, folks!

Randomizing Images on Glider

Recently, a friend and reader of mine, Trina, asked me on Facebook on how did I manage to get the images you see in the current design’s header to load randomly upon page load. The images in the header are loaded into a glider container, which I used Glider.js to allow for smooth transitioning among the images.

In this tutorial, I will not be covering the details of constructing a glider groundup because that has been covered in a previous tutorial, Compacting contents using Glider script. I will be covering more on how we will be loading in images using php.

There are many other gallery/glider scripts that use different javascript libraries out there – Glider.js relies on scriptaculous and prototype, which I know have fallen out of favour as jQuery becomes more widely adopted. However, the basic construction remains the same and the steps below will still remain relevant to those using

Setting up the Glider

The basic construct of a typical glider will be as follow, according to the Glider tutorial:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">...</div>
  5. <div id="section2" class="section">...</div>
  6. <div id="section3" class="section">...</div>
  7. </div>
  8. </div>
  9. </div>
  10. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

Instead of placing texts within each individual sections in the previous tutorial, we will be inserting images into the <div> elements instead:

  1. <div id="glider">
  2. <div class="scroller">
  3. <div class="content">
  4. <div id="section1" class="section">
  5. <img src="..." alt="..." title="..." />
  6. </div>
  7. <div id="section2" class="section">
  8. <img src="..." alt="..." title="..." />
  9. </div>
  10. <div id="section3" class="section">
  11. <img src="..." alt="..." title="..." />
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

But then of course, we will be inserted images dynamically into the glider, and not by copy and pasting every single line. We will be using the for loop for this – keep this in view, we’ll come back to the for loop later.

Rotating the images

My strategy was very rudimentary and perhaps imperfect, so if you have any improvements, feel free to voice up in the comments section below. The strategy is simple – to ensure a wide variety of images, I cluster my images into different folders based on the theme. Let’s say we want to rotate photos of different types – architecture, food, street and people. I would love to display a random image from each type. What I do is to place the images in different folders located in a main folder called /gallery/ – let’s say 10 photos in a folder named /ach/ (so it’s location will be /gallery/ach/), and so on and so forth for the remaining categories.

Now we will need to make a request to the server as the page loads – asking it to serve us a random image from each category. This is achieved by using the lightweight 4kb image rotation script (view PHP source) written by Dan Benjamin for A List Apart. Place the file rotate.php into each folder, and when we load the PHP file as an image source, we will be served a random image by the php file, for example:

<img src="/ach/rotate.php" alt="Photo - Architecture" title="Photo - Architecture" />

However, we will also need to jumble up the sequence of which the category are loaded. Therefore, randomity of the images come in 2 forms – an image is randomly loaded from a category, and the order of the images are further randomized.

Jumbling up the order of images

What we need to do to jumble up the order of the image will be as follow:

  1. Create an array with a strings
  2. Shuffle the array so that each string will be called in random order
  3. Execute a for loop so that we run the loop as many times as the size of the array
  4. In the for loop, load rotate.php from each category folder

And the ideas above can be translated into php as seen below:

  1. <?php
  2. $gliderdata = array(
  3. 'ach|Architecture',
  4. 'fod|Food',
  5. 'str|Street'
  6. 'ppl|People',
  7. );
  8. shuffle($gliderdata);
  9. for ($i = 0; $i < count($gliderdata); $i++)
  10. {
  11. $gliderimg = explode('|', $gliderdata[$i]);
  12. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" /></div>';
  13. }
  14. ?>

In the for loop, what I did was to explode the string in $gliderdata with ‘|’ as the delimiter – for example, if we explode ach|Architecture, we will separate them into ach and Architecture – they will be referenced as $gliderimg[0] and $gliderimg[1] respectively.

After that, we will echo the individual sections of the glider which will house the image elements. The sections will be assigned a unique identifier, section'.($i+1).', will mean that for each iteration of the for loop, the identifier will reflect the number of iterations. The reason why $i+1 is used is because $i starts from zero but the section identifier has to start from “section1″ and more.

I have placed the /gallery/ folder into my WordPress theme folder, but of course you can use a static URL in its place. Instead of using '.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php, we can use http://yoursite.com/gallery'.$gliderimg[0].'/rotate.php. Remember that $gliderimg[0] refers to the name of the folder while $gliderimg[1] refers to the description.

In short, the elements in the array should be formatted with this in mind: '[foldername]|[description]',. Whenever you add a new directory to the gallery folder, remember to add a new line to the array with the new subfolder name and a description if you feel like it. Each subfolder should contain photos and the rotate.php file.

Final code

We compile everything together into a decent glider with does not only jumble the sequence of images, but also loads a random image from a folder.

  1. <div id="glider">
  2. <div class="scroller">
  3. <?php
  4. $gliderdata = array(
  5. 'ach|Architecture',
  6. 'fod|Food',
  7. 'str|Street'
  8. 'ppl|People',
  9. );
  10. shuffle($gliderdata);
  11. for ($i = 0; $i < count($gliderdata); $i++)
  12. {
  13. $gliderimg = explode('|', $gliderdata[$i]);
  14. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" width="270" height="180" /></div>';
  15. }
  16. ?>
  17. </div>
  18. </div>
  19. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

If you have any questions, feel free to contact me, or ask in the comments section.

Orchard Central Sky Garden

I’m finally back. After spending many nights toiling away on my desk with a mountainous, endless, bottomless pile of lecture notes and clearing all my papers, I have finally earned the right to get my normal life back. I realize that there’s some degree of time dilation during the examination period – my exams started on the 25th of March, a few days shy from the day two weeks ago. It only lasted 10 days for me, but it felt like forever.

Two weeks before the commencement of my exams, I traveled downtown to pick up some goods and passed Brenda her Threadless tee. Orchard Road was on my way so I decided to drop by Orchard Central to check out their sky garden. I have heard it from Ivy and Dayna about the place, and even read about it on a campus newspaper feature on sky greeneries in Singapore. I wanted to have a look for myself.

It turned out to be better than I have expected. In order to get all the way up there (it is located on the 11th floor), you will have to take a series of escalators up. Alternatively, if you’re the lazy one, there’s always the elevators waiting.

There sky garden actually spans two levels – the first level it shared the floor space with several restaurants, reducing it’s size to a small patch a grass with a few sculptures. Scaling a flight of starts hidden behind a green wall will bring you to the second level, which is home to waterfalls and ponds.

The following panoramas are made by stitching overlapping images on Hugin, and using a fisheye projection during mapping.

The Streets Below

The Streets Below

View from the second floor

View from the second floor

I am able to relate to Orchard Central sky garden very closely because of an architectural module I have taken in the previous semester, which is something about urban eco-architecture in Singapore context. I am very glad that more and more urban skyscrapers in Singapore are not only moving towards a more eco-friendly method of construction, but also to integrate the tropical garden feel into their design.

There were a few water lilies blooming in the pond and I took a handful of photos. Unable to decide among which one of them to use, I decided to combine them into one multiple-exposure shot:

Water lily

Water lily

I have a handful of photography and writing works which I have accumulated over the past month or so. I will be progressively releasing them, so do stay tuned for more updates!

Page 5 of 194« First...34567102030...Last »

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching Hilarious beer commercial. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence