Archives for 2011

December 31, 2011

2011 In Review

According to WordPress, I wrote a total of 190 posts in 2011. To see all the articles written in 2011, simply access:

http://ulyssesonline.com/2011/

This feature is possible using one of the nicest features in WordPress called permalinks, which is short for permanent links. With permalinks, you can customize your own URL structure the way you want it. I happen to use this format:

http://ulyssesonline.com/%year%/%monthnum%/%day%/%postname%/

which makes it easier for me to display articles by year, month and day. To access all articles written in 2011, I just provide the year and all articles written in 2011 will be displayed. Most WordPress users already use permalinks.

If you are not, do it early. Over the years, you’ll see the benefit of using such a structure.

December 31, 2011

Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

December 29, 2011

CodeIgniter Form_Dropdown

I had a little problem using CodeIgniter’s form_dropdown the other day. Form_dropdown produces an output similar to HTML’s form select option. I was trying to retrieve data queried from a database and display the result in a form. Well, after several test and trials, I finally got the script to work. Here’s how I did it.

Form_Dropdown

The form_dropdown function typically has 3 options. The first option is the fieldname. The second option is the option data usually laid out in an array. The third is the selected data.

form_dropdown(‘name’, array(’1?=>’one’,’2?=>’two’,’3?=>’three’),1);

This produces:

<select name=’name’>
<option value=”1? selected=”selected”>One</option>
<option value=”2?>Two</option>
<option value=”3?>Three</option>
</select>

CodeIgniter

In CodeIgniter, I have a simple script that stores bookmarks. I categorize my bookmarks using tags. When adding bookmarks, I call on the get_dropdown_tags function in Models to retrieve all the tags and display them in array that I can use with form_dropdown. Here are my CodeIgniter entries.

Controller:

$data['tags'] = $this-&gt;links_model-&gt;get_dropdown_tags();

Models:

function get_dropdown_tags() {
  $tags = $this-&gt;db-&gt;query('select distinct tag from links');
  $dropdowns = $tags-&gt;result();
  foreach ($dropdowns as $dropdown) {
    $dropdownlist[$dropdown-&gt;tag] = $dropdown-&gt;tag;
  }
  $finaldropdown = $dropdownlist;
  return $finaldropdown;
}

Views:

In views, I’m simply calling the form_dropdown function using the $tags array passed on by the controller. It’s a pretty neat way to recall data from a database and outputting them in form_dropdown.

<?=form_dropdown(‘tag’,$tags);?>

Finally, a dropdown list that works.