Tips for making thumbnails using WordPress’s built-in image warehouse


WordPress is not only a blog, but also a CMS (content management system) for many times. Bloggers like to add thumbnails of a uniform size for each article, especially for information platforms. Among them, the more commonly used method is to insert pictures into the article with custom field, upload small pictures of the same size or generate thumbnails with phpthumb and other tools
2.7 at the beginning, WordPress has greatly improved the multimedia function, and more and more people use WP’s built-in image warehouse. For these users, making thumbnails is not so difficult. When uploading images, they will generate 150×150 size small images by default (if the height / width of the image is less than 150px, use the original height / width). Then we can make full use of this function, in the article column This image is added to the table as a thumbnail. There are advantages and disadvantages in this way. The advantages are simplicity, intelligence (no need to input thumbnail every time), and the disadvantages are consumption of server traffic
Okay, now all I have to do is extract and upload the generated small images and put them in the appropriate place of the article. I created a file thumb.php, which is processed together with image acquisition and call. The content of the file is as follows

Copy code

The code is as follows:

$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() ?>”><img src=”<?php _fcksavedurl=””<?php” _fcksavedurl=””<?php” echo $imageUrl; ?>” alt=”<?php the_title(); ?>” width=”150″ height=”150″ /></a>

This code will look for the thumbnail of the first uploaded picture (if the first picture is deleted, look for the second one, and so on…), if no uploaded picture is found, use the default picture
It is then invoked in the article list index.php, the archive page archive.php and the search page search.php, and the calling code is as follows.

Copy code

The code is as follows:

<?php include(‘thumb.php’); the_content(‘Read More…’); ?>

This code is to put the picture in front of the content of the article. How to put the picture needs to adjust the layout with CSS, which is not mentioned here
Finally, I leave two questions for the students.
1. If the height or width of the picture is less than 150px, it will inevitably stretch the picture, which is not beautiful. What method can we use to make the picture display as 150×150, and display it in the middle? Hint: we can use CSS to achieve this, similar methods can be found in the theme of elegant box
(see the article “replacing SRC with CSS background property” for the answer.)
2. In the list of articles, we only want to see thumbnails and screen all other pictures. Is there any other way to do this except to use the article summary to remove all label styles?

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]