{"id":154,"date":"2010-11-19T19:06:09","date_gmt":"2010-11-19T14:06:09","guid":{"rendered":"http:\/\/www.zubair.info\/blog\/?p=154"},"modified":"2019-08-13T19:42:10","modified_gmt":"2019-08-13T14:42:10","slug":"how-to-use-post-thumbnails-feature-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.zubair.info\/blog\/2010\/11\/19\/how-to-use-post-thumbnails-feature-in-wordpress.html","title":{"rendered":"How to Use Post Thumbnails Feature in WordPress"},"content":{"rendered":"

Displaying Post Thumbnails in your wordpress theme has become a common habit for many theme developers, until now people used to use many different hacks and approaches to include the Post Thumbnails functionality. The built-in Post Thumbnails functionality for WordPress was unavailable to users until version 2.9<\/em> came out which bought alot of great changes along with many improvements. We will be going through the process of learning how to use the WordPress Post Thumbnails in our own themes. <\/p>\n

\n

Content Navigation<\/h3>\n
    \n
  1. Enabling support for the Post Thumbnails Feature<\/a><\/li>\n
  2. Setting up your new Post Thumbnail<\/a><\/li>\n
  3. Setting up even more Post Thumbnails<\/a><\/li>\n
  4. Displaying your Post Thumbnails<\/a><\/li>\n
  5. Bullet-Proof your Post Thumbnails<\/a><\/li>\n
  6. Useful Resources<\/a><\/li>\n<\/ol><\/div>\n

    Enabling Support for the Post Thumbnails Feature TOP ↑<\/a> <\/h3>\n

    First you have to check if your theme supports the post thumbnails feature in your themes functions.php<\/strong>. If not, you can add support for it by defining the following in your functions.php file: <\/p>\n

     \/\/ This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); <\/pre>\n
     If you are not building a custom theme just for yourself and might offer it to the public, it would be a good idea to wrap the code like below for better compatibility with older versions of wordpress that does not support this feature, I have it defined as above<\/strong> because i know i have no intentions of downgrading my wordpress. But for the sake of these examples i am going to put them inside those if\/else<\/code> wrappers for you. <\/p>\n
     if( function_exists( 'add_theme_support' ) ) { \/\/ This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); } <\/pre>\n
     \"Wordpress After completing this step you will now be able to see the the Set Featured Image Link<\/strong> in your WP-Admin-> Post-> Add New Post<\/strong><\/code> and \/ or Edit Post<\/strong><\/code> section somewhere under the bottom-right Post Tags<\/strong> meta-box, if you don’t see this that means something went wrong, you should try repeating the above process again. You don’t have to upload any images yet, as we haven’t defined any custom sizes for our thumbnails yet.  <\/p>\n
     Setting up your new Post Thumbnail TOP ↑<\/a> <\/h3>\n
     When you are done with the above, we can start using the two wordpress functions that i have been talking about in my previous post<\/a>, as i explained in that post – these two functions are the same so its up-to you to decide which one you need and Yes<\/em> you can use both of them at the same time too. I would recommend just sticking with the set_post_thumbnail_size()<\/code> function unless you need more than one custom thumbnails, that is where the other function add_image_size()<\/code> function would be very helpful. Let me first show you how to use the set_post_thumbnail_size()<\/code> function first. Just like above we will be wrapping this code, like below: <\/p>\n
     if( function_exists( 'add_theme_support' ) ) { \/\/ This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); \/\/ Set a default post thumbnail WITH proportional \/ box resizing set_post_thumbnail_size( 200, 200 ); } <\/pre>\n
     There you have it. You can now upload your new thumbnail from the WordPress Post Interface to see the results. But before we go any further lets go over whats happening in the above code. We are using set_post_thumbnail_size<\/code> to make a custom thumbnail size<\/em>, which is named post-thumbnail<\/code> by default. It is assigned the size that we have defined; In our case it is 200px width with 200px height. <\/p>\n
     \/\/ Set a default post thumbnail WITH hard cropping mode set_post_thumbnail_size( 150, 150, true ); <\/pre>\n
     You can use the hard crop mode, by just specifying that last boolean true<\/code> parameter, default value for that last crop parameter is false<\/code>. The last parameter in the above function is to define if you want to crop the image or resize it, setting it to true enables cropping. By default wordpress does proportional \/ box resizing, it will automatically adjust the image proportionally for you the best way it sees fit so you don’t have a distorted image. If you have cropping set to true<\/code> wordpress uses hard cropping method which means it can cut off parts from any where in the thumbnail image top, left, right or bottom to maintain the aspect ratio of the image and keep it under the defined size that we specified. <\/p>\n
    \n
     Mark Jaquith<\/a> is a Lead WordPress Developer: He explains How the wordpress resizing and cropping works much better and more<\/a>:<\/b> <\/p>\n
     You have two options here: box-resizing and hard-cropping. Box resizing shrinks an image proportionally (that is, without distorting it), until it fits inside the \u201cbox\u201d you\u2019ve specified with your width and height parameters. For example, a 100\u00d750 image in a 50\u00d750 box would be resized to 50\u00d725. The benefit here is that the entire image shows. The downside is that the image produced isn\u2019t always the same size. Sometimes it will be width-limited, and sometimes it will be height-limited. If you\u2019d like to limit images to a certain width, but don\u2019t care how tall they are, you can specify your width and then specify a height of 9999 or something ridiculously large that will never be hit.<\/p><\/blockquote>\n
    Your second option is hard-cropping. In this mode, the image is cropped to match the target aspect ratio, and is then shrunk to fit in the specified dimensions exactly. The benefit is that you get what you ask for. If you ask for a 50\u00d750 thumbnail, you get a 50\u00d750 thumbnail. The downside is that your image will be cropped (either from the sides, or from the top and bottom) to fit the target aspect ratio, and that part of the image won\u2019t show up in the thumbnail.<\/p><\/blockquote><\/div>\n
     Setting up even more Post Thumbnails TOP ↑<\/a> <\/h3>\n
     Not satisfied with just one thumbnail? We can generate even more thumbnails! How, you ask? simple. We can use the add_image_size()<\/code> function, it has the same exact functionality as the set_post_thumbnail_size()<\/code> function with one added benefit you can name your thumbnails however you want (instead of the default post-thumbnail<\/code> name). Therefore allows us to make multiple thumbnails each with its own unique names and sizes. <\/p>\n
     if( function_exists( 'add_theme_support' ) ) { \/\/ This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); \/\/ Generate a new thumbnail with our desired name and size add_image_size( 'special-thumb', 250, 250, true ); \/\/ Generate a new thumbnail with our desired name and size add_image_size( 'small-thumb', 50, 50, true ); \/\/ Generate a new thumbnail with our desired name and size add_image_size( 'large-thumb', 400, 400, true ); } <\/pre>\n
     The set_post_thumbnail_size()<\/code> function inherits its functionality from the add_image_size()<\/code> function, so almost everything remains the same for both – Read this post to learn the difference<\/a>. <\/p>\n
     Displaying your Post Thumbnails TOP ↑<\/a> <\/h3>\n
     This will be very easy, you just need one small line of code like the one below. <\/p>\n
     <?php the_post_thumbnail(); ?> <\/pre>\n
     You just need that line of code to display the newly generated thumbnail. By default it will fetch that new thumbnail that we generated above which was assigned the post-thumbnail<\/code> name\/keyword. <\/p>\n
    WordPress will first search for the default auto generated thumbnail<\/code> then it moves onto post-thumbnail<\/code> that we generate above using the set_post_thumbnail_size()<\/code> function.<\/p>\n
     NOTE:<\/b> For each post thumbnail you show in your page 3 more database queries are added, so for instance if you had a page with 10 post there would be 30 more database queries to run. <\/p>\n
     There are also optional parameters we can pass to this function, the first parameter accepts a name\/keyword of the image we are trying to show or an array value of width and height – WordPress by default generates a few images and thumbnails when we upload a new image for our post. <\/p>\n
     <?php the_post_thumbnail( 'thumbnail' ); \/\/ Default 150x150px ?> <?php the_post_thumbnail( 'medium' ); \/\/ Default 300x300px ?> <?php the_post_thumbnail( 'large' ); \/\/ Default 1024x1024px ?> <?php the_post_thumbnail( 'full' ); \/\/ The original copy ?> <\/pre>\n
     There are total of 4 images generated when you upload a new image using the media uploader, though there might be cases when some of them may not be available, like the Large version will only be generated if your original image has a size greater than the one defined for the Large version in your WP-Admin-> Settings-> Media<\/strong><\/code> page (see below pic). <\/p>\n
     Note:<\/b> To be able to use the above named sizes with the the_post_thumbnail()<\/code> function you first have to make sure a default thumbnail is set by using the Set Featured Image link in your Post Add \/ Edit<\/em> Interface, if you don’t have a post thumbnail set there it wont detect the above either, not sure why this is required, But it is. <\/p>\n
     You can change the default values for the pre-made image versions in the WP-Admin-> Settings-> Media <\/strong><\/code> page in your WordPress Admin, See the below photo for a better look of where you can do that. <\/p>\n
     \"Wordpress<\/a> <\/p>\n
     \/\/ Here we are using an array value of width and height to specify \/\/ the size of the image we want. the_post_thumbnail( array(100,100) ); <\/pre>\n
     By specifying an array value of width and height as the values, instead of the name of the images. The function then fetches the closest version of the image from the ones it has generated automatically, after doing that it does the resizing accordingly. So by specifying 200×200 for the width and height value above, wordpress will be fetching our named image medium<\/code> which it generates at the time of uploading the image, also the medium<\/code> image is generated with a size of 300×300 according to our default setting in the wp-admin-> setting-> media<\/strong><\/code>, so its pretty close to the one we specified above. To be even more clear, specifying the value like above is the same as using the names\/keywords of the image. We can also assign css classes, useful for styling the thumbnail with css or change the value of the img alt<\/code> attribute. <\/p>\n
     \/\/ Assigns 2 CSS classes to our post thumbnail. the_post_thumbnail( array(100,100), array("class" => "class1 class2") ); <\/pre>\n
     \/\/ Assigns alignleft CSS class to align it, also edits the value of the img tag 'alt' attribute. the_post_thumbnail('thumbnail', array('class' => 'alignleft', 'alt' => 'Image Description')); <\/pre>\n
     Bullet-Proof your Post Thumbnails TOP ↑<\/a> <\/h3>\n
     One last thing i would like to point is that you should be using the the_post_thumbnail()<\/code> function with a if\/else<\/code> wrapper too, it can prove to be very useful and at the same time gives you backward compatibility. <\/p>\n
     \/\/ Wrap it if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(); } else { \/\/ If there is no thumbnail for this post, show a default one. echo '<img src="'.get_bloginfo("template_url").'\/images\/default-post-thumbnail.gif" \/>'; } <\/pre>\n
     This code would be placed where you want to display your post thumbnails, most likely in your loop. It checks if the post has any post thumbnails, if it does it displays it using the_post_thumbnail()<\/code> function, otherwise we can now tell it to show a default thumbnail in-case no thumbnails are found for a certain post. <\/p>\n
     Thank you for reading TOP ↑<\/a> <\/h3>\n
     I would really love to hear your feedback and suggestions about this post, and i would also appreciate if you could let me know how i can improve this post, so that it is more easier and clearer for others. But if that is too much to ask a Thank You!<\/strong> would be just as appreciated. You can find more useful information using the below resources list that i found very helpful. <\/p>\n
    \n
    Useful Resources TOP ↑<\/a><\/h3>\n
     The set_post_thumbnail_size()<\/code> function assigns this new image size<\/strong> that we generated above a default name \/ keyword, which is post-thumbnail<\/code>. We can use it to display that thumbnail in our theme (shown later below<\/a>). <\/p>\n