ColorLabs Set Image Crop Area

Hi all!

As you know, all ColorLabs Themes are using timthumb  as its image processors with name colabs_image. If you are take a look into TimThumb original script, you have a lot of options including where to crop the image.

Unfortunately, all images that processed with colabs_image are cropped from the center. The awkward moment is when you are uploading an image for your product, the image is about a model who is using your cloth or product and his/her head is missing.

I know, a lot of you want to have a perfect thumbnail where you can adjust it by yourself. At this post, i want to give you a simple trick about how to change the crop alignment while using ColorLabs themes.

You can modify a file named admin-functions.php. This file is a part of ColorLabs Framework, so you can find out this file via FTP at directory: wp-content > themes > your-themes > functions.

You can open the file and find out this code:

$img_link = '<img src="'. get_template_directory_uri(). '/functions/timthumb.php?src='. $custom_field .'&amp;w='. $width .'&amp;h='. $height .'&amp;zc=1&amp;q='. $quality . $alignment . '" alt="'.$alt.'" class="'. stripslashes($class) .'" '. $set_width . $set_height . ' />';

You can find out this code at line 413. You can modify that code become:

$img_link = '<img src="'. get_template_directory_uri(). '/functions/timthumb.php?src='. $custom_field .'&amp;w='. $width .'&amp;h='. $height .'&amp;a=t&amp;zc=1&amp;q='. $quality . $alignment . '" alt="'.$alt.'" class="'. stripslashes($class) .'" '. $set_width . $set_height . ' />';

if you are take a look closer into the modified code, i’m adding a little modification above:

&amp;a=t

That code means you are cropping the image from the top (a = t, alignment = top). You can also crop the image from any alignment, you can check the options below:

  • a=b (crop from bottom)
  • a=r (crop from right)

And that’s it.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s