How to add thumbnails to posts and pages automatically in a uniformed fixed elegant way?

Question

please i am wondering if there was a plugin or hack that enables me to append a nice looking thumbnail for each post or page i publish on my blog.

Currently, i am able to add the featured images but appending those images to my posts using the below code is not getting me any tidy results.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}  ?>

I am mainly looking for something simple that would fix those thumbnails automatically and uniformly in my posts or pages without adding them manually and adjusting their sizes and positions within the text one by one. As if i have 500+ posts, i have to repeat the process 500 times spending long hours adjusting each single image in my posts which is literally very time consuming. At the moment i have them set already as featured images but not displayed inside the posts or pages.

Please check the below picture for an example of a tidy thumbnail:

Thanks in advance for your help! any suggestions are greatly appreciate it.

Answer 1

You should take a look at your Media Settings, to define the dimensions of your post thumbnails. Additionally, you could add this code to your functions.php to specify your own thumbnails and dimensions:

// add thumbnail theme support
add_action('after_setup_theme','tjnz_theme_support');
function tjnz_theme_support() {
    add_theme_support('post-thumbnails');       // wp thumbnails
    set_post_thumbnail_size(170, 170, true);    // default thumb size
    add_theme_support('automatic-feed-links');  // rss thingy
}

// add thumbnail sizes
add_image_size( 'my-thumbnail', 320, 100, true );
add_image_size( 'my-other-thumbnail', 768, 400, true);
/* call with  <?php the_post_thumbnail( 'my-thumbnail' ); ?> */

In your single.php you can use the following code:

<?php 
if ( has_post_thumbnail() ) : 
    the_post_thumbnail('my-thumbnail');
else : 
?>
<img src="http://www.example.com/wp-content/uploads/No-Image-Available.png" alt="No artwork available for '<?php the_title(); ?>'" title="No artwork available for '<?php the_title(); ?>'" border="0" width="320" height="100" />
<?php endif; ?>

The else part of the code makes sure that if no featured image is set, your post will still have an image. It will keep the format of your posts uniform.

For making sure that old images set to posts are also using your newly defined dimensions, you could use a plugin "Regenerate Thumbnails". It will look into your functions.php to get the dimensions, then looks at your wp-upload folder and recreates all sizes for missing images for you.