Clik here to view.
http://robcubbon.com/featured-images-wordpress
The video explains how to assign a Featured Image to a post and how to set up Featured Images within a WordPress theme. It shows the example of displaying a string of logos that are linked to a blog post in a particular category.
Featured Images in posts or pages is yet another example of how WordPress is not only a brilliant blogging platform but also an adaptable CMS (Content Management System).
The basic idea behind Featured Images is the ability to set a thumbnail, or any size of image, to an article so that when that article is listed in the site the featured image can appear as well. It creates an easy visual reference (which is worth a thousand words!) alongside the text-based title and description of your post or page which is so much more enticing and will make your visitors more likely to stay and read more!
My main blog page http://robcubbon.com/blog is an example of using Featured Images in WordPress. For every post I have set a generic thumbnail image that sums up the content of the article. So for each post you can see the image, the title and the excerpt.
A really simple example of using Featured Images
First of all, you need a theme that supports Featured Images. If so, you will see this box on the right-hand side when you create a new post or page.
If you can’t see this box it means your theme isn’t set up to support Featured Images yet. You just need a small bit of code to put in your theme’s functions file which is located here: wp-content/themes/your-theme/functions.php – you can edit it by going to Appearance - Editor on the left-hand side of the WordPress back-end and then by clicking “functions.php” on the right-hand side in your theme’s template files.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );
The first line enables the use of Featured Images on your site. The second line determines their size (in this case 150 pixels square).
So, when you’re adding a new post and want to assign a Featured Image to it, click “Set featured image” in the Featured Image box on the right-hand side. In the resulting pop-up box below, after choosing an image from your computer or one that is already in your Media Library, it is important to enter the post’s (or page’s) title in the Title field as this will ensure the correct text pops up when you hover over a Featured Image.
Once you are happy with the image, the alt text and the title click “Use as Featured Image”, close the box by clicking the cross in the top right-hand corner and Publish or Update the post. Now you will see your Featured Image in the right-hand side of the WordPress post editing area. You will notice that, if you selected a horizontal or vertical image and your set_post_thumbnail_size is square, WordPress will have cropped your image. If you are not happy with the crop of the Featured Image you will either have to crop the image yourself and upload another image or read on as I have another solution for this!
In order to get a Featured Image to actually appear in your blog you will have to put this somewhere inside the loop:
the_post_thumbnail();
Displaying Featured Images with two different sizes
If you look at the bottom left-hand side of my home page, http://robcubbon.com you will see that I list my most recent 5 posts with much smaller thumbnails (40 pixels square). Here’s how I did this. In my theme’s functions file I put:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );
add_image_size( 'my_thumbnail', 40, 40, true );
Above you can see in the third line of PHP a second size of Featured Image. And then in the template file I use for the home page I put inside a loop:
the_post_thumbnail('my_thumbnail');
Which produced 40 by 40 pixels square thumbnails!
How to maintain the full width or height of a Featured Image
So, now we know how to set and display images that are generic to the post as small square thumbnails, but what if you want to use the Feature...
Ranked 4.64 / 5 | 129 views | 0 comments
Click here to watch the video (06:03)
Submitted By: RobCubbon
Tags:
Blogs Featured Images Thumbnails WordPress Wordpress Theme Import
Categories: How To
