BlaPageBlaPage
It's about Internet – SEO, Black Hat SEO, Wordpress, Personal Computers, Technology, WebHosting

Show Featured Image in WordPress

Featured Image is now a native feature in WordPress 3.0+ and this tutorial walks you through how to implement them.


Use the code below so a featured Image Function gets activated in your theme.

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 300, 300, true ); // Normal post thumbnails
    add_image_size( 'single-post-thumbnail', 400, 300 ); // Permalink thumbnail size
}

Now, Paste the following code where you want to show thumbnail for respective posts:

<?php the_post_thumbnail();?>

Set how the image will appear

You can either use one of your three preset thumbnail sizes (as set in Settings > Media) for your featured image, or you can dictate a new size altogether. You’ll change the thumbnail call according to which size you want it:

Large

<?php the_post_thumbnail('large');?>

Medium

<?php the_post_thumbnail('medium');?>

Thumbnail

<?php the_post_thumbnail('thumbnail');?>

Custom size

<?php the_post_thumbnail( array (width,height) );?>

For the custom size, replace width and height with the number of pixels that each length should be. For example, to show an image 250 pixels wide and 150 pixels high, use:

<?php the_post_thumbnail( array (250,150) );?>

Now it’s time to style the image with a little CSS. I’m going to show you one way to do it, but you’ll need to tailor the styling to your specific theme, so that it fits in. If you need some help with this, leave me a comment and I’ll be glad to help.

This will be a little different for everyone, but my post content was given a set CSS selector (entry-content). Since I’ve included my featured image call inside that CSS class, I have to use a specific CSS selector for the post thumbnail. Before I added my featured image code, my post content call looked like this:

<div class="entry-content">
	<?php the_content('Read more »'); ?>
</div>

Now, I’ve added a specific CSS selector for the post thumbnail and the code in my single.php looks like this:

<div class="entry-content">
	<div id="post-thumbnail">
		<?php the_post_thumbnail('medium');?>
	</div>
	<?php the_content('Read more »'); ?>
</div>

Now we need to specify what CSS rule set will be applied to the image. Load up your stylesheet (style.css) in your theme editor. Find the CSS selector that is set for your post content (entry-content in my case) and scroll down to the end of that section (until there are no more rule sets that start with entry-content). Now you’re going to add the following rule set right after it:

.entry-content #post-thumbnail {
	float: right;
	border: 1px solid black;
	margin: 0 0 10px 10px;
}

This will display your image in the top right of your content, put a 1 pixel black border around it and give you a 10px margin below it and to the left of it, so that the content doesn’t butt right up to the edge of the image.

Captions too?

If you also want to display the image caption below the image, say for crediting the photographer where a Creative Commons image is used, use the following code in single.php instead:

<?php the_post_thumbnail(); ?>
<p><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p>

The code used on Blapage is written below:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( array (125,125) );
} else { ?>
<img src="<?php echo catch_that_image() ?>" width="125" height="125" alt="Default Image" />
<?php } ?>

which includes function from this post : Get the first image from the post and display it on homepage in wordpress

This enables you to add featured thumbnails for new or any post but when you can’t add featured thumbnails to all the old posts it will show the first image in that post as featured image, the first post image as thumbnail will only showup when there is no featured image added manually.

Hope this BlaPage was helpful, Show Featured Images in WordPress.


Link To This BlaPage From Your Website :

Category: Blogging, CSS, Customizations, HTML, Php, Webmaster Tips and Tools, Wordpress

Tagged: , ,

Comments are closed.

Facebook FanPage

Follow BlaPage on Twitter