Website At 100: Custom Field

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
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.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
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.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
First, paste this function on your functions.php file.</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This code will automatically get the first image of your post to set as a thumbnail image.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a495003442343529" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
<a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a></div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a495003442343529-1">
1</div>
<div data-line="crayon-52aff5a495003442343529-2">
2</div>
<div data-line="crayon-52aff5a495003442343529-3">
3</div>
<div data-line="crayon-52aff5a495003442343529-4">
4</div>
<div data-line="crayon-52aff5a495003442343529-5">
5</div>
<div data-line="crayon-52aff5a495003442343529-6">
6</div>
<div data-line="crayon-52aff5a495003442343529-7">
7</div>
<div data-line="crayon-52aff5a495003442343529-8">
8</div>
<div data-line="crayon-52aff5a495003442343529-9">
9</div>
<div data-line="crayon-52aff5a495003442343529-10">
10</div>
<div data-line="crayon-52aff5a495003442343529-11">
11</div>
<div data-line="crayon-52aff5a495003442343529-12">
12</div>
<div data-line="crayon-52aff5a495003442343529-13">
13</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a495003442343529-1">
function get_image() {</div>
<div id="crayon-52aff5a495003442343529-2">
  global $post, $posts;</div>
<div id="crayon-52aff5a495003442343529-3">
  $first_img = ”;</div>
<div id="crayon-52aff5a495003442343529-4">
  ob_start();</div>
<div id="crayon-52aff5a495003442343529-5">
  ob_end_clean();</div>
<div id="crayon-52aff5a495003442343529-6">
  $output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);</div>
<div id="crayon-52aff5a495003442343529-7">
  $first_img = $matches [1] [0];</div>
<div id="crayon-52aff5a495003442343529-8">
</div>
<div id="crayon-52aff5a495003442343529-9">
  if(empty($first_img)){ //Defines a default image</div>
<div id="crayon-52aff5a495003442343529-10">
    $first_img = “/images/default.jpg”;</div>
<div id="crayon-52aff5a495003442343529-11">
  }</div>
<div id="crayon-52aff5a495003442343529-12">
  return $first_img;</div>
<div id="crayon-52aff5a495003442343529-13">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Once done, you can simply call the function within the loop to display the first image from the post:</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a49500f617721222" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a49500f617721222-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a49500f617721222-1">
<?php echo get_image() ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Second, Add the thumbnail code in your index.php, home.php and single.php</h3>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a495015563074667" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a495015563074667-1">
1</div>
<div data-line="crayon-52aff5a495015563074667-2">
2</div>
<div data-line="crayon-52aff5a495015563074667-3">
3</div>
<div data-line="crayon-52aff5a495015563074667-4">
4</div>
<div data-line="crayon-52aff5a495015563074667-5">
5</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a495015563074667-1">
<div class=”thumbnail-post”></div>
<div id="crayon-52aff5a495015563074667-2">
   <a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”></div>
<div id="crayon-52aff5a495015563074667-3">
<img src=”<?php echo get_image() ?>” alt=”<?php the_title_attribute();  ?>” title=”" /></div>
<div id="crayon-52aff5a495015563074667-4">
</a></div>
<div id="crayon-52aff5a495015563074667-5">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Third, Add CSS code in your style.css.</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
You can style your thumbnail what ever you want to look more alive and good looking here is my <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>code, this are the codes that I am using in the above sample post.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a49501a729224983" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a49501a729224983-1">
1</div>
<div data-line="crayon-52aff5a49501a729224983-2">
2</div>
<div data-line="crayon-52aff5a49501a729224983-3">
3</div>
<div data-line="crayon-52aff5a49501a729224983-4">
4</div>
<div data-line="crayon-52aff5a49501a729224983-5">
5</div>
<div data-line="crayon-52aff5a49501a729224983-6">
6</div>
<div data-line="crayon-52aff5a49501a729224983-7">
7</div>
<div data-line="crayon-52aff5a49501a729224983-8">
8</div>
<div data-line="crayon-52aff5a49501a729224983-9">
9</div>
<div data-line="crayon-52aff5a49501a729224983-10">
10</div>
<div data-line="crayon-52aff5a49501a729224983-11">
11</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a49501a729224983-1">
   .thumbnail-post img{</div>
<div id="crayon-52aff5a49501a729224983-2">
   float:right; width:140px;</div>
<div id="crayon-52aff5a49501a729224983-3">
   height:140px;</div>
<div id="crayon-52aff5a49501a729224983-4">
   border: 8px solid #f8f7f2;</div>
<div id="crayon-52aff5a49501a729224983-5">
   box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-6">
   -moz-box-shadow:3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-7">
   -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-8">
   margin-left: 23px;</div>
<div id="crayon-52aff5a49501a729224983-9">
   margin-bottom: 17px;</div>
<div id="crayon-52aff5a49501a729224983-10">
   margin-top: 7px;</div>
<div id="crayon-52aff5a49501a729224983-11">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
you don’t need to take your time editing croping for your thumbnail post, What do you think? Is the time saved worth it?</div>
</div>

AUTOMATIC WORDPRESS THUMBNAIL WITHOUT CUSTOM FIELD AND FEATURED IMAGE

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 goo...