With the latest release of WordPress, from 2.9 +, we have introduced a new feature very useful to manage thumbnails, or thumbnails. This feature, however, it must be activated in the theme, namely, acting on the file functions.php . This new feature is useful in many contexts and provides a simple and convenient tool both for those who develop a website using WordPress is the final customer which will then manage the content.
In versions of WordPress prior to 2.9, in fact, many developers used the custom fields (custom fields) to provide customers with the ability to add an image - external - to the post. If that solution from the point of view of the developer was not particularly burdensome, however rendeve editing the post quite inconvenient, especially if we consider that often is the end customer to take care of the content. Other solutions could be to take advantage of those already Plugin facts or write one ad-hoc. With the release of 2.9 +, however, it can trigger a management "thumbnails" with a few lines of code, finding himself in the backend everything already done, making the process of insertion of the post really more comfortable and clear.
Enable the new post-thumbnails
To enable the management on the backend of the "Thumbnail article" simply edit the file functions.php and insert the following line of code:
1 | ) ; add_theme_support ('post-thumbnails'); |
Or, even better, in order to compatibilià and stability:
1 2 3 | function_exists ( 'add_theme_support' ) ) { if ( function_exists ('add_theme_support')) { ) ; add_theme_support ('post-thumbnails'); } |
Once this is done, entering in the administration and going to edit a post, we will find a new panel on the right sidebar:
Click on "Set Thumbnail" will open the classic panel already used to attach images and media. When we chose our image, when you put it we have the new "Use it as a miniature":
The activation can be controlled even better using:
1 2 3 4 |
You can also choose the size of this "miniature", olre that operate in the new image editor made available by WordPress:
1 2 | / / 50 pixels wide by 50 pixels tall, box resize mode , 50 ) ; set_post_thumbnail_size (50, 50); |
Use the thumbnail
At this point there is nothing left but to use the thumbnail within our template:
1 | the_post_thumbnail (); |
Following the standard WordPress is also available without echo :
1 | get_the_post_thumbnail (); |
It is also possible to pass a set of parameters to this function, which makes it really versatile, such as:
1 2 3 4 5 6 | / / Show the thumbnail ) ; the_post_thumbnail ('thumbnail'); / / The Medium version ) ; the_post_thumbnail ('medium'); / / The Large version ) ; the_post_thumbnail ('large'); |
, cosa comodissima all'interno di “loop” personalizzati: You can also set other parameters such as the attributes of the tag img alt and title , which is convenient in "loop" custom:
1 |
Also for the "retrocompatibilià" a good implementation of this new function could be:
1 2 3 4 5 6 7 8 9 10 11 12 | function_exists ( 'has_post_thumbnail' ) ) && ( has_post_thumbnail ( ) ) ) { if (( function_exists ('has_post_thumbnail')) && (has_post_thumbnail ())) { / / Wordpress 2.9 + use the embedded thumbnail the_post_thumbnail (); { Else {} / / Wordpress 2.8 and earlier - use the technique of the custom field / / Use a custom field called "field-thumbnail" or the way you like it / / Contains the url of an image get_post_meta ( $post -> ID , 'campo-thumbnail' , true ) ; $ PostImage = get_post_meta ($ post -> ID, 'thumbnail-field', true); $postimage ) { if ($ PostImage) { . $postimage . '" alt="" />' ; echo '<img src="'. $postimage.'" alt="" />'; } } |
Additional notes and examples
This feature is very useful and has been introduced in a comprehensive manner. I suggest, however, view the documentation offcial WordPress which details in full all of the functions and their parameters. By way of further example, here is how to set a thumbnail of 64 × 64 pixels with hard-crop and use the same image in single post by changing the settings of the width (eg 512) and height (infinite entering 9999):
1 2 3 4 | / / In the file functions.php ) ; add_theme_support ('post-thumbnails'); , 64 , true ) ; set_post_thumbnail_size (64, 64, true); , 512 , 9999 ) ; add_image_size ('single-post-thumbnail', 512, 9999); |
On the home page, for example, we will use:
1 | the_post_thumbnail (); |
In the file single.php we will use:
1 | ) ; the_post_thumbnail ('single-post-thumbnail'); |
[...] WordPress 2.9 +: the new function thumbnails post I explained how to use the new management thumbnails, thumbnails, [...]
but what is the difference between these 2 lines? that generates results??
On the home page, for example, we will use:
In single.php file we will use:
@ Joseph: the first shows a thumbnail with the default size, those set by:
the second is to set a thumbnail our staff with different sizes, for example:
2
thumbnail ' ); the_post_thumbnail (my - thumbnail ');
in this way we can have different thumbnail, depending on our needs, on pages and different contexts. All made by setting a one-time "miniature".
[...] New feature thumbnail of WordPress, introduced with version 2.9 and discussed in WordPress 2.9 +: the new function, post thumbnails, can be automated using a simple PHP script. This can be handy when [...]
Greetings to all,
how can I change the name (label) in the administration of the thumbnail. Instead of "Image out" in Italian of course.
Currently I started using wordpress 3.0 with the plugin "multiple post thumbnails."
@ Emanuele: I do not understand what you mean, did you mean to "Set Thumbnail"? You can try using the filter:
2
3
4
5
6
/ / In $ content is the output shown in the backend
/ / "Set Thumbnail"
}
, 'custom_admin_post_thumbnail_html' ) ; add_filter ('admin_post_thumbnail_html', 'custom_admin_post_thumbnail_html');
If I misunderstood the question riptoponi. Greetings
@ Giovan Battista Fazioli:
I mean the label of the field thumbnail where it says "Image out"
I would be interested in facts also change the internal link "Set featured image" in practice as you know is the link that allows you to upload the image to the library
Meanwhile, thank you very much
@ Emanuele:
Oops sorry I using wordpress 3.0 as a translation Italian label has just the "Image out" whereas before it was (as in your tutorial) "Thumbnail article."
@ Emanuele: Ok, now I am clear. Simply enter this code in the file
functions.phpof the theme you're using active:2
3
4
5
, 'post' , 'side' ) ; remove_meta_box ('postimagediv', 'post', 'side');
, 'Quello che vuoi' , 'post_thumbnail_meta_box' , 'post' , 'side' , 'low' ) ; add_meta_box ('postimagediv', 'What You Want', 'post_thumbnail_meta_box', 'post', 'side', 'low');
}
, 'customposttype_image_box' ) ; add_action ('do_meta_boxes', 'customposttype_image_box');
Replaces, possibly by using the localization, the string
excuse the game of "texts". I hope you will help.
Quello che vuoiwith chee What are youThank you for this post!
Thank you very much for the clarification on the use of the new function, which until now I had left dark!
A question: is there a way - or plugin - to automatically create a grid of "thumbs", hinting Article of belonging?
(Any help will be appreciated)
@ Doz: of course! The all you can do it without a plugin. Just create a function in the file
functions.phplike this:2
3
4
5
6
7
8
9
10
; global $ post;
new WP_Query ( 'category_name=blog&showposts=10' ) ; $ ThumbnailsPosts = new WP_Query ('category_name = blog & showposts = 10');
'' ; $ O ='';
$thumbnailsPosts -> have_posts ( ) ) { while ($ thumbnailsPosts -> have_posts ()) {
the_post ( ) ; $ ThumbnailsPosts -> the_post ();
'<a href="' . get_permalink ( ) . '" $ Or. = '<A href = "'. Get_permalink (). '"
}
; echo $ o;
}
After that, in the theme file
index.phpfor example, you can call this function, adding the point that you see fit:. In the function
creaGriglia()above I extracted the top 10 posts from the categoryblog. By modifying the query parameters and HTML, you can create a simple one you requested. Above, you see, I put the "thumbnails" side by side. Inserting the "tagging" appropriate can format the output as you see fit. Hope that help.@ Giovan Battista Fazioli:
Hey there, that speed, that disponbiiità!
As soon as I have a moment I try your code, thanks a lot!
HELLO
I'm testing the code since the release of 2.9 and the hard-cropping does not work mica.Su this point of view timthumb works much better if it were not that the output image is of a much lower quality than the input.
I set a thumbnail of 60x60px with hard cropping, I uploaded an image 600x300px but the function is not hard cropping of it to work ... any ideas?
hello .. and shortly I use wordpress and codes I understand less than zero .. my probema and .. on the home page I posted images of size 320 x 320 obtaining the code imageshak .... and comparing it with the entire post that image out of place being too broad and in doing so the order of 10 posts per page this is long ... now i searched the web but have not found the solution I was looking for you ... or you can ask that images reduce in size as 100 x 100? bearing in mind that once used the read more page that highlights the natural image 320 x 320 .... Now having had experience with this blogger template in the code had the function of editing images on the home page .. wordpress could have the same function or you have to opt for another solution? .. thanks to those who will know to give useful advice on how to proceed ... sandro
[...] Followed this tutorial and it works http://www.undolog.com/2010/04/09/wordpress-2-9-la-nuova-funzione-post-thumbnails/ but the images (the same items ) that I go to insert as thumbnail images are [...]
. Hello congratulations for the blog, I have a question, I have a gallery that loads images from custom fields of posts, in theory I create a variable named
$BG_imagewith the link to the photo typehttp://www.miosito7immagine/foto.jpg.How can I put in place of the photo link in evidence, if I transform this
in
I'm not a php expert as you may have already seen ...
@ Gianluca: could you explain the problem better, I did not understand what you want to achieve.
I now understand that I should not put the signs of opening and closing php, I apologize
Nn ... I go .. What's wrong?
I'm using a theme that has the timthumb.php but this does not work because I installed a WPMU.
In
functions.php2
3
, 64 , true ) ; set_post_thumbnail_size (64, 64, true);
, 512 , 9999 ) ; add_image_size ('single-post-thumbnail', 512, 9999);
(subito dopo get_header) perchè index mi da
Templatepath. '/front.php'Inindex.phpandfront.php(immediately after get_header) because it gives me indexTemplatepath. '/front.php'Templatepath. '/front.php'And in
single.php(immediately after get_header)this is done, things do not change
hello I can not change the size of the tumb. in the file
function.phpI write this:but does not change size.
What should I do??
thank you
paolo
@ Paul: it does not work because the thumbnail you've already created. You must delete the file and reload it to make sure that the new setting to be seen. The thumbnail, in fact, are not generated runtime when the function is called, but when you create the first time in the backend; think if WordPress recreated "on the fly" all the thumbnail of a site with 2000 items ...
That setting, say, is not retroactive!
A hello to all.
I tested the function
creaGriglia()described above but did not work.I wish that every click on a category I come out the thumb relative to the same category, or perhaps through
add_image_sizecreate a new dimension and put it in a nice gallery jquery.I could make a direct query to the database, I can see where they are displayed, but there will be an easier way ...!
Thanks in advance!
@ Federico: you may not work for various reasons, for example you have set the thumbnail, or the class does not have a blog ... exactly what happens to you? Get some error message?
I beg your pardon ... I do not have a category blog ...!
Now it works perfectly, the customize it by incorporating a gallery, I should be able, as I see it is possible to work well in the function.
Thank you and I renew my apology.
Hello,
thanks for your guide really useful. I wanted to ask is there a way to automatically fit the new option to the previous post where the thumbnails were gestitie using custom fields or do I have to manually add the thumbnails for all the old posts? I hope you can help me, thanks in advance to all
Tiziana
@ Tiziana: you can do both. As indicated in the article above, if you use a code like this:
2
3
4
5
6
7
8
9
10
11
12
/ / Wordpress 2.9 + use the embedded thumbnail
the_post_thumbnail ();
{ Else {}
/ / Wordpress 2.8 and earlier - use the technique of the custom field
/ / Use a custom field called "field-thumbnail" or as
/ / You want that contains the url of an image
get_post_meta ( $post -> ID , 'campo-thumbnail' , true ) ; $ PostImage = get_post_meta ($ post -> ID, 'thumbnail-field', true);
$postimage ) { if ($ PostImage) {
. $postimage . '" alt="" />' ; echo '<img src="'. $postimage.'" alt="" />';
}
}
You can see the thumbnail of new products and, if so, to extract from the post-destination address of the image of the old items, that is, those that we used a meta tag.
You can also reapply to all articles the new functionality, please read How to set automatic thumbnails of all posts
Hello,
but this code is that you have shown me in automatically puts even the thumbnail on the homepage of the post for the old who have through custom fields? Thanks
Hello I solved doing as written in the link you provided. Thanks
Hello as said
. I inserted the code that you have shown me on other blogs but it does not work does not recognize the old thumbnails (managed via custom fields). How can I solve this problem? I hope you can help me, thanks
Tiziana
Hello everyone and congratulations for the excellent post
Since we're on the subject I wanted to ask one thing, I'm using the plugin "Category Posts" which allows you to place a widget with the posts you want for each category, of course, also displaying the thumb linked article for each category.
The default plugin inserts the thumbnail after the name of the post, but I would like at the beginning and then the name of the post. How could I do?
Hello,
congratulations for your blog.
I managed to activate the display of thumbnails following your instructions, however, I view them also inside the post despite the
function.phphas added the line:How do I prevent the display of the thumb inside the post?
Thanks
Alfredo
@ Alfredo: a possible cause could be that something else has activated the thumbnails on the post, as the line of code that you used appears to be correct. To test you could place before
add_theme_support:Let me know if it works? In the meantime I I investigate.
Ok, everything works. Thanks for your time 'in practice by entering:
2
3
4
5
6
7
8
9
10
11
12
/ / Wordpress 2.9 + use the embedded thumbnail
the_post_thumbnail ();
{ Else {}
/ / Wordpress 2.8 and earlier - use the technique of the custom field
/ / Use a custom field called "field-thumbnail" or the way you like it
/ / Contains the url of an image
get_post_meta ( $post -> ID , 'campo-thumbnail' , true ) ; $ PostImage = get_post_meta ($ post -> ID, 'thumbnail-field', true);
$postimage ) { if ($ PostImage) {
; echo'';
}
}
I was upgraded more 'page themes. Now I ask you something.
I need to put the loaded image
the_post_thumbnail();on a div, to put the text above.So I need to get only the "src" and then pass it to the css.
Thanks
@ Jgor: you can do in various ways. To get the code (and output) you can use
get_the_post_thumbnail(). This function, however, gives you back all the HTML markup.This function, however, for information, is attached to the filter
post_thumbnail_html.che vuole come parametro l'ID del thumbanail. If you want to get only the url of the image to be included in the attribute then
src, you can usewp_get_attachment_thumb_url()that takes as a parameter the ID of thumbanail. This means you get itget_post_thumbnail_id(), which takes as a parameter the ID of the post.@ Giovan Battista Fazioli:
Thank you very much! ^ _ ^
congratulations for the work done. Have you counted a place in my rss-reader ^ _ ^
hello, I use wp 3.2.1 installed with the theme Costelo. my problem 'that I can not delete images in preview, thumbnail anyway ... when I go to click on the link "remove image evidence" on the link and read ... action = edit # and clicking nothing happens ... same problem in trying to change the status of visibility 'and other little things but that' I can change by changing fast ... in short, the problem remains for me to remove the thumbnails ... what 's the command that I use to remove the preview (the link that I have to show Move your mouse over to "remove image"? file in which I have to go to restore the correct code?
gazie
Hello, I would kindly need to know if these strings are used to activate the display of thumbnails in the post, I do not understand anything of this language but I have seen that the function
add_theme_support('post-thumbnails');is present in my chart, in If all serve even the previews where I should place them exactly? can you give me a hand?thanks
@ Simona: the function you indicated adds (or ability if you prefer) the ability to set the thumbnail for each post, but by itself it does not display anything. If I understand correctly:
to do this there are usually three ways:
1) Use a theme that already permits
2) Install a Plugin
3) Act manually
Excluding the first, which you can fix by myself, if I wanted to automatically display thumbnails (if any) in a post just add these lines of code to your file
functions.phpin the folder of your active theme:2
3
4
5
6
7
8
9
10
11
12
; global $ post;
$content ; $ Original_content = $ content;
current_theme_supports ( 'post-thumbnails' ) ) { if (current_theme_supports ('post-thumbnails')) {
the_post_thumbnail ( ) ; $ Content = the_post_thumbnail ();
$original_content ; $ Content. = $ Original_content;
}
; return $ content;
}
, 'showThumbnail' ) ; add_filter ('the_content', 'showThumbnail');
Code like the above will find many on the net, according to your needs. I'll I've created a simple as possible to keep them straight. I understand that if you're not a "technical" can be frustrating and tiring experience, better then a pre-made theme or use of a plugin. Hope that help ...
@ Vito :: The link is correct, since the removal of the thumbnail is via Javascript, here is an example:
Probably, from what I understand, your problem is a malfunction of the theme, something hard to fix from here ...
@ Giovan Battista Fazioli ::
Thanks!!
)))
very very nice ... I'll try ... I do not work at the most nothing
Have a nice day.
[...] Allows you to associate a thumbnail to a post, page, or custom post. If it is easy to extract from the entire image code, thanks [...]
Congratulations!
Help extremely interesting.
Council in case you want to restore all the thumbs plugin Regenerate Thumbnails
Hello I wanted to ask how you can help:
in the post I uploaded a gallery of 50 images, for example, then the queue will be displayed in Article 50 miniatures 100 × 100. I would like to figure out how to display only 5 under the article and click on one of these pictures I found on page 5, which already exists (attachment.php), with the complete gallery of all 50 images.
Thanks
But how can you create and associate it with the thumb post as imamgine out?
Hi, I'm sorry to resurrect an old post but I hope you can give me a hand. How do I, with this method, for use of the images loaded from an external link http://www.sito.it/image.jpg ?
For now I can only upload images in my hosting but I want to ease the burden on space. How can I do?
Thanks in advance
@ GM: If you have already uploaded the picture on a different server (WordPress can not do this to her) can set up a miniature selecting the tab URL of origin as shown in this post (at the beginning of the article). In this way, WordPress will use an absolute address to treat this miniature.
Obviously 'you lose' any downsizing of the same, you have to do on the remote server and / or acting through cascading style sheets.
Synthetic and very effective, I've solved a huge problem
hello!
Hello,
compliments for the blog, I'm going crazy to resize images in thumbnail, featured in the image on the home page and in the articles, that I should upload an image through "images in evidence" of wordpress actual size 1024 × 800 and we put this should automatically resize the thumbnail preset as mentioned earlier in various situations, resizing it does but they are all cut and not proportionate to the thumbnail, I state that in the template that I use is called Exciter (of izithemes) is a function that seems to me using a plug-ins called "Custom Image Sizes"
Here you have an example of what I mean:
the homepage is so, all images cropped and not proportionate
http://i638.photobucket.com/albums/uu110/z-Traxx/Album3/Hompage.png
ditto for the article
http://i638.photobucket.com/albums/uu110/z-Traxx/Album3/Article.png
I do not know much about html, if I send the case to the template or in any other way you could you help me, it's probably bullshit but I do not know where to turn, I'm mad at
Hello thanks
@ Mario: I think it's a problem of proportions, not so much of the crop. If the size of a thumbnail is fixed as 100 × 100, that Quadrada, the only way to have a proportional image and uncut is to send an image with the same ratio: 512 × 512, 1024 × 1024 , etc ...
@ Giovan Battista Fazioli:
The problem is just that, but as you see on the homepage there are 3 kinds of size, rectangular Featured which is cut as high as in the article, then there is the square icon on the right side and that is cut in the rectangle smaller than the magazine that is cut into the side, and should do all this by loading only a picture otherwise it would make more sense, the beauty is that since version 2.3 was I added an Auto-resize thumbnails as described http://www. mojo-themes.com/item/exciter-magazine-wordpress-themes / I tried to ask questions to the author ache but still no answers
The beauty is that trying an older version dated at least he did in homapage as concerned the 2 thumbnail small but new versions have changed the code and it is not like before, boh not know what to do
hello to everyone!
I too have the same problem as Mario.
I bought the theme from ThemeForest Eventure, it's beautiful but it has this flaw: every time I create a new event I can choose one and only one image in evidence, which may not even appear in the body of the post but not sure if I choose to go fill in the spaces that the theme has budgeted as thumbnails, in blogs and on the home page ....
the point is that the bigger picture (ie the one to follow to make sure that the others do not sgranino) measuring 900 × 350 pixels, while the thumbnails in the blog force the width to 600, croppando ONLY the horizontal side of 150 pixels per part starting from the center, then even without deforming the image I a lever portion from both sides.
the only solution I found was to put images with an abundance of empty field just 150 pixels per side. this allows me to not lose visual information passing from one page to another, but it certainly is not the best solution aesthetically ....
nowhere did I find pieces of code that regulate this crop, it would be great to be able to find out if there is a way to adjust it or at least change the anchor point (already croppa that bad, it does so in two opposite sides ax).
I hope someone has news about! thank you!
@ Giovan Battista Fazioli:
Excellent article, I've pretty much eaten. Let me ask you a question, however, as even I have a problem with putting the image out to an external URL. I tried entering the URL in the URL tab of origin but then what? What should I do exactly? I have tried in various way, but I can only put the picture linked in the post and not as an image in evidence.
Thanks in advance,
Den
@ Den: With external URLs I'm afraid you can not do it. The image must reside in the media of WordPress, that is, between the images you have uploaded to the system in order to choose "use as a thumbnail." You can try to save the image locally, and then to insert it into WordPress. In this way certainly works.
Can anyone tell me why I can not longer the preview image of the posts on this site http://www.cosimofrezzolini.com/ At some point it stopped working. They are simply articles in gallery format. Now trying to set a picture as evidence in puts me in the head while the article before I did not have to do anything, help me!
Hello,
I have a problem and I hope to get some help. I have some simple post and I would like to automatically generate a jpg with the screenshot of the post itself, so you do not have to "photograph" each time to insert it in the preview image. One suggestion?
Gianni
@ Roberto:
ops:
2
3
<? Php the_post_thumbnail ('front', array ('class' => 'aligncenter'));?>
</ A>
hello @ Giovan Battista Fazioli, thanks for all the explanations of this excellent guide. I have a question from ports: as you can manage a set of 80 different types of thumbnails for a complex portal, and with many categories, without generating all 80 thumbnails for each image loaded?
Hello!
I'll explain my doubt. When I write a post not add pictures in the article (if it did, then selezionassi the "featured image" I find myself 2 equal inside the post). Then, clicking on the image out, I select the one to be inserted directly from gallery (previously loaded). Of course, I am referring only to the case where the image is to be published only one.
Now I wonder ... in this way the image is indexed? I doing something wrong?
Twisted reasoning, I know, but I hope you can help me!
Hello!
I try to ask a help to solve my problem. I'm migrating my blog from tumblr to wordpress for a more complete blog with a lot of sections. The Gallery of the post but I are creating problems, because I can not replicate the thumbnails of my templates tumblr (Juneau), which are adapted according to the number and size of pictures that you enter each time, thus giving me an infinite visual variety .
In what ways, if any, can I get the same result on wordpress?
I would also like to know, in case, if I need to import each post individually and then every simgola photos, or if there is a way to set the automatic import causing the thumbnails tumblr remain the same in wordpress, so that the photo of the old posts are not cut off or distorted.
I do not know how to thank you!
Good evening,
Daniela