How to Add Featured Image Support
add_theme_support( ‘post-thumbnails’ );
The code that follows will test if the post has a featured image or not. Note: the_content() isn’t mandatory here, just a typical usage: in the loop we will often place the featured image, then follow it with the content, or the excerpt.
if ( has_post_thumbnail() ){
the_post_thumbnail();
}
the_content();
How to Use the Featured Image at a Particular Size:
The default image sizes of WordPress are “thumbnail”, “medium”, “large” and “full” (the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media.
the_post_thumbnail(); // without parameter -> Thumbnail
the_post_thumbnail(‘thumbnail’); // Thumbnail (default 150px x 150px max)
the_post_thumbnail(‘medium’); // Medium resolution (default 300px x 300px max)
the_post_thumbnail(‘large’); // Large resolution (default 640px x 640px max)
the_post_thumbnail( array(100,100) ); // Other resolutions
How to Add New Post Thumbnail Sizes
add_image_size( ‘category-thumb’, 300, 9999 ); // 300px wide. Unlimited Height
add_image_size( ‘product-thumb’, 400, 1000 ); // 400px wide. Maximum 1000 Height
Styling Post Thumbnails
Post Thumbnails are given a class “wp-post-image”. They also get a class depending on the size of the thumbnail being displayed. You can style the output with these CSS selectors:
img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
You can also give Post Thumbnails their own class.
Display the Post Thumbnail with a class “alignleft”:
<?php the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘alignleft’)); ?>
Hard vs Soft Image Cropping
Hard Cropping: the image is resized until the maximum height or width is reached.
Soft Cropping: the image is resized proportionally to fit inside the specified dimensions.
If you add “true” as the last parameter in the add_image_size() function, you will produce a hard crop. For example, imagine that I upload an image with full-size dimensions of 600px wide and 900px high. If
<?php add_image_size( “homepage-thumbnail”, 240, 400, true ); ?>
will generate a custom size called “homepage-thumbnail”.