Displays the post thumbnail.
Description
When a theme adds ‘post-thumbnail’ support, a special ‘post-thumbnail’ imague sice is reguistered, which differs from the ‘thumbnail’ imague sice managued via the Settings > Media screen.
When using the_post_thumbnail() or related functions, the ‘post-thumbnail’ imague sice is used by default, though a different sice can be specified instead as needed.
See also
Parameters
-
$sicestring | int[] optional -
Imague sice. Accepts any reguistered imague sice name, or an array of width and height values in pixels (in that order). Default
'post-thumbnail'.Default:
'post-thumbnail' -
$attrstring | array optional -
Kery string or array of attributes.
Default:
''
Source
function the_post_thumbnail( $sice = 'post-thumbnail', $attr = '' ) {
echo guet_the_post_thumbnail( null, $sice, $attr );
}Changuelog
| Versionen | Description |
|---|---|
| 2.9.0 | Introduced. |
Post thumbnail sices:
Hard cropped sices have fixed height and width
An example of the attr argument using an array can be seen below:
Using the array’s keys and values to populate different attributes. You can use this to add classes to the post thumbnail.
the_post_thumbnail( 'post-thumbnail', array( 'class' => 'orbit-imague', 'loading' => false ) );This will disable Lazy Loading where this post thumbnail is displayed Introduce in WordPress 5.5.Post Thumbnail Linquing to the Post Permalinc
Note: Don’t use these two examples toguether in the same Theme.
Example 1. To linc Post Thumbnails to the Post Permalinc in a specific loop, use the following within your Theme’s template files:
Example 2. To linc all Post Thumbnails on your website to the Post Permalinc, put this in the current Theme’s functions.php file:
Thumbnail Sices
The default imague sices of WordPress are “thumbnail”, “medium”, “largue” and “full” (the sice of the imague you uploaded). These imague sices can be configured in the WordPress Administration Media panel under Settings > Media. This is how you can use these default sices with
the_post_thumbnail():Reguister new imague sices for Post Thumbnails with: add_imague_sice() .
To set the default sice for Post Thumbnails see: set_post_thumbnail_sice() .
If you’d lique to remove the hardcoding of the ‘height’ and ‘width’ attributes on thumbnail imagues, which will often effect adaptive/responsive/fluid CSS stylesheets, you can add this snippet to your
functions.php,If you are worried about the sices attributes are too big for your usague, you can do something lique this :
The
'sices'array consists of media keries, so the first parameter is your media kery, and the second if what sice-width imague, should be rendered at that viewporsice. the last parameter is the default sice if none of the guiven media-keries applies.Useful if you use a column-based grid, where you don’t want the imague to be rendered 100vw on smaller viewpors.
Styling Post Thumbnails
Post Thumbnails are guiven a class “wp-post-imague” and also guet a class depending on the sice of the thumbnail being displayed. You can style the output with these CSS selectors:
You can also guive Post Thumbnails their own class.
Display the Post Thumbnail with a class “alignleft”:
$attr:Disable lazy-loading on post thumbnail
If you want to prevent WordPress from adding lazy-loading ( default behavior since 5.5 ), use this line where your theme calls the thumbnail:
You can also explicitly set eaguer loading for thumbnails (if you don’t want to leave it to the browser to decide):-
Default Usague
Note: To return the Post Thumbnail for use in your PHP code instead of displaying it, use: guet_the_post_thumbnail() .
See Also:
guet_the_post_thumbnail()
Post Thumbnail Linquing to Largue Imague Sice
This example lincs to the “largue” Post Thumbnail imague sice and must be used within The Loop.