Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use thumbnails in WordPress

2025-02-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use thumbnails in WordPress, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Call the first picture of the article

WordPress Media has always supported uploading images to generate images of 4 sizes, including thumbnails, medium sizes, large sizes and original images, and this is probably to facilitate us to use different sizes of pictures in the article. Although there is no method to call thumbnails directly, we can find the first picture of the article as thumbnails.

The first picture can be found by the article ID. This can be written as follows: the user gets the first thumbnail and returns an empty string if the picture has not 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 the empty string if (! $attachments) {return'' } / / get the first picture in the thumbnail and assemble it into a HTML node to return $image = array_pop ($attachments); $imageSrc = wp_get_attachment_image_src ($image- > ID, 'thumbnail'); $imageUrl = $imageSrc [0]; $html ='

' . the_title('', '', false) . '

'; 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) function

After WordPress 2.9, WordPress provides the feature picture function of the article, which can set an uploaded picture as a feature picture for the article, and can set multiple sizes for the picture to be used in different environments. You can follow the steps to call:

1. Add feature image support to the WordPress theme, and set the size and alias of the feature image.

Add_theme_support ('post-thumbnails'); / / support feature image function add_image_size (' thumb', 180,180); / / setting add_image_size with alias thumb and size 150x150 ('recommend', 120,120); / / setting alias as recommend and size as 120x120

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

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

The first parameter: the size alias of the feature picture, which is used to invoke thumbnails of different sizes.

Second parameter: the width of the picture

The third parameter: the height of the picture

The fourth parameter: the parameter is a Boolean value that specifies how the picture is trimmed. The default is false.

If true, the image will be processed at a larger compression ratio and the excess will be cut out. For example, now there is a picture 900x600, which is required to be compressed into a 150x150 picture, then the picture will be compressed into a 225x150 picture before being cut into 150x150.

If false, the image will be processed at a smaller compression ratio. For example, if there is a picture 900x600, which is required to be compressed into a 150x150 picture, the picture will be compressed into a 150x100 picture.

The following image shows two thumbnails, the original image 1024x768, the left thumbnail add_image_size ('xxx', 120,120, true), and the right image using add_image_size (' xxx', 120,120, false).

two。 Determine whether there are feature pictures and display thumbnails.

If (has_post_thumbnail ()) {the_post_thumbnail ('thumb');} else {/ / Show default picture or do nothing}

The above code determines whether there is a feature picture in the article, and if so, it displays a thumbnail alias thumb, and if not, you can display the default picture or leave it blank. We also set up a thumbnail alias recommend, so we can use different thumbnails in different situations. For example: use the_post_thumbnail ('thumb') on the article list page; show thumbnails of 180x180, while in the related articles area at the bottom of articles through the_post_thumbnail (' recommend'); show thumbnails of 120x120.

3. Set the feature picture when writing the article.

If we add feature image support to 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 image as a feature image.

PS: skillful use of WordPress thumbnails

WordPress is not only a blog, most of the time WordPress is also used as a CMS (content management system). Bloggers like to add thumbnails of a uniform size to each article, especially information platforms. One of the more common processing methods is to insert pictures into the article with custom field, upload small images of the same size, or use tools such as phpThumb to generate thumbnails.

Since the beginning of WordPress, multimedia capabilities have been greatly improved, and more and more people are using WP's built-in photo warehouse. For these users, it is not so difficult to make thumbnails. When uploading an image, a small image of 150x150 size is generated by default (if the height / width of the image is not enough 150px, use the original height / width). Then we can make full use of this feature and add this picture to the article list as a thumbnail. This has its own advantages and disadvantages, the advantage is simple, intelligent (do not have to enter thumbnails every time), the disadvantage is the consumption of server traffic.

Okay, what you need to do now is to extract the small image generated by the upload and place it in the appropriate location of the article. I created a file thumb.php, image acquisition and call processing together, the contents of the file are as follows.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report