Wednesday, March 24, 2010

Spring is Coming

[caption id="attachment_56" align="aligncenter" width="610" caption="Early Cherry Blossoms"][/caption]

Info: Info: Canon 5D Mark II - 1/3200 at f2.8, ISO 100, EF 50mm f1.4, with Lightroom adjustment exposure +1.4.

Similar to the previous photo with the same exposure issue but with the help of lightroom the problem was easily corrected.  Curiously enough this was taken at a garden center nearby and with the few plants that they had this cherry blossom bloomed way before the daffodils and any other plant that was within the center.

Monday, March 22, 2010

Early Spring

[caption id="attachment_52" align="aligncenter" width="410" caption="Early Cherry Blossoms"][/caption]

Info: Canon 5D Mark II - 1/3200 at f2.8, ISO 100, EF 50mm f1.4, with Lightroom adjustment exposure +1.


I spent much of my weekend driving around the area to enjoy the beautiful weather and checking out what spring has in store for me.  With the above image, I was wearing my shades and the sun light was much brighter than I was used to hence my exposure was one stop darker.  I took many more spring photos that I will post one at time as the weather gets warmer and warmer.

Thursday, March 18, 2010

Winter 2009 Snow

[caption id="attachment_44" align="aligncenter" width="610" caption="winter 2009 snow"][/caption]


I took this photo during the first snow storm in Dec 2009.  I was walking down braddock road and was just amazed at how everything have been covered in snow.  I wasn't able to catch much of what I saw but this is a relatively close approximation of it.

Info: Canon 5D Mark II. 1/200 sec at f8.0 ISO 100, 24mm (EF24-70mm)

Monday, March 15, 2010

Displaying HTML Source Code in Blog Post

From the previous post I had a hard time displaying the HTML code that I was using.  Of course initially I thought I could easily just do a plug and code but I made two mistakes.

First mistake was that it would be easier if I plug the code into the WordPress text editor and it would convert the code for me and not interpret the code.  The other is that display was ugly.

To resolve this situation use the following HTML tags:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>


<code>
This will not preserve spacing or formatting and display text as is.
</code>


W3School is great for all of this HTML code and CSS reference.

If you're not using WordPress and just want to display HTML code without it being interpreted you will need something to recode those special characters and symbols. I found this neat site that will convert it for you.

Lazy Load for Images

For those of you who have gone to through some photo blogs and wondered how they got the images to load as you scroll.  At first I thought it was some ajax event where it would fetch the photo as you scroll but it's even easier than that.  Lazy Load event with the use of JQuery plug-in.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="/javascripts/jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

$(function() {

$("img").lazyload({placeholder : "/img/grey.gif"});

});

</script>

Here is what you need to do step by step with the help of WordPress or text editor.

  1. In WordPress to go Appearance, and click on the Editor link

  2. On the theme file listing on the right of screen select Header (header.php)

  3. Copy the above code and paste it into the header file within the <header> </header> tag, e.g. paste it below the <link rel="stylesheet" src="..." /> tag is what I did for mine.

  4. Download the JQuery.Lazyload.js file from here or here. Upload it to your website.

  5. Change the src of where your JQuery.Lazyload.js is located above. this is what mine looks like
    <script src="http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/javascripts/jquery.lazyload.js" type="text/javascript"></script>


  6. That should be it when you are done this is what it should look like in your header.php file
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11">

    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    <script src="http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/javascripts/jquery.lazyload.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">

    $(function() {

    $("img").lazyload({placeholder : "http://blog.tnguyen.com/wp-content/plugins/jquery-image-lazy-loading/img/grey.gif"});

    });

    </script>
    </head>


  7. Hit the "Update File" button and check out your website to see if Lazy Load is not working

  8. If nothing works comment below.


The reason why I'm blogging about this is that it took me a few days to figure this out.  With so many people using this lazy load method very few website showed how to get it work properly.  I had a WordPress Plug-in that does this but it did not work for me.  There were so many reasons but I surmise it had something to do with the JQuery file itself.  This is one method that I've found to work for me.

To give credit where credit is due the main source of all of this came from Mika Tuupola.

Saturday, March 13, 2010

Wordpress Aligncenter

I've been trying to update my other blog  - Through the Eye Piece - and for a while I've been running into issues aligning my images to center them.  I was using an old theme that I've tweaked to layout the way I wanted but with so many CSS changes I never got around to fixing my image alignment until now.  With the help of Firefox plugin called Firebug, I was able to track down the align class that wordpress assigned to the image and then checked my CSS to see if it's there.  Firebug with it's grace and awesome functionality showed me that I had no aligncenter CSS associated with this image.  I googled search and found the following CSS post on Wordpress Codex that resolved the problem.  Since this was an old wordpress theme some CSS was missing but luckily it was an easy fix.  It also incidentally resolved another quirk I was running into, the caption for the images was not showing up.

To make it easier for everyone you can just past the following into your stylesheet and it should resolve your alignment issue along with your caption issue too.
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Now the next problem to battle, lazy load my long image posts.

Friday, March 12, 2010

Hello world!

It's good to be back online again!!!

It's been a couple of years since I've last blog anything about my daily life but I will continue it once more.  However, before I begin this will be unlike my previous blog where I will rant about nonsense, I would like this blog to be more purposeful, so that it can be considered a resource for things that I'm interested in.  If I learn something new that I think would be of interest I will share it with everyone.  I'll try to be as detailed as possible and make it as easy to understand.  Another thing that I shall try to do is blog more often and share some of the my photos.

That's it for today!