Subscribe to Articles

 

Using AutoBlogged with TimThumb and Premium Themes

Category: Images and Videos Tags: images, Themes, thumbnails, thumbs, timthumb, viva

Feb 20, 2010

AutoBlogged has a built-in thumbnail feature that automatically creates thumbnails for images in posts. However, a number of premium themes use their own scripts such as TimThumb or Viva Thumbs for handling thumbnails. Because these scripts often use the same custom WordPress fields that AutoBlogged uses, you will sometimes see HTML code or an error message in place of the thumbnail image.

AutoBlogged automatically adds the custom fields image and thumbnail that contain the HTML IMG tag to display the image. However, some themes or thumbnail plugins also uses this custom field but expect it to contain a relative path to the image file.

For example, the image custom field might contain something like this:

<img src=”http://example.com/wp-content/uploads/2010/02/xxxxxxxxxx.jpg” />

But your theme expects to see something like this:

/wp-content/uploads/2010/02/xxxxxxxxxx.jpg

Using the AutoBlogged custom fields feature you can easily change the format of the image or thumbnail custom fields to provide the image format you need. You may need to review the documentation for the theme or script to determine which custom field name it is looking for and how it wants image paths formatted.

Using Custom Fields

Depending on how your theme or thumbnail script expects to see the image path, you can use different custom field settings. Below are the three most common cases we see.

Note that depending on your theme or script, you may need to use a different custom field name such as Image, Thumbnail, etc. Keep in mind that in WordPress, case is important so a field named image is not the same as one named Image.

1. The script expects a full HTTP URL to the image

Set up a custom field with these values:

Custom Field: image

Custom Field Value: %image_url%


2. The script expects a file path relative to your web root

First, check the feed setting Save local copies of all images in the feed and uncheck the setting Create local thumbnails for each image. Then set up a custom field with these values:

Custom Field: image

Custom Field Value: %image_path%


3. The script expects a file path relative to the WordPress uploads directory:

First, check the feed setting Save local copies of all images in the feed and uncheck the setting Create local thumbnails for each image.

Next, set up a search and replace with these values:

Search for: /wp-content/uploads/

Replace with:  /

Then set up a custom field with these values:

Custom Field: image

Custom Field Value: %image_path%


The Custom Field Value uses the same syntax as post templates, so you can use any variable that you would use there. Here are the image-related variables available:

%image% – The full HTML IMG tag to display an image, for example <img src=”http://farm3.static.flickr.com/2712/xxxxxxxx.jpg” />

%image_url% – The full URL to the image, for example http://farm3.static.flickr.com/2712/xxxxxxxx.jpg

%image_path% – The relative path to the image, normally useful only if you cache images locally, for example /wp-content/uploads/2010/02/xxxxx-150×93.jpg

%thumbnail% – The full HTML IMG tag to display the locally created image thumbnail, for example <img src=”http://example.com/wp-content/uploads/2010/02/xxxxx-150×93.jpg” />

%thumbnail_url% – The full URL to the thumbnail, for example http://example.com/wp-content/uploads/2010/02/xxxxx-150×93.jpg

%thumbnail_path% – The relative path to the thumbnail, normally useful only if you cache images locally, for example /wp-content/uploads/2010/02/xxxxx-150×93.jpg

If you come across any situations where you need to set up custom fields to get your theme or plugins to work correctly, we’d like to hear about them in the comments below.


Share:
image image image image image image

Comments

AutoBlogged Support

February 20th, 2010 at 6:10 pm

For most WooThemes themes we haven’t explicitly added support for, use example #2 above.


Comment Form

Print This Post Print This Post