Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using following code to display images in home page:

if ( has_post_thumbnail() ) {the_post_thumbnail('postbox-thumb')

But the output of the above code does not have height and width of the img tag. Please help me in solving this problem.

Current sample output:

<img alt="Kiran inspects coal mine" class="attachment-postbox-thumb wp-post-image" src="http://i0.wp.com/www.indiahelpdesk.in/wp-content/uploads/2012/08/HY09-KIRAN_1170869f.jpg?resize=229%2C150">

img height and width attributes are missing.

share|improve this question
    
Why do you need these attributes? If they are not given, the original size of the image is used. –  Horttcore Mar 12 '13 at 10:31
    
For better performance I need these attributes. –  user28789 Mar 12 '13 at 17:43
    
According to W3C (w3.org/TR/html401/struct/objects.html#h-13.7.1) you don't need them, except you want to overwrite them. And tbh I can't see why they should boost your page performance. If you want to improve your overall page performance, you should start somewhere else then the image attributes. If you still want to use them, see my answer below. –  Horttcore Mar 12 '13 at 17:51
    
I am following pagespeed recommendations –  user28789 Mar 19 '13 at 7:42

3 Answers 3

In the 2nd attribute of the_post_thumbnail() you can give additional attributes for the image.

the_post_thumbnail( 'postbox-thumb', array( 'width' => 100, 'height' => 100 ) )

I've just checked it again the width and height are set in the latest WP Versions, so you might have just to update your WordPress installation.

share|improve this answer

Check the parameters for the_post_thumbnail Thumbnail Sizes

the_post_thumbnail( array(100, 100) );

Or you can add a custom image size for featured images using add_image_size in your function file which includes the width and height

add_image_size( 'postbox-thumb', 100, 100, TRUE );
share|improve this answer

first of all add theme support for post-thumbnails with the following "function.php"

add_theme_support( 'post-thumbnails' );

then add image size with the following code "function.php"

add_image_size( 'portfolio', 600, 600, true );

use both of these inside a function which you have to hook into

add_action( 'after_setup_theme', 'prefix_theme_setup' );

now inside the loop check for the post thumbnail

has_post_thumbnail()

then call the post thumbnail

the_post_thumbnail( 'portfolio' );

you can also set a class attribute and give custom height and width in css, keep width and height equal to the height and width set in add_image_size(); or keep the same ration.

the_post_thumbnail( 'portfolio', array( 'class' => 'custom-class img-responsive' ) );

now you can give custom css class in your css

.custom-class { width: 200px; height: 200px; }

complete code for function.php

/*
 * theme setup
========================================*/
if ( ! function_exists( 'prefix_theme_setup' ) ) :
function prefix_theme_setup() {

    /*
     * Enable support for Post Thumbnails on posts and pages.
     */
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'portfolio', 600, 600, true );

}
endif;
add_action( 'after_setup_theme', 'prefix_theme_setup' );

complete code for template file

<?php if ( has_post_thumbnail() ) :
    the_post_thumbnail( 'portfolio', array( 'class' => 'custom-class img-responsive' ) );
endif; ?>

:-)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.