Pro Blog Design

Automatically grabbing thumbnails from posts is cool. But what about automatic excerpt lengths that match the height of those photos?

I recently redesigned a blog for a client and it had an automatic thumbnail for each post, with a fixed length excerpt beside it. It was okay, but our client didn’t like the fact that it was “cutting” his pictures off sometimes. Our goal then had 3 steps:

• 1 – To set a thumbnail’s height proportional to the original picture, so that we would not cut parts of it off.
• 2 – Use this height value to display excerpts about the same size.
• 3 – Set up an automatic Lightbox on images that are too large for the content area.

Of course all of this had to be automatic, custom fields are cool for us designers/programmers, but for clients it’s too much hassle.

That’s what I’m going to teach you to do in this post.

NB – This is going to get quite technical; you’ll need to have had some experience editing theme files before, and a little HTML/CSS.

Examples

Let’s start with an example of exactly what we are going to be done. Check out the screenshot below, or see the demo site (Notice how each excerpt is a different length, depending on the thumbnail?).

And here, is an example of the automatic lightbox effect.

All good now? Okay, let’s see how it goes.

The last thing to note; this whole process is based on Fikri Rasyid’s post here at Pro Blog Design.

We will also need the TimThumb script in our WordPress theme. Just grab it from here and upload it to your theme directory.

Index.php

In index.php or home.php, depending on you WordPress theme, you’ll have your WordPress loop. You’ll need to add in 2 divs for aligning the two sections of the posts:

1. One on the left side with the thumbnail.
2. And one the right side for the text.

Here goes the code we will use for the thumbnail:

<div class="thumbnail">
<a title="<?php the_title_attribute('before=Permalink para: '); ?>" href="<?php the_permalink(); ?>">
<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=243&zc=1&q=70" alt="" />
</a></div>

We use the Timthumb script and the function getImage (You’ll be adding that function to your functions.php later on, don’t worry about it just yet) to return a thumbnail of 243px width and a proportional height.

The 243px is just an example that fitted my design, you can of course set any size you want within the Timthumb parameters: &w=243&zc=0&q=70.

And for the text:

<div class="excerpt_home">
<?php 
$postid = $post->ID;
$query = sprintf("SELECT * FROM wp_posts WHERE id='%s'",
mysql_real_escape_string($postid));
$result = mysql_query($query);
$row = mysql_fetch_array($result);
 
$w = $row[post_content];
$w2 = explode("width=\"", $w);
$w3 = $w2[1];
$w4 = explode("\"", $w3);
$width = $w4[0];
 
$h = $row[post_content];
$h2 = explode("height=\"", $h);
$h3 = $h2[1];
$h4 = explode("\"", $h3);
$height = $h4[0];
 
if($height != 0 && $width != 0) {
 
$t1 = ($height*100)/$width;
$t2 = (243*$t1)/100;
$t3 = ($t2*28)/100;
 
the_excerpt_rereloaded($t3,'[&raquo;]','<strong><em><b>','span','no');
}
 
else {
the_excerpt_rereloaded(45,'[&raquo;]','<strong><em><b>','span','no');
}
 
?>
</div>

About this code:

• We first grab the ID of the current post.
• Then we search the database for the original picture’s size.
• And we display the text.

WordPress saves in the database the width and height of each picture in a post. The idea is to grab those values to achieve our goal. We need the content of post_content, in the table wp_posts. We then search for the text width=’ to grab the value until we meet the closing ‘.

This is all achieved with these lines of code:

$w = $row[post_content];
$w2 = explode("width=\"", $w);
$w3 = $w2[1];
$w4 = explode("\"", $w3);
$width = $w4[0];

We do the same for the height of the picture:

$h = $row[post_content];
$h2 = explode("height=\"", $h);
$h3 = $h2[1];
$h4 = explode("\"", $h3);
$height = $h4[0];

If those values are not empty, it means that we have a picture.

We then use a proportional function to give the variable $t3 a value for the the_excerpt_rereloaded function. I use this plugin to display a custom ‘Read more’ text: [»] (You’ll need to install the plugin to get the code above to work because it is what lets us change the length of the excerpt)

$t1 = ($height*100)/$width;
$t2 = (243*$t1)/100;
$t3 = ($t2*28)/100;

243 is the width of my final thumbnail, and 28 is the proportion for the text. Why? Because $t2 will give me the height of the picture in pixels and the parameter for the_excerpt_rereloaded is a number of words. Without this division $t3 = ($t2*28)/100; my text would be proportional, but way too long.

Feel free to adjust those values to make the excerpts line up perfectly with your own line lengths!

Finally if no picture is found i display a 45 word excerpt because it suits my default picture:

else {
the_excerpt_rereloaded(45,'[&raquo;]','<strong><em><b>','span','no');
      }

Of course if the text of the post is too short, it wont fit the whole div on the home page.

functions.php

Here is the function getImage() to put in functions.php in our WordPress theme:

<?php
// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1; 
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
else {echo bloginfo('template_url')."/images/padrao_w.png";}
$more = 0;
}
?>

As I said before, this is from Fikri’s post.

I just modified it at the end to add a default picture if the post does not contain any. In my case, the picture is located in the images folder of my WordPress theme: /images/padrao_w.png. Again, adjust that to your own default image link!

Lightbox system

This last section is much easier; I just used the nCode Image Resizer plugin. It checks if the picture in the post is bigger than 630px width. If yes, it does resize it proportionally to 630px width and puts link above the image to zoom within the same page.

Just go the WordPress admin panel to set the width option to whatever value suits your theme.

Conclusion

This method might not be the only one to achieve this and also not the best ever. I’m pretty sure it can be improved.

Do not hesitate to post comments about it, I’d be glad to help and maybe improve the system.

And of course, if you do implement this on your site, share the link with us!