Displays the html code of the current post's thumbnail image.

This Template Tag must be used inside the WordPress Loop.

Additional size of the image, which can then be obtained using this function, can be created via add_image_size (). The following sizes are available by default: thumbnail, medium, large, full, post-thumbnail.

✈ 1 time = 0.001739s = very slow| 50,000 times = 6.79s = fast| PHP 7.1.2, WP 4.7.3

There are no hooks.

Returns

null (nothing). Displays a string. The function displays the html code of the image or an empty value (null) if the image does not exist.

Using

$ size (string / array)

The size of the thumbnail to get. Can be a string: thumbnail, medium, large, full or an array of two elements (image width and height): array (32, 32).

When an array is specified, a new thumbnail with the specified dimensions is not created. And WP looks for the most suitable size from those that already exist, takes it and simply specifies the height and width in pixels for the IMG tag to reduce the image. Those. the picture is reduced only visually.

Default: "post-thumbnail", the size that is set for the theme with the set_post_thumbnail_size () function

$ attr (string / array)

An array of attributes to add to the resulting html img tag.

Can be specified with a string: alt = alt & class = alignleft or an array:

$ default_attr = array ("src" => $ src, "class" => "attachment- $ size", "alt" => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)),);

Any attributes can be specified.
Default: ""

Examples of

# 1 Thumbnail as a link to a post

Example 1: Use the following code to make a thumbnail image a link to a post. Example for use inside a WordPress Loop:

"title =" (! LANG:!}" >

# 2: make a thumbnail a link to a post

For this we use the post_thumbnail_html hook. In this case, the picture will be a link to the post immediately when the the_post_thumbnail () function is called; ... The code needs to be added to the template file functions.php:

Add_filter ("post_thumbnail_html", "my_post_image_html", 10, 3); function my_post_image_html ($ html, $ post_id, $ post_image_id) ($ html = "". $ html. ""; return $ html;)

# 3 Thumbnail-link to original size

An example showing how to create a thumbnail that will reference the original image size:

# 4 Registering a new size

Using add_image_size (), you can register a new size and then retrieve it by key:

// let's say in functions.php we register an additional size like this: add_image_size ("spec_thumb", 360, 240, true); // further in the loop, display this size like this: the_post_thumbnail ("spec_thumb");

Flector 5

It is a small but very useful plugin whose only function is to regenerate blog thumbnails. Any change in the size of thumbnails in the blog settings will affect only the new pictures you have uploaded, and all the old pictures will remain the same size. But what if you changed your blog template to one in which the design is sharpened for a certain size of thumbnails? This is where you need this plugin. We installed the plugin, regenerated the thumbnails in the desired size and that's it, the plugin can be deleted. And don't be afraid to experiment with new templates and different thumbnail sizes - the plugin creates new thumbnails without deleting old ones. Thus, you can always roll back to your original template without any damage (well, except for extra images in the download folder) for your blog.

1 Unpack the archive.

2 Copy the folder regenerate-thumbnails in / wp-content / plugins /.

3 We go to the blog admin panel on the " Plugins"and activate the plugin.

There are no settings in the plugin. So do not forget to first go to " Options \ Media"and set the thumbnail sizes you need.

After that, we have two options:

1 Regeneration of all pictures at once. Go to " Tools \ Regen. Thumbnails"and press the button" Regenerate All Thumbnails":

Now you just have to wait for the plugin to recreate all the thumbnails. This can take from a few seconds to tens of minutes, depending on the number of pictures. A hundred images are re-created in about one minute.

2 Regeneration of favorite pictures. You can recreate only selected images, for this go to the media library. There you can regenerate either several images at once or each separately:

In the template, thumbnails can be displayed either in relative sizes or at precise sizes. Relative sizes (thumbnail, medium, large) mean that the template will display images exactly in the sizes specified in the blog settings. Regardless of whether the pictures in these sizes will fit into the design of the template or not.

Function the_post_thumbnail(which you can find in the file index.php in the template folder) looks something like this:

the_post_thumbnail ("thumbnail"); // thumbnail (150 x 150) the_post_thumbnail ("medium"); // medium (300 x 300) the_post_thumbnail ("large"); // large (640 by 640) the_post_thumbnail ("full"); // full (no limit)

If this code is similar to the one in your template files, then you will have to manually select the thumbnail sizes that will look good in the new blog template. But, as a rule, if the relative sizes are indicated, then the author of the template expects that the sizes of the pictures are set with the default values.

the_post_thumbnail (array (500, 150)); // 500 to 150

the_post_thumbnail (array (500,150)); // 500 to 150

It is these dimensions that you must specify in the blog settings, and then recreate the images with these dimensions. Only in this case the template will look exactly as the author intended. If you do not specify these dimensions in the blog settings, the picture will be displayed as close as possible to the specified dimensions. What this actually means is that instead:

This will be displayed:

An example, of course, is contrived. But, nevertheless, it clearly shows that the designer could have meant one thing, but it turns out completely different only because your thumbnails are not set in the sizes that the author of the template used. In this case, the records generally overlap and spoil the design completely. Many templates are discarded by users who simply cannot understand that the curvature of the design of these templates is caused by the incorrect dimensions of the thumbnails, and not at all the curved pens of their authors.

$ post_id ( integer) ID of the post, the thumbnail of which we need to get, by default - the ID of the current post from the loop. $ size ( string | array) in this parameter we specify the size of the thumbnail. It can take the following values:

• thumbnail / medium / large - one of the default image sizes registered in WordPress, these sizes can be adjusted in Options> Media,
• full - original image resolution - this is how it was uploaded to the site,
• You can specify your own parameters for the width and height of the thumbnail as an array, such as array (50, 30). Please note that WordPress will not create a duplicate of the image for this size - instead, it will use the closest registered image size in resolution, adjusted to your parameters while maintaining the original proportions.

  To make it clearer, I will give an example. Suppose we specified array (50, 30) for this argument. My closest size will be 125 × 125 (thumbnail) - the URL of this image will be inserted into the src attribute. Okay, what about the proportions? Since 125 × 125 is a square, then our miniature will also be square, it will fit in the smallest parameter, i.e. the result will be 30x30.

• One of the custom sizes of the images registered through the function.

$ attr ( array) array of overridden tag attributes , through it you can override the following HTML attributes:

• src - if you need, you can even replace the URL of the image.
• class - the class of the tag , has the following classes wp-post-image and attachment- (image size) by default.
• alt - by default trim (strip_tags ($ attachment-> post_title)) - specified in the admin panel when uploading / editing a media file.
• title - by default trim (strip_tags ($ attachment-> post_excerpt)).

Example 1

A simple example - just display the post thumbnail with ID = 5:

echo get_the_post_thumbnail (5, "thumbnail"); //

Example 2. How to make thumbnails with links to a post?

Let's say we want to implement this on category pages. Let's tweak the loop a bit:

while (have_posts ()): the_post (); if (has_post_thumbnail ()): echo "ID)." ">". get_the_post_thumbnail ($ post -> ID, "thumbnail"). ""; endif; echo "ID)." ">". $ post -> post_title. ""; endwhile;

In this example, I also used a function so that in the absence of a thumbnail, the code does not display an extra tag .

Example 3. How to make the full version of the picture open when you click on a thumbnail?

The code in this example is great for use in a jQuery plugin like fancybox or pretty photo. In this case, you may also need to add a class for the link.

You can also check out the documentation for the functions on my blog.

Example 4. Using the third parameter $ attr to change the thumbnail class

Let's add an align-left class to our thumbnails to wrap text around on the left:

Post_thumbnail_size filter

The filter allows you to set the size of the thumbnails used on the blog (everywhere on the blog).

And now an example with the following condition: for all thumbnails on the blog that are displayed via the get_the_post_thumbnail () function with the $ size parameter equal to thumbnail, replace the size with medium, leave the rest of the thumbnail sizes untouched:

The number of parameters for this filter is good news, which means that we can do whatever we want with the returned HTML code.

$ html ( line) The HTML returned by the default function is $ post_id ( integer) ID of the post whose thumbnail you want to get, $ post_thumbnail_id ( integer) Thumbnail ID, $ size ( string | array) thumbnail size, $ attr ( array) an array of HTML attributes that were specified when calling the function, if not specified, then an empty array;

Now for some interesting examples.

Example 1. Automatic linking to a post

The trick is that every time you use the get_the_post_tumbnail () function, the thumbnails will already be returned with automatically added links to the post.

function true_auto_linking ($ html, $ post_id, $ post_thumbnail_id, $ size, $ attr) (return "". $ html. "";) add_filter ("post_thumbnail_html", "true_auto_linking", 10, 5);

Cool, yeah? And most importantly, everything is very simple.

Example 2. Returning only the thumbnail URL

Misha Rudrastykh

If you need help with your site or maybe even developing from scratch -.

On many blogs, next to the post description, you can find a small (large) thumbnail that should convey the content of the post. Until some time, it was not easy to create such a thing. With the advent of Wordpress 2.9, this has become much easier.

In this tutorial, I'll show you how to add this functionality to your Wordpress templates.

Turning onPost-Thumbnail functions in templates

Switching on is very simple. All you have to do is add one line in your functions.php file:

Add_theme_support ("post-thumbnails");

Inserting thumbnails for posts

When you go to the admin panel in the section for writing a new post, you should see a new section on the side of the page.

Note that the new department may be out of sight and you will have to go a little lower. After clicking Set thumbnail a new dialog box appears

Click Use as thumbnail and a thumbnail will be added to your post:

Displaying thumbnails

After we have written the news, let's add it. In order for the thumbnail to be displayed, you need to add a line to the loop Wordpress. Open the index.php file and add the following:

This will display the image using the classes attachment-post-thumbnail and wp-post-image. C with these classes we can style the appearance of the thumbnails using CSS. In the image below, we can see a thumbnail with a border and an indented one.

In the picture above, the thumbnail is quite large. Its size can be changed from the admin panel Settings> Media.

Another way to determine the size of the thumbnail is to change the file functions.php. To do this, we need to add one more line:

Add_theme_support ("post-thumbnails"); set_post_thumbnail_size (588, 250, true);

Now we need to inform Wordpress, to use that size. It is required to slightly modify our loop in index.php:

Wordpress now knows exactly which version of the thumbnail to use. Here's what we got:

Now let's add some more PHP to the single.php file so that when the message is opened, the thumbnail is at the very top:

Adding more thumbnail sizes

If you want the thumbnails on the main page to be of the same size, and on the message page of another, you need to do the following.

The point is this: we want a large image on the post page, and a small one on the main one. To do this, we need to add one more thumbnail size to the function file:

Add_image_size ("loopThumb", 588, 125, true);

Description of arguments:

Loopthumb - name of the new thumbnail size
- 588 - width in pixels
- 125 - height
- true - setting that reports Wordpress whether to use slider tools to resize the image

We will need to change our code in the file index.php:

It should also be noted that we will have two new styles to control the appearance of the new size thumbnail: a ttachment-loopThumb and wp-post-image. It might be helpful to refer to the class wp-post-image in the stylesheet, or add your own class when referring to the thumbnail:

"loopyThumbs")); ?>

This will output an img tag with the following classes: loopyThumbs and wp-post-image.

Let's say we want to make square thumbnails, then we need to create a new size:

Add_image_size ("squareThumb", 125, 125, true);

Also, you might want the thumbnails to be on the left and have a slight indent on the right:

Attachment-post-thumbnail (float: left; margin-right: 10px;)

Now we change the code to index.php to display our square:

Here's what we get:

If you add previously uploaded images as thumbnails, you may have uneven squares. This is due to the fact that when loading images Wordpress could not have foreseen that in the future you will want to use square miniatures.

But there is a way out in this situation. The plugin will help us Regenerate Thumbnails. After installing the plugin - go Tools> Regen and generate new miniatures ( Regenerate all Thumbnails ). After that, we will have even squares.

And remember - to display thumbnails you must have Wordpress 2.9.

Hopefully You liked the tutorial. Until next time!