The use of thumbnails in WordPress and related techniques, wordpress thumbnails_PHP tutorial

The use of thumbnails in WordPress and related techniques, wordpress thumbnails

There are many opportunities to use thumbnails on blogs, they appear on the article list page, and related below the article Articles, category pictures on category pages, and even some blogs are very trendy in downplaying text and using waterfalls of pictures as article indexes.

Webmasters know that thumbnails can attract attention and are always looking for better ways to use them. This article will introduce two commonly used methods of calling thumbnails on WordPress and their applicable scenarios.

Calling the first picture of the article

WordPress Media has always supported uploading images to generate 4 images including thumbnail, medium size, large size and original image, and this is probably to facilitate us to call images of different sizes in the article. Although the thumbnail is not directly called method, but we can find the first image of the article as a thumbnail.
The first image can be found based on the article ID. The method here can be written as follows. The user gets the first thumbnail. If no image has been 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(!$attachments) {
 return '';
 }
 
 // 获取缩略图中的第一个图片, 并组装成 HTML 节点返回
 $image = array_pop($attachments);
 $imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
 $imageUrl = $imageSrc[0];
 $html = '<img src="' . $imageUrl . '" alt="' . the_title('', '', false) . '" />';
 return $html;
}

The calling code is as follows.

$thumb = getFirstImage($post->ID);
if(strlen($thumb) > 0) {
 echo $thumb;
} else {
 // 显示默认图片或者不做任何事情
}

Featured Image function

After WordPress 2.9, WordPress provides the article feature image function. You can set an uploaded image as a feature image for the article, and you can set multiple sizes for the image so that it can be used in different environments. You can call it by following the steps:

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

add_theme_support('post-thumbnails'); // 支持特征图片功能
 
add_image_size('thumb', 180, 180); // 别名为 thumb, 尺寸为 150x150 的设定
add_image_size('recommend', 120, 120); // 别名为 recommend, 尺寸为 120x120 的设定

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

Add_image_size is used to define a characteristic image size, refer to WordPress Codex, it actually has 4 parameters.

1. The first parameter: the size alias of the feature image, used to call thumbnails of different sizes.
2. The second parameter: the width of the image
3. The third parameter: the height of the image
4. The fourth parameter: The parameter is a Boolean value, used to specify the cropping method of the image. The default is false.

If true, the image will be processed according to a larger compression ratio and the excess part will be cropped. For example, if there is a 900x600 image and it is required to be compressed into a 150x150 image, then the image will be compressed into a 225x150 image first and then cropped into 150x150 .

If it is false, the image will be processed according to a smaller compression ratio. For example, if there is a 900x600 image and it is required to be compressed into a 150x150 image, then the image will be compressed into a 150x100 image.
The picture below shows two thumbnails. The original picture is 1024x768. The left thumbnail uses add_image_size('xxx', 120, 120, true);, while the right picture uses add_image_size('xxx', 120, 120, false);.

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

if(has_post_thumbnail()) {
 the_post_thumbnail('thumb');
} else {
 // 显示默认图片或者不做任何事情
}

The above code determines whether there is a feature image in the article. If it exists, it will display a thumbnail with the alias thumb. If there is not, you can display the default image or leave it blank. We also set the thumbnail with the alias recommended earlier, then we You can use different thumbnails in different situations. For example: use the_post_thumbnail('thumb'); on the article list page to display a 180x180 thumbnail, and use the_post_thumbnail('recommend'); to display a 120x120 thumbnail in the related article area at the bottom of the article. Thumbnail.

3. Set characteristic images when writing articles.

If we add featured 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 featured image.

PS: Use WordPress thumbnails skillfully
WordPress is not only a blog, but many times WordPress is also used as a CMS (Content Management System). Bloggers like to add uniform-sized thumbnails to each article, especially information platforms. One of the more common methods is Use custom fields to insert images into articles, upload small images of the same size or use tools such as phpThumb to generate thumbnails.

Starting from 2.7, WordPress has greatly improved its multimedia functions, and more and more people are using WP’s built-in image warehouse. For these users, making thumbnails is not that difficult, and 150x150 will be generated by default when uploading images. A small picture of the specifications (if the height/width of the picture is less than 150px, use the original height/width). Then we can make full use of this function and add this picture as a thumbnail on the article list. This processing has its own advantages and disadvantages, and the advantage is that it is simple. Smart (no need to enter thumbnails every time), the disadvantage is that it consumes server traffic.

Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

<&#63;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';
 }
&#63;>
<a href="<&#63;php the_permalink() &#63;>"><img class="left" src="<&#63;php echo $imageUrl; &#63;>" alt="<&#63;php the_title(); &#63;>" width="150" height="150" /></a>

这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...),然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.

<&#63;php include('thumb.php'); the_content('Read More...'); &#63;>

这段代码是把图片放在文章内容前面, 图片如何摆放需要用 CSS 调整一下布局, 这里就不多说了.

总结

WordPress 2.9 之前不存在特征图片 (Featured Image) 的概念, 必须通过第一种方式找到图片附件. 用这种方式获取缩略图的好处是一劳永逸, 以后你不用关心要文章的使用什么缩略图, 是否存在缩略图. 但这同样也是它的缺点, 不能指定特定图片为缩略图. 如果某文章第一个图片是缩略图, 但因为文章更新, 将第一个图片删除了, 再上传. 那本来第二个图片就成为了新的缩略图, 但有可能第二个图片效果不好, 不适合作为缩略图也没是没有办法的, 因为你根本没有办法使用特定图片.

Featured Image 功能很强大, 除了可以指定图片作为特征图片, 还能够使用多个尺寸的图片以适合不同的场合, 你要做的仅仅是每次写文章时别忘了设定特征图片. 当你想去除所有缩略图时, 也仅是将 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.

我现在没有用 Featured Image, 一直用的是取第一个图片的方法, 因为我的图片质量不高, 一直没指定图片需求, 懒得去改了.

 

http://www.bkjia.com/PHPjc/1075080.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1075080.htmlTechArticleWordPress中缩略图的使用以及相关技巧，wordpress缩略图 在博客上用到缩略图的机会很多, 它们出现在文章列表页面, 文章下方的相关文章, 分类...