Let’s say you want to show thumbnails in your blog’s front page or eitheir in your all articles. A lot of blogs do that now and it’s a good way of making the page look more alive.
The only problem though is that using custom fields can be complicated and time-wasting. There is another way also to post a thumbnail on your post using featured image but it take time to do so.
This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.
First, paste this function on your functions.php file.
This code will automatically get the first image of your post to set as a thumbnail image.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function get_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = “/images/default.jpg”;
}
return $first_img;
}
|
Once done, you can simply call the function within the loop to display the first image from the post:
PHP
1
|
<?php echo get_image() ?>
|
Second, Add the thumbnail code in your index.php, home.php and single.php
XHTML
1
2
3
4
5
|
<div class=”thumbnail-post”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”>
<img src=”<?php echo get_image() ?>” alt=”<?php the_title_attribute(); ?>” title=”" />
</a>
</div>
|
Third, Add CSS code in your style.css.
You can style your thumbnail what ever you want to look more alive and good looking here is my CSS code, this are the codes that I am using in the above sample post.
CSS
1
2
3
4
5
6
7
8
9
10
11
|
.thumbnail-post img{
float:right; width:140px;
height:140px;
border: 8px solid #f8f7f2;
box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow:3px 6px 8px 1px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);
margin-left: 23px;
margin-bottom: 17px;
margin-top: 7px;
}
|
you don’t need to take your time editing croping for your thumbnail post, What do you think? Is the time saved worth it?
0 comments:
Post a Comment