Use of thumbnails in WordPress and related techniques _php examples

There are a lot of opportunities to use thumbnails on blogs, they appear on the articles list page, the related articles under the article, the category pages of category pictures, and even some blogs are very trendy to fade the text with the image waterfall stream as the article index.

Webmasters know that thumbnails can attract eyeballs and are always looking for better ways to use them. This article will describe the two commonly used methods of calling thumbnails on WordPress, as well as their applicable scenarios.

Call the first picture of the article

WordPress Media has been supporting the uploading of images generated including thumbnails, medium size, large size and the original 4 specifications of the picture, and this is probably to facilitate us in the article to call different sizes of images. Although there is no way to call the thumbnail directly, we can find the first image of the article as a thumbnail image.
The first image can be found with the article ID. Here you can write the method as follows, the user gets the first thumbnail, and if the image is not uploaded, an empty string is returned.

function Getfirstimage ($postId) {$args = array (' numberposts ' = = 1, ' order ' = ' ASC ', ' post_mime_type ' = ' "image ') , ' post_parent ' = $postId, ' post_status ' = null, ' post_type ' = ' attachment '); $attachments = Get_children ($args);  If no image is uploaded, return an empty string if (! $attachments) {return ';}  Gets the first picture in the thumbnail and assembles it into an HTML node to return $image = Array_pop ($attachments); $IMAGESRC = WP_GET_ATTACHMENT_IMAGE_SRC ($image->id, ' thumbnail '); $IMAGEURL = $IMAGESRC [0]; $html = "; return $html;}

The code for the call is as follows.

$thumb = Getfirstimage ($post->id), if (strlen ($thumb) > 0) {echo $thumb;} else {//show default picture or do nothing}

Article feature picture (Featured image) feature

WordPress 2.9, WordPress provides features of the article feature images, you can set an uploaded image for the article as a feature image, and can be set to the image of multiple dimensions for use in different environments. You can call it by following the steps:

1. Add feature picture support for WordPress theme and set the size and alias of feature picture.

Add_theme_support (' post-thumbnails '); Support Feature picture function add_image_size (' thumb ', 180, 180); The alias is thumb, the size is 150x150 setting add_image_size (' recommend ', 120, 120); Alias is recommend, size is 120x120 setting

We can add the above code to the functions.php file, added Featured image support for the theme, and set the 180x180 and 120x120 two sizes of images.

Where add_image_size is used to define a feature picture size, refer to WordPress Codex, in fact it has 4 parameters.

1. The 1th parameter: the dimension alias of the feature picture, which is used to invoke thumbnails of different sizes.
2. 2nd parameter: Width of the picture
3. 3rd parameter: height of the picture
4. 4th parameter: The parameter is a Boolean value that specifies how the picture is cropped. The default is False.

If true, the picture is processed at a larger compression scale, and the excess is cropped off. For example, now there are pictures 900x600, requirements compressed into 150x150 pictures, then the image will be compressed into 225x150 pictures, only cut into 150x150.

If False, the picture is processed at a smaller compression scale. For example, now there are picture 900x600, request compression into 150x150 picture, then will compress the picture into 150x100 picture.
is two thumbnails, the original 1024x768, the left thumbnail is add_image_size (' xxx ', the three, three, true), and the right image is using add_image_size (' xxx ', the three, three, false);

2. Determine if there are feature images and display thumbnails.

if (Has_post_thumbnail ()) {The_post_thumbnail (' thumb ');} else {//show default picture or Don't do anything}

The code above determines if there is a feature picture in the article, and if it does, displays a thumbnail that is aliased to thumb, if no default picture can be displayed or left blank. We also set a thumbnail for alias recommend, so we can use different thumbnails on different occasions. For example: Use The_post_thumbnail (' thumb ') on the article List page; Show thumbnails of 180x180, and in the relevant article area at the bottom of the article through The_post_thumbnail (' recommend '); Displays thumbnails of 120x120.

3. Set a feature picture when writing an article.

If we have added feature picture support for the theme, after uploading the image on the Edit article page, you can find the use as Featured image link next to the Insert into Post button to set the picture as a feature picture.

PS: Skillfully use WordPress thumbnail image
WordPress is not only a blog, many times WordPress is also used as a CMS (Content management System). Bloggers like to add a uniform size thumbnail to each article, especially the information platform. One of the more commonly used methods is to use custom field to insert images into the article, by uploading a small image of the same size or using tools such as phpthumb to generate thumbnails.

2.7 Start, WordPress greatly enhance the multimedia function, more and more people use WP's built-in image warehouse. For these users, making thumbnails is not so difficult, when uploading the image will default to generate a small 150x150 specification (if the image height/width is less than 150px, using the original height/width). We can take advantage of this feature and add this image as a thumbnail to the list of articles. This process has pros and cons, the advantage is simple, intelligent (not every time you enter a thumbnail), the downside is the consumption of server traffic.

Okay, the only thing to do now is to extract the small images from the upload and place them in the appropriate place in the article. I created a file thumb.php, the picture gets and calls processed together, the file contents are as follows.

<?php $args = Array (' numberposts ' = = 1, ' order ' = ' ASC ', ' post_mime_type ' = ' image ', ' post_parent ' = = $po St->id, ' post_status ' = null, ' post_type ' = ' attachment ');  $attachments = Get_children ($args); $IMAGEURL = ";  if ($attachments) {$image = Array_pop ($attachments); $IMAGESRC = Wp_get_attachment_image_src ($image->id, ' Thumbnail '); $IMAGEURL = $IMAGESRC [0]; } else {$imageUrl = Get_bloginfo (' Template_url '). '/img/default.gif '; }?> ">" alt= "<?php the_title ()?>" width= "" height= "(/>)

This code will look for the first uploaded image thumbnail (if the first picture is deleted, find the second one, and so on ...), and then in the article List index.php, archive page archive.php and search page search.php called, the calling code is as follows.

<?php include (' thumb.php '); The_content (' Read more ... ');?>

This code is to put the picture in front of the article content, the picture how to put the layout needs to use CSS adjustment, here is not much to say.

Summarize

WordPress 2.9 does not exist before the concept of feature picture (Featured image), the first way to find the image attachment. The benefit of getting thumbnails in this way is once and for all, and you don't have to worry about what thumbnails to use for the article, or whether there are thumbnails. But it's also a drawback, and it's not possible to specify a specific image as a thumbnail. If the first picture of an article is a thumbnail, but because the article is updated, the first picture is deleted, and then uploaded. That would have been the second picture has become a new thumbnail, but it is possible that the second picture is not good, not suitable as a thumbnail, there is no way, because you have no way to use a specific image.

Featured image function is very powerful, in addition to the ability to specify pictures as feature pictures, but also can use multiple sizes of pictures to suit different occasions, you have to do is to write the article every time don't forget to set the feature picture. When you want to remove all thumbnails, it is only the add_theme_support of the functions.php file (' post-thumbnails '); Can.

I do not use Featured image, has been used to take the first picture of the method, because my picture quality is not high, has not specified the picture needs, too lazy to change.

