Custom Cropping of Thumbnails with the Canvas WordPress Theme from Woothemes

Canvas is a powerful and flexible WordPress theme, from Woothemes. However the way it dynamically creates it’s own thumbnails can cause problems. 95% of the time the auto-cropping is fine. But 5% of the time the auto-cropping creates an unprofessional thumbnail that you need to replace.  Like this one:

canvas thumbnail problem1

Not a great look cutting off the guy’s head.

Not a problem I thought – I edit thumbnails all the time.  I’ll just change the cropping, save the updated thumbnail, and it will be fixed.  But when using Canvas it is not that easy. This is because Canvas ignores the thumbnails generated by WordPress core, and instead saves its own ones.

After six emails to Woothemes support desk, I still hadn’t found the answer.  But then I stumbled upon the solution and it is really quite simple.

Here’s a video explaining how to solve it:

 

Step-by-step instructions:

  1. Go to your media library and edit the thumbnail for the image you want to fix. The native WordPress editor is rather awkward.  If you want a good free solution I recommend Post Thumbnail Editor or Crop Thumbnails plugins.
  2. Go to Canvas > Theme Settings > Dynamic Images.
  3. Tick “TimThumb”, and leave the WP options ticked too.
  4. Now go and edit the post for which you wish to change the thumbnail.
  5. Click “Remove featured image” if you already have a featured image loaded.
  6. By ticking the TimThumb option in step 3 you now have some custom fields when editing a post, which enable you to choose a specific image for your thumbnail. It looks like this:
    timthumb1
  7. Click “Upload” then choose the “Previously Uploaded” or “Media Library” tabs.  Since you will probably have uploaded the image to this post already, it should be under the Previously Uploaded” tab.  If not, click on media library, find the image you want and click the “Show” link.
  8. Now you have two options for how to insert your desired thumbnail:

    Option 1:  Select “Thumbnail” and click “Use as Image”.

insert_thumbnail

This inserts the exact thumbnail you have edited.  The TimThumb (“General Settings”) section should now look like this: timthumb2

Update” your post and you’ll see the new thumbnail on your home page or archive list of posts.

OR

Option Two: Choose “Full Size” and “Use as Image”.

If you choose this option you next need to select a cropping alignment from the next dropdown. e.g. In this situation I would choose “Top” so that the image is cropped from the top, so the person’s face is in the thumbnail.

timthumb3

The end result is a thumbnail that looks great:

canvas thumbnail fixed1

 

This took a number of frustrating hours to work out, but then end solution is quite simple by following these steps.

 

No comments yet.

Leave a Reply

Powered by WordPress. Designed by Woo Themes