The use of thumbnails in WordPress and related techniques _php examples

There are a lot of opportunities to use thumbnails on blogs, they appear in the Articles list page, the articles below the article, the category of the category page pictures, and even some blogs are very trendy to dilute the text to the image waterfall stream as the article index.

Webmasters know that thumbnails can attract eyeballs and have been looking for better ways to use them. This article will introduce the two common methods of calling thumbnails on WordPress, and their application scenarios.

Call the first picture of an article

WordPress Media has been supporting the upload of image generation including thumbnails, medium size, large size and original 4 specifications of the picture, which I am afraid is for the convenience of us in the article call different sizes of pictures. Although there is no way to call the thumbnail directly, we can find the first picture of the article as a thumbnail.
The first picture can be found with the article ID. This can be written as follows: The user gets the first thumbnail, and returns an empty string if no pictures have been uploaded.

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 picture is uploaded, return an empty string if
 (! $attachments) {returns
 ';
 }
 
 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 that is invoked 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, you can set an upload for the article image as a feature picture, and can be set to a number of pictures in order to use in different environments. You can click the steps to call:

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 features
 
add_image_size (' thumb ', 180, 180);//alias is thumb, 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, adding featured image support for the topic, and setting the 180x180 and 120x120 two sizes of pictures.

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

1. 1th parameter: The size alias of the feature picture, used to invoke thumbnails of different sizes.
2. 2nd parameter: The 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 trimmed. The default is False.

If true, the picture is processed at a larger compression scale, and the extra part is trimmed off. For example now have picture 900x600, request compress into 150x150 picture, then will compress picture into 225x150 picture first, cut into 150x150.

If False, the picture is processed at a smaller compression scale. For example now has the picture 900x600, requests compresses into the 150x150 picture, then will compress the picture into the 150x100 picture.
The figure below is a two thumbnail, the original is 1024x768, and the left thumbnail is add_image_size (' xxx ', ","), and the right image uses add_image_size (' xxx ', ","), and false.

2. Determine if there is a feature picture and display thumbnails.

if (Has_post_thumbnail ()) {
 the_post_thumbnail (' thumb ');
} else {
 //show default picture or do nothing
}

The code above determines whether a feature picture exists in the article, and if it exists, displays a thumbnail with an alias of thumb, or if no default picture can be displayed or left blank. We also have a thumbnail with the alias recommend in front, so we can use different thumbnails on different occasions. For example: In the article List page use The_post_thumbnail (' thumb '); Show 180x180 thumbnails, while the relevant articles at the bottom of the article area pass through The_post_thumbnail (' recommend '); Shows the thumbnail of the 120x120.

3. Set the feature picture when writing the article.

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

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

2.7 began, WordPress greatly enhance the multimedia function, more and more people use WP's built-in picture warehouse. For these users, making thumbnails becomes less difficult, and when uploading images, the 150x150 size is generated by default (if the picture is less than 150px high/wide, use the original height/width). So we can take advantage of this feature and add this image as a thumbnail on the list of articles. This process has advantages and disadvantages, the advantage is simple, smart (do not need to enter the thumbnail every time), the disadvantage is the consumption of server traffic.

Okay, now to do is to extract the upload generated small pictures, and placed in the appropriate position in the article. I created a file thumb.php, the picture gets and calls processed together, and the file contents are as follows.

<?php
 $args = Array (
 ' numberposts ' => 1,
 ' order ' => ' ASC ',
 ' post_mime_type ' => ' image ',
 ' post_parent ' => $post->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 ';
>
<a href= "<?php the_permalink ()?>" ></a>"

This code will find the first uploaded picture thumbnail (if the first picture is deleted, then the second one, so on), and then in the article List index.php, archive page archive.php and search page search.php call, 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 need to adjust the layout with CSS, here is not much to say.

Summarize

WordPress 2.9 does not exist before the concept of feature picture (featured image), you must find the image attachment in the first way. The advantage of getting thumbnails in this way is once and for all, you don't have to worry about what thumbnails to use for the article, or whether there are thumbnails. But this is also its disadvantage, you cannot specify a specific picture 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 image of the new thumbnail, but it is possible that the second picture is not good, not suitable as a thumbnail is no way, because you have no way to use a specific picture.

Featured Image function is very powerful, in addition to the ability to specify pictures as a feature picture, but also to use a number of dimensions of the picture to fit different occasions, you have to do is to write the article every time you do not forget to set the feature picture. When you want to remove all thumbnails, it is only the Add_theme_support (' post-thumbnails ') that will functions.php the file; Can.

I now 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 demand, lazy to change.