Wordpress theme goes wider and bigger

I’m excited to announce another wave of updates for my dedicated photography blog! This time, there’s actually 2 updates to the theme.

Photo caption fix

First of all, it’s about a bug fix which is actually quite unnoticeable to the masses. There are 4 columns at the bottom of the homepage whereby 2 latest photos shown. The description of the photo has been made to be the same as what is displayed in the photo slide show / stream above. Primarily, we do not want to see “Click on the photo to see larger size” appears in the caption at the homepage which is ridiculously irrelevant, isn’t it? It’s only valid when user goes into the blog entry.

Expand blog entry

Secondly, it’s about serving better and wider range of photos.

Everything has gone wide these days seriously. You want wide wide highway to drive on to getting real big and wide screen display to play your HD videos. Heck, you can’t even buy a proper normal ratio (4:3 ratio with resolution like 1024×768, 800×600, 1280×1024) LCD panel on market as easily as 2 years ago now! Everything is wide, so do the photos and blogs. Okay, back to where we were.

For our case here, in particular, panorama. It’s a pain to the eyes when we are viewing something very wide like panorama like the scale of 5:1 (width:height). Just like the little long panoramic image that you are seeing above!

With just a click of button! Walah~

The blog entry content pane is widened to as much as the template permits. This has made photo viewing much much much more flexible and satisfying. Hope you all like this little update.

Technically, of course, for those who are interested to get wide too on their blog too, read on.

The idea is actually simple. I hide the sidebar and expand the content pane. Typically, most of the blogs run on two column template whereby the first is for the content and the second one is for the sidebar.

We will focus on the left (content) and the right (sidebar) column. Here’s one live example to demo on.

The left column has the id of “leftSample” and the sidebar on the right has the id of “rightSample“.

Try to hit the Expand/Contract link above and see it happens!

And of course, the coding…

//check if the left column is expanded
if(document.getElementById('leftSample').style.width = '300px';){
	//hide the sidebar
	document.getElementById('rightSample').style.display = 'none';
	//expand the content
	document.getElementById('leftSample').style.width = '480px';
}else{
	//show the sidebar
	document.getElementById('rightSample').style.display = 'block';
	//reduce the content's width
	document.getElementById('leftSample').style.width = '300px';
}

That’s the rough idea real Quick and dirty! Go figure!

PS: Endless possibilities, just to name one. You may, of course, make use of the eye-candy-ness of JQuery to make all sorts of sliding and hiding effect.

Popularity: 15% [?]