Tag: wordpress tutotirals

Now WordPress in core the new post thumbnail function will not changed until. we have given info about How to use the the_post_thumbnail In WordPress.

use the the_post_thumbnail In WordPress

You can provide 4 picture formats to the function (change the width and height values to your need):

// the thumbnail
the_post_thumbnail(array(100,100));

// medium resolution
the_post_thumbnail(array(300,200));

// large resolution
the_post_thumbnail(array(600, 400));

// original
the_post_thumbnail();

You can set how the images should align. It is also possible to assign an own class:

//  left align
the_post_thumbnail(array(100,100), array('class' => 'alignleft'));

//  right align
the_post_thumbnail(array(100,100), array('class' => 'alignright'));

//  center
the_post_thumbnail(array(100,100), array('class' => 'aligncenter'));

// align right and the class  'my_own_class'
the_post_thumbnail(array(100,100), array('class' => 'alignright my_own_class'));

The 3rd possibility is the control of the images size with an array of height and width:
For this purpose we suppose that the settings for thumbnail is 150×150, for medium 300×200 and for large 600×400.

// thumbnail scaled to 60x60 pixel
the_post_thumbnail(array(60,60), array('class' => 'alignleft'));

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

// medium resolution scaled to 200x133 pixel
the_post_thumbnail(array(200,200), array('class' => 'alignleft'));

// large resolution scaled to 400x266 Pixel
the_post_thumbnail(array(400,345), array('class' => 'alignleft'));

We see that the image proportions are always maintained, even if one specifies crooked values.

For the Theme Designers is this not necessarily easier, because no one knows what the user will put in his settings o his library. One way to approach this problem, to query the options for the various sizes:

// width of the thumbnails
get_option('thumbnail_size_w');

//  height of the thumbnails
get_option('thumbnail_size_h');

//  height of the medium resolution
get_option('medium_size_h');

//  width of the large resolution
get_option('large_size_w');

//  1 = Crop thumbnail to exact dimensions, 0 = Crop off
get_option('thumbnail_crop')

You can change these values in your theme.

$w = get_option('thumbnail_size_w') / 2;
$h = get_option('thumbnail_size_h') /2;

the_post_thumbnail(array($w, $h), array('class' => 'alignleft'));

Here another example: If the size of a thumbnail is bigger than 100×100 and crop is activated, then the thumbnail should be resized to 100×100, otherwise use the original thumbnail.

if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {
    the_post_thumbnail(array(100,100));
}else{
    the_post_thumbnail('thumbnail');
}

What Matt is saying?

I wouldn’t recommend anyone use the named arguments for the_post_thumbnail, like ‘thumbnail’, could you remove those from your tutorial.

Inspired by