WordPress Theme Development Part 10 – Featured Image

You already know, how to add pages and posts in WordPress. You added contents also. But still you are not happy coz you have lots of cool images that you want to add on your posts and pages. Ok lets start.

In your WordPress admin panel there is no option for adding images. Enabling this option add this function in your functions.php.


add_theme_support( 'post-thumbnails');

Now take a look on the Add New page. An option appear called Featured Image. Add your post images here and update/publish the post.

Display the Image

Use this function into your post or page loop to display the image. Remove the HTML tag <img src=””> and replace it there.


the_post_thumbnail();

Add Image Class

In your <img> tag there might be some css classes that not working now.
Because the_post_thumbnail() only bring the post images but no css class added yet. To add your theme’s image class use the function like this.


the_post_thumbnail('thumbnail', array('class' => 'alignleft')); 

Image Size

If you want to make a fixed shape for your post images. use this function
in you functions.php


set_post_thumbnail_size( 500, 500);

First parameter is Width and Second is the height.

When you want same image in different places with different sizes, you can use the_post_thumbnail() function with different parameters. It will crop the image based on the parameter we use and show different sizes in different type of posts.


//Default WordPress
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)

If you have different post types you can set the image size like this.


add_image_size( 'projects', 370, 300, true);
add_image_size( 'clients', 170, 40, true);
add_image_size( 'sliders', 1920, 628, true);
add_image_size( 'team', 270, 270, true);

Hope this tutorial is a cool solution for your website images.
Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *