Placing Thumbnails in the Loop: The Old Method

If you’re familiar with the original Mimbo, you’ll already know how custom fields are used to associate thumbnail images with posts. Essentially, your posts are queried via the Loop, and if the custom field Key (”Image”) has a value, that value is fed into an <img> tag. The free version of Mimbo displays it like this:

<?php
//Check if custom field key "Image" has a value
$values = get_post_custom_values("Image");
if (isset($values[0])) {
?>
<img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" />
<?php } ?>

The resulting image path looks like this.

The New Method

One big change we made with Mimbo Pro was relying on Worpdress’s image upload tool rather than FTP, so that you can configure your own /upload/ folder and copy the path easily. Once you’ve uploaded an image, you click ‘Edit’…

… and copy the path…

…and then paste its value alongside a Key you’ve created called “Image”:

After that, you’re ready to publish. See also the video tutorial.

Note: If Mimbo Pro is not installed in the root of your site, you may have to alter that image path so the thumb script can find it.

How do the images Get Re-sized?

In the past, users had to manually crop and resize images with image-edit software. Mimbo Pro comes with an open-source script called TimThumb which resizes images on the fly. Throughout the theme, you’ll see code like this:

<?php
//Check if custom field key "Image" has a value
$values = get_post_custom_values("Image");
if (isset($values[0])) {
?>
<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=150&h=175&zc=1"
alt="<?php the_title(); ?>" />
<?php } ?>

The resulting image path looks like this. Tip: depending on your encoding, you’ll need to use the character entity reference ‘&amp;’ instead of ‘&’ to validate your pages properly.

How Else is it Used?

The image gallery packaged with Mimbo Pro works on this same logic — it loops through posts, determines if there is custom-field data, and if so, publishes the last 12 posts, aka, images. It’s not a traditional thumbnail gallery meant for viewing different sizes, but more like a visual way of navigating the archives.

Additionally, the search template checks for custom fields when it returns results. For me, the inclusion of images helps to jog the memory when searching for something I can’t remember well.

Next tutorial, I’ll cover the code that displays category archives chronologically in three different styles. This keeps your archives from being a flat, linear list, and treats them more like a section ‘homepage’, ala the New York Times‘ Sports page.

Popularity: 2% [?]