Thesis Tip #1 – Custom Images and Category Pages

by Bill on July 26, 2009

Post image for Thesis Tip #1 – Custom Images and Category Pages

As I’ve been working with Thesis a lot lately, I thought it would be a good idea to start posting some tips for customizing it. If you need help with Thesis or Wordpress, please review my Wordpress Consulting page.

1. Custom Use of Post Image and Thumbnails
Thesis has a great tool for adding images to posts, and when making customizations you might need to access those images. Thesis stores the URL for the post image in a custom field titled thesis_post_image, so assign it to a variable like this:


global $post;
$post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);

You can then use $post_image to plug the image url where you want it, like :


<a href="<?php the_permalink() ?>"><img src="<?php echo $post_image ?>" alt="" /></a>

If you would like to use a thumbnail of this image, you’ll need to use the thumb.php script included with Thesis (found in /lib/scripts/thumb.php). There’s five parameters you can use:

  • src= url to the image
  • w= the width of your thumbnail
  • h= the height of your thumbnail
  • zc= whether it should zoom (0) or crop (1) the original image
  • q= quality, the default is 75 and max is 100

To make a thumbnail, you simply link to thumb.php script and include the parameters. Here’s an example:

<img src="<?php bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo $post_image ?>&w=66&h=66&zc=1&q=100" width="66" height="66" alt="Thumbnail image for <?php echo $post->post_title ?>" />

The red part is the link to the thumb.php script, the green is the link to the original image, and blue is the other four parameters defining the thumbnail.

2. Displaying Category Posts on a page

United4Iran.org organized events in over 100 cities, and created a page for each city with relevant information. They wanted a way to show relevant posts on those pages (we define “relevant posts” as posts in a certain category; posts for the Austin, TX page are in the “austin” category). We used a custom function so Thesis could be updated in the future without causing problems to our customizations.

When the client wants to add a post category to a page, he simply adds the category ID to the page’s custom field called custom_cat_page. The page will then list the 10 most recent posts from those post categories, and provide a link to the archive page for more.

I’ll work through the custom function, detailing what each part does (the parts beginning “//” are my comments).

function custom_cat_page() {
global $post;
$temp_query = $post;
// This loads the data on the current post and saves it in $temp_query (so we can get it later)
$postID = $post->ID;
$custom_cat = get_post_meta($postID, 'custom_cat_page',$single=true);
// Save the custom field 'custom_cat_page' to $custom_cat
if($custom_cat){
// If the custom field is in use...
?><?php
$posts = new WP_Query('cat='.$custom_cat.'&showposts=10');
// Get the 10 most recent posts from the specified categories
while ($posts->have_posts()) : $posts->the_post();
?>
<h3><a href="<?php the_permalink() ?>"><?php echo $post->post_title ?></a></h3>

<?php the_excerpt();
// Show the post title and excerpt.
endwhile;
?>
<p><a href="/?cat=<?php echo $custom_cat;?>">View the Archives</a></p>
// Link to the archives page for the categories
<?php
$post = $temp_query;
// Reset $post back to its original content
}
?>
<?php
}
add_action('thesis_hook_after_post','custom_cat_page');
// Add this function after the page's content

All Thesis Tips:

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

{ 15 comments… read them below or add one }

Nick Soper August 11, 2009 at 1:27 pm

Is it possible to use the Thumb.php to scale an image with a set width and then have Thumb.php to automatically work out the height to keep the aspect ratio in tact?

eg. If you scale a tall photo to 300px wide, it stays tall, and if you scale a landscape photo to 300px wide is it not as tall, but both images stay proportional and are both 300px wide.

Thanks Bill!

Reply

Douglas September 12, 2009 at 10:45 pm

My thumb.php does not work at all – in fact it doesn't display any image whatsoever when used.

I'm using the following link and it's not displaying any image at all.

http://mysite.com/wp-content/themes/thesis/lib/sc...

Any ideas?

Reply

Douglas September 13, 2009 at 12:20 pm

Actually, I only get this problem when using Google Chrome – FF, Safari and IE work alright.

Reply

Douglas September 13, 2009 at 12:20 pm

Actually, I only get this problem when using Google Chrome – FF, Safari and IE work alright.

Reply

RookieMom Whitney October 16, 2009 at 6:45 pm

None of my thumbnails are loading and I'm mystified. I'm not trying to do anything fancy – I just want thumbnails on my archive page. We have set up a sandbox version of my site where I am trying to work this out. Any tips would be tremendously appreciated.

The alt text is showing and the space is reserved in the layout, but the image itself is not loading.

(See category page: http://sandbox.rookiemoms.com/categories/craft/)

Reply

Gigi Gerow October 29, 2009 at 5:31 pm

In the code for the post category page…I would like to sort the posts by the title…I know that somewhere
I need to add &orderby=ASC…I just can't quite figure it out.

Thank you for the information. It is very useful.

Reply

Alberg January 7, 2010 at 11:17 pm

HI Bill.

Thanks for the tutorial on FCG. I am trying to use the gallery to replace the Thesis multimedia box, so that I can store a dozen images in it, and have them auto rotate. I'd like that to appear on all pages on the site. Any thoughts on how to do that? And one thing I may not be getting – do I have to create a seperate post or page for each image that I want in the gallery? This is different from how I populate the multimedia box – by just dropping images in a folder. Am I missing something? Thanks, Alan

Reply

Bill Erickson January 9, 2010 at 6:57 am

Yes, you'll need to create a separate post or page for each image. This is really designed as a way of highlighting your posts or pages, not to just display images.

If you just want images, google for a jquery image rotator code, then drop that in the custom functions file instead of FCP. You could also use Slideshow Pro (that's what I used on bilpil.com )

Reply

Bill Erickson August 11, 2009 at 1:56 pm

Good question! Yes, if you set only a width (or height), it will automatically scale the other dimension correctly.

Reply

Nick Soper August 11, 2009 at 4:54 pm

It's worth remember you will need the latest version of Thumb.php for this to work. It's funny how the littlest thing can get you stumped.

Reply

Bill Erickson September 13, 2009 at 2:37 pm

Not sure what's causing it if it works in everything but Google Chrome. I'm using Chrome right now and the thumbnails on my site work just fine.

Reply

Douglas September 26, 2009 at 1:46 pm

As a matter of fact, some thumbnails do load correctly but some don't. I've tried to find a pattern but I've failed. Do you have any idea? As this Thesis license isn't mine I am unable to look at the DYI forums, could anyone perhaps have a quick look over there?

Reply

Douglas September 26, 2009 at 1:50 pm

Interesting, I've found that I am not the only one having problems with this. The error goes way back to the PHP class Thesis uses to display its thumbnails, Timthumb.
http://code.google.com/p/timthumb/issues/detail?i...

Sorry for going way off-topic here. I shall pursue my struggle over there instead :) .

Reply

Bill Erickson October 29, 2009 at 8:27 pm

All you have to do is change this:
$posts = new WP_Query('cat='.$custom_cat.'&showposts=10');

to this:
$posts = new WP_Query('cat='.$custom_cat.'&showposts=10&orderby=ASC');

Reply

Gigi Gerow November 2, 2009 at 4:32 pm

Hey Bill…thanks for the quick reply.
That didn't quite work….but it pointed me in the right direction.
Here's what worked for me…. I had to add =title&order=ASC

$posts = new WP_Query('cat='.$custom_cat.'&showposts=40&orderby=title&order=ASC');

Thanks again.

Reply

Leave a Comment

Previous:

Next: