Five months ago when I decided to go about a much-needed redesign of my portfolio site, I didn't expect it to be nearly as difficult or take as much time as it has. Fortunately, it became much more of a priority when I parted ways with MediaSauce at the end of October. I also needed to write some good articles for the new blog in addition to basically generating all new content for the site.

When I looked at my old site I saw something that hadn't really been updated in 2 years. It also didn't portray what I wanted to show as my online presence or how I'd grown personally and professionally since graduating. This is the 2nd version of my portfolio and I decided to switch directions from the dark design of version 1 to something light and simple. Most of the portfolio work is from projects I've worked on in the last 2 years while working at Hirons & Company and MediaSauce.

Over the next several months, I will be continuing to make slight design changes and tweaks to enhance the site, for example, using TypeKit for the some of the headings. For now, take a look around and let me know what you think!

If you'd like to know more about the technologies behind the site, check out the About page.

For those of you that don't know, ExpressionEngine's ImageSizer Plugin is awesome. Anytime you have a client that will be uploading content images to a site that need to be certain dimensions this plugin is crucial. It will dynamically resize the image to whatever dimensions you need, and even cache the resized image for you. Also, if you specify a width and a height for the image in the plugin parameters, and the source's dimensions are different, it will even crop the image for you. This is great, but it also has a downside.

By default, the plugin will crop the image to the specified width and height from the center of the image. This works great in some cases, but recently (on this site actually) I wanted the plugin to crop my images from the top of the image. This, for example, would be desirable if web screenshots were going to be uploaded and used.

I would've expected this to be a simple parameter passed to the plugin, but unfortunately, it wasn't. I decided to take matters into my own hands and popped open the plugin code. Around line 595 I found this:

if ($crop) 
{   
	imagecopyresampled($image_resized, $image, -$int_width, -$int_height, 0, 0, $adjusted_width, $adjusted_height, $width_old, $height_old);
}

Now to Crop from the Top

I quickly diagnosed that the -$int_height variable was forcing the crop from the center. Changing that variable to a 0 would have the plugin cropping from the top. Here's the code with the change:

if ($crop) 
{   
	imagecopyresampled($image_resized, $image, -$int_width, 0, 0, 0, $adjusted_width, $adjusted_height, $width_old, $height_old);
}

You could also have the plugin crop from the top left corner if you also changed the -$int_width variable to 0. Ideally, you could make some updates to the plugin to pass in a crop_from parameter and have it accept a "topleft", "topcenter", "topright", "bottomleft", "bottomcenter", "bottomright", or "center" string.

One common thing that most developers will want to do when creating a web application with CodeIgniter is to give their users the ability to upload a profile image. Your code should be able to resize that profile image to the standard size that your design calls for. CodeIgniter provides two great classes to help make this a piece of cake.

The two library classes we will be working with are the File Uploading and Image Manipulation classes. With these two classes and the CodeIgniter User Guide you can probably figure out most of what you need, but I'll make it even easier for you. First, we will start with what you need in the View. This will create your file upload field:

The View

$Fdata = array('name' => 'user_avatar', 'class' => 'file');
echo form_upload($Fdata);

Also, make sure your form is using 'form_open_multipart'. Now we will move on to the Controller, where the bulk of the code is. The process here is to configure the upload, do the upload, configure the image resizing and then do the image resize. Here's what you should end up with:

The Controller

if($_FILES['user_avatar']['error'] == 0){
	//upload and update the file
	$config['upload_path'] = './images/profile/';
	$config['allowed_types'] = 'gif|jpg|png';
	$config['overwrite'] = false;
	$config['remove_spaces'] = true;
	//$config['max_size']	= '100';// in KB
	
	$this->load->library('upload', $config);

	if ( ! $this->upload->do_upload('user_avatar'))
	{
		$this->session->set_flashdata('message', $this->upload->display_errors('
', '
'));
		redirect('profile');
	}	
	else
	{
		//Image Resizing
		$config['source_image'] = $this->upload->upload_path.$this->upload->file_name;
		$config['maintain_ratio'] = FALSE;
		$config['width'] = 40;
		$config['height'] = 40;

		$this->load->library('image_lib', $config);

		if ( ! $this->image_lib->resize()){
			$this->session->set_flashdata('message', $this->image_lib->display_errors('
', '
'));				
		}
		
		$this->MUser->updateProfile($this->input->post('user_id'));
		//Need to update the session information if email was changed
		$this->session->set_userdata('email', $this->input->xss_clean($this->input->post('user_email')));
		$this->session->set_flashdata('message', '
Your Profile has been Updated!
');
		redirect('profile');
	}
}

You may need to make some changes to a couple of the configuration options to get what you want. You'll also notice at the bottom that I update some of my user session information afterwards. Next up, we'll handle the updateProfile function within the User Model. This part is pretty simple:

The Model

function updateProfile($user_id){
	$profile_data = array(
	'name' => $this->input->xss_clean($this->input->post('user_name')),
	'email' => $this->input->xss_clean($this->input->post('user_email')),
	'role' => $this->input->xss_clean($this->input->post('user_role')),
	'website' => $this->input->xss_clean($this->input->post('user_website'))
	);
	//check if password was updated
	if($this->input->post('user_password') != ''){
		$profile_data['password'] = md5($this->input->xss_clean($this->input->post('user_password')));
	}
	if($_FILES['user_avatar']['error'] == 0){
		$relative_url = 'images/profile/'.$this->upload->file_name;
		$profile_data['avatar'] = $relative_url;
	}
	$this->db->where('id', $user_id);
	$this->db->update('user', $profile_data);
}

Normally you would want your path to pull from the configuration options you set using $upload['full_path'], but for some reason I've had issues pulling that data from the upload.

Back when I was working with ExpressionEngine on the NIC Indy website, I needed to display custom member data fields in the member directory list. I actually found it quite surprising that ExpressionEngine didn't already have an option that allowed you to do this. After some fiddling around with the "memberlist" function, I found a pretty quick and simple way to make this happen.

First of all, you will need to open up the mod.member_memberlist.php file. It will be in the Member Management module, usually located here: "/system/modules/member". Go down to around line number 510. It should look something like this:

Before

$f_sql="SELECT m.member_id, m.username, m.screen_name, m.email, m.url, m.location, m.icq, m.aol_im, m.yahoo_im, m.msn_im, m.location, m.join_date, m.last_visit, m.last_activity, m.last_entry_date, m.last_comment_date, m.last_forum_post_date, m.total_entries, m.total_comments, m.total_forum_topics, m.total_forum_posts, m.language, m.timezone, m.daylight_savings, m.bday_d, m.bday_m, m.bday_y, m.accept_user_email, m.avatar_filename, m.avatar_width, m.avatar_height, (m.total_forum_topics + m.total_forum_posts) AS total_posts, g.group_title ";		
$p_sql="SELECT COUNT(member_id) AS count ";
$sql="FROM exp_members m, exp_member_groups g 
WHERE m.group_id = g.group_id 
AND g.group_id != '3' 
AND g.group_id != '4' 
AND g.site_id = '".$DB->escape_str($PREFS->ini('site_id'))."'
AND g.include_in_memberlist = 'y' ";

You will be adding to these SQL select statements so that it also pulls from the exp_member_data table. Here is what you'll need to change the SQL statements to:

After

$f_sql="SELECT m.member_id, m.username, m.screen_name, m.email, m.url, m.location, m.icq, m.aol_im, m.yahoo_im, m.msn_im, m.location, m.join_date, m.last_visit, m.last_activity, m.last_entry_date, m.last_comment_date, m.last_forum_post_date, m.total_entries, m.total_comments, m.total_forum_topics, m.total_forum_posts, m.language, m.timezone, m.daylight_savings, m.bday_d, m.bday_m, m.bday_y, m.accept_user_email, m.avatar_filename, m.avatar_width, m.avatar_height, (m.total_forum_topics + m.total_forum_posts) AS total_posts, g.group_title, md.m_field_id_1, md.m_field_id_2, md.m_field_id_3, md.m_field_id_4, md.m_field_id_5, md.m_field_id_6, md.m_field_id_7, md.m_field_id_8, md.m_field_id_9, md.m_field_id_10, md.m_field_id_11, md.m_field_id_12, md.m_field_id_13, md.m_field_id_14 ";       
$p_sql="SELECT COUNT(m.member_id) AS count ";
$sql="FROM exp_members m, exp_member_groups g, exp_member_data md 
WHERE m.group_id = g.group_id 
AND m.member_id = md.member_id 
AND g.group_id != '3' 
AND g.group_id != '4' 
AND g.site_id = '".$DB->escape_str($PREFS->ini('site_id'))."'
AND g.include_in_memberlist = 'y' ";

The important changes here are on lines 1, 3 and 5. Unfortunately, you will need to manually add as many "m_field_id_x"s for as many custom member fields that have been created.

Now to Display the Custom Fields

To display the newly selected custom fields on the front-end of the member list, you will need to edit the Member Templates. You can do this in the Control Panel by going to your Member Profile Theme and finding the Member List Rows template. You can display the custom member fields simply by using the normal ExpressionEngine template tags like this - {m_field_id_x} - replacing "x" with whichever member profile field you want. Here is a section of mine:

<ul>
    <li><h6>Contact Information</h6></li>
    <li>title: <span>{m_field_id_8}</span></li>
    <li>phone: <span>{m_field_id_5}</span></li>
</ul>

That's pretty much it. The only bad thing here is if Custom Member Fields are ever added you will also need to add them to the SQL statement.

The Result

As you can see from the image below, I was able to pull out the data I needed for the directory from these custom member fields.

A very common thing I see in designs I get these days are form labels that are written within the value of their associated input field. This is handy way for designers to save space and make their designs cleaner all-around. Unfortunately for us developers, simply setting the input value isn't very semantic or usable. Thanks to JQuery there's plenty of easy ways to take care of this.

The HTML

We'll start with the HTML. Nothing fancy here, just your standard form with labels and inputs.

<form id="signup" name="signup">
	<label for="email">Email Address</label>
	<input class="text" name="email" type="text" />
	<label for="zip">Zip Code</label>
	<input class="text zip" name="zip" type="text" />
	<input class="btn" type="submit" value="Sign Up" />
</form>

The CSS isn't important at all to what we're trying to accomplish, so I won't cover any of that. The JQuery on the other hand, is what does most of the work. First of all, we will want to loop through our label elements and assign their values to the inputs that immediately follow. Then you'll want to hide those labels. After that, we will handle the focus and blur events to get rid of those values when people click the form input. Here's the JQuery:

The JQuery

$(document).ready(function() {
    $("#signup label").each(function (i) {
        $(this).next("input").attr("value",$(this).html()+"...");
        $(this).hide();
    });
    $("#signup input").focus(function() {
        if($(this).prev("label").html()+"..." == this.value){
            this.value = "";
        }
    });
    $("#signup input").blur(function() {
        if(this.value == ""){
            this.value = $(this).prev("label").html()+"...";
        }
    });
});

Now this is by no means is a new or innovative technique. There are plenty of solutions out there that will accomplish the same goal. This tip is simply what I tend to use to sematically code the designs I get.

Update (12-18-2009): Smashing Magazine recently published an article by Zurb called Stronger, Better, Faster Design with CSS3 that expands on this technique and makes it even better with CSS3 by just masking the label so even when you click into the input you can still read the label.