Use of thumbnails in WordPress and related tips _ php instance

This article describes how to use thumbnails in WordPress and related techniques, including calling the first image of the article and setting feature images, there are many opportunities for users to use thumbnails on their blogs. They appear on the article list page, related articles at the bottom of the article, and category pictures on the category page, some blogs are even trendy to describe text indexed by the image waterfall stream.

Webmasters know that thumbnails can attract their eyes and are always looking for better ways to use them. This article will introduce two common methods to call thumbnails on WordPress and their application scenarios.

Call the first image of the article

WordPress Media has always supported generating thumbnail, medium size, large size, and original images. I am afraid this is to make it easier for us to call images of different sizes in the article. although the thumbnail method is not directly called, we can find the first image of the article as a thumbnail.
You can find the first image by using the article ID. The method can be written as follows. The user obtains the first thumbnail. If no image is 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, an empty string if (! $ Attachments) {return '';} // obtain the first image in the thumbnail and assemble 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 call code is as follows.

$ Thumb = getFirstImage ($ post-> ID); if (strlen ($ thumb)> 0) {echo $ thumb;} else {// display the default image or do nothing}

Feature Image

After WordPress 2.9, WordPress provides the feature image feature of the article. You can set an uploaded image as a feature image for the article, and set multiple sizes for the image to be used in different environments. you can call the following procedure:

1. Add Feature Image Support for WordPress Themes and set the feature image size and alias.

Add_theme_support ('post-thumbnails '); // supports feature image add_image_size ('thumb', 180,180); // alias thumb, add_image_size ('recommend', 150); // the alias is recommend and the size is 150x120,120.

We can add the above Code to the functions. php file, add the Featured Image support for the topic, and set the 180x180 and 120x120 images.

Add_image_size is used to define a feature image size. Refer to WordPress Codex. In fact, it has four parameters.

1. 1st parameters: feature image size alias, used to call thumbnails of different sizes.
2. 2nd parameters: Image Width
3. 3rd parameters: Image Height
4. 4th parameters: this parameter is a Boolean value used to specify the image cropping method. The default value is false.

If this parameter is set to true, the image is compressed in a large proportion, and the excess part is cropped out. for example, if an image of 900x600 needs to be compressed to 150x150, the image will be first compressed to 225x150 before being cropped to 150x150.

If it is false, the image will be compressed in a smaller proportion. for example, if you want to compress an image of 900x600 to 150x150, the image will be compressed to 150x100.
It is two thumbnails. The source image is 1024x768, and the left thumbnail is add_image_size ('xxx', 120,120, true). The right thumbnail uses add_image_size ('xxx', 120,120, false );.

2. Determine whether a feature image or thumbnail is present.

If (has_post_thumbnail () {the_post_thumbnail ('thumb');} else {// display the default image or do nothing}

The code above determines whether a feature image exists in the article. If yes, the thumbnail with the alias thumb is displayed. If no feature image is displayed, the default image is left blank. we also set a thumbnail with the alias "recommend" in front, so we can use different thumbnails in different scenarios. for example, use the_post_thumbnail ('thumb') on the article list page to display thumbnails of 180x180, and use the_post_thumbnail ('recommend') in the relevant article area at the bottom of the article '); displays thumbnails of 120x120.

3. Set feature images when writing articles.

If feature images are supported for the topic, you can find the Use as featured image link next to the Insert into Post button after uploading an image on the edit article page to set the image as a feature image.

PS: Use WordPress thumbnails
WordPress is not only a blog, but is often used as a CMS (Content Management System ). bloggers like to add a uniform thumbnail for each article, especially for information platforms. A common solution is to use custom field to insert an image to an article, upload a small image of the same size, or use phpThumb or other tools to generate a thumbnail.

WordPress has greatly improved multimedia functions since 2.7, and more people are using WP's built-in image repository. for these users, creating thumbnails is not that difficult. When uploading images, a 150x150 small image is generated by default (if the Image Height/width is less than PX, use the original height/width ). then we can make full use of this function and add this image to the article list as a thumbnail. this solution has its own advantages and disadvantages. The advantage is that it is simple and intelligent (you do not need to input thumbnails each time). The disadvantage is that it consumes server traffic.

Okay, what we need to do now is to extract the small image generated by the upload and place it in the appropriate position of the article. I created a file thumb. php. The image is obtained and processed together with the call. The file content is 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'; }?>">" alt="<?php the_title(); ?>" width="150" height="150" />

This code will go to the first uploaded image Thumbnail (if the first image is deleted, find the second one, and so on ...), then in the article List index. php, archive page archive. php and search page search. php call. The call code is as follows.

<?php include('thumb.php'); the_content('Read More...'); ?>

This code is to put the image in front of the content of the article. You need to use CSS to adjust the layout of the image.

Summary

Before WordPress 2.9, the concept of Featured Image does not exist. You must find the Image attachment in the first way. the advantage of using this method to retrieve thumbnails is that you don't have to worry about the thumbnails you want to use in the future. however, this is also a drawback. You cannot specify a specific image as a thumbnail. if the first image of an article is a thumbnail, but the article is updated, the first image is deleted and then uploaded. the second image has become a new thumbnail, but it may not work well. It cannot be used as a thumbnail, because you cannot use a specific image.

Featured Image is very powerful. In addition to specifying images as feature images, you can also use images of multiple sizes to suit different occasions. All you have to do is set feature images every time you write an article. when you want to remove all thumbnails. add_theme_support ('post-thumbnails ') of the php file.

I have not used Featured Image, but I have always used the method of getting the first Image. Because my Image quality is not high, I have never specified the Image requirements, so I am too lazy to change it.