in

Get WordPress Thumbnail´s Without Using Custom Field

WordPress Thumbnai´s

WordPress Thumbnai´s. If you go on and buy a premium template you usually get this function embedded and ready for use. But if not that is the case, then this article is for you.

Say you want to show WordPress thumbnail´s in your front page and that generates thumbnails automatically. It looks very fresh when all images are viewed in the same size.  So let´s see how we can Get WordPress Thumbnai´s Without Using Custom Field

This is done by mixing a wordpress hack and a php script. The PHP script is Darren Hoyt’s timthumb.php, the hack is WpRecipe’s how to get the first post image.

Advertisement

Get WordPress Thumbnai´s Without Using Custom Field

1 Get the TimThumb.php

Get the timthumb.php script and place it on your theme directory. You can either download it, or create a blank timthumb.php file on your theme directory, open the script . copy, paste it into your empty timthumb.php file, then save it.

2 Edit Functions.php

Open your theme’s functions.php file (Or create a file with that name if it doesn’t have one), then paste the code below into it. This will retrieve the URL for the first image in your post. The code written here is based on WpRecipe’s original post.

<?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; }
$more = 0;
}
//retreive image ends
?>

 3 – The Thumbnail Code

This is the thumbnail code. This code has to be written inside the_loop. Since the most common use of thumbnail is to be shown beside the excerpt, in this tutorial we’ll paste this code above the_excerpt(); or the_content(); in index.php or home.php file.

<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=250&h=250&zc=1">
</a>
</div>

The code above will create a 150×150 pixel thumbnail. If you want to change the size of the thumbnail, just change the ‘w’ and ‘h’ parameters

4 – Add some CSS Rules

Now let´s style the thumbnail for your you liking, for example, you might add the following to your style.css file:

thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e5e5e5; width:250px; height:250px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C5C5C5;}

So no more custom fields,just upload your image and the script resizes it for you.

Advertisement

Written by Jonny

Hi! I am the author and publisher of this site. Please feel free to comment the articles and don´t forget to share the articles!

Leave a Reply

Your email address will not be published. Required fields are marked *