如何利用七牛云图片样式实现缩略图功能？

我们博客网站在首页或分类列表页或其他地方或多或少都会用到缩略图，大多数都是通过timthumb.php来实现自动裁剪功能，但是这种方法裁剪的缩略图显示不太稳定，有些博客三天两头就看不到缩略图，原因有很多，可能是网络不稳定，可能是主机/服务器不稳定，可能是文件夹权限问题等等。那有什么办法可以让缩略图显示更稳定呢？可以考虑放弃缩略图，如卢松松博客；或放弃自动裁剪生成的缩略图改用随机缩略图，如boke112导航；或不裁剪图片但是估计图片会变形（很少人用这个）；还有另一种就是通过第三方存储空间的裁剪功能生成缩略图，比如七牛云或又拍云都可以。

如果你的站点图片是存储在七牛云的，可以考虑利用七牛云的图片样式功能来建立各种尺寸规格的图片做为缩略图。如果你安装有七牛云相关插件的，估计已经集成有这个功能了。今天说的是纯代码实现方法，以Nana主题为例进行说明。

七牛云建立图片新样式步骤

1、登录七牛云后台 >> 对象存储 >> 点击相应的存储空间（如何建立存储空间请参阅『七牛云存储添加自定义域名和域名解析图文教程』）>> 图片样式 >> 新建图片样式，具体如下图所示：

2、常用使用场景中有5个选择，个人建议选择第1种“缩至完全覆盖指定宽高区域，居中剪裁”，其他场景看图片效果有点怪怪的，所以建议选择第一种。

3、设置想要裁剪的缩略图宽高，如Nana主题博客布局用到的缩略图尺寸就是270X180，所以宽度填写270PX，高度填写180PX。具体如下图所示：

4、其他的一些基本设置：

• 图片水印功能，因为是列表页缩略图，所以建议选择“不加水印”；
• 输出格式功能，建议选择“与原图一致”；
• 点击“更多配置”，建议关闭“图片瘦身”功能，默认是开启的，而且是收费的，这个功能我们可以在后文的代码中自动添加瘦身代码；
• 渐进显示默认关闭；
• 图片质量默认为75%，可自行调整；
• 图片处理样式名称，根据要求起一个名称即可，如shouyesuolueutu。

至此，我们就成功创建了一个七牛图片样式270X180，得到一个处理接口imageView2/1/w/270/h/180/q/75，具体如下图所示：

根据测试，开启/关闭自动瘦身功能的处理接口分别如下：

• 开启：imageView2/1/w/270/h/180/q/75|imageslim
• 关闭：imageView2/1/w/270/h/180/q/75

所以我们完全可以关闭自动瘦身功能，然后在后文的代码处理中直接添加|imageslim即可。

改造Nana主题缩略图代码

1、在inc\functions\thumbnail.php文件最后添加以下代码

// 七牛自动缩略图
function ygj_thumbnail_qiniu($sltw, $slth,$sltzl) {
global $post;
if ( get_post_meta($post->ID, 'wzshow', true) ) {
$image = get_post_meta($post->ID, 'wzshow', true);
echo '<a href="'.get_permalink().'"><img src="'.$image.'?imageView2/1/w/'.$sltw.'/h/'.$slth.'/q/75|imageslim" alt="'.$post->post_title .'" /></a>';
} else {
$content = $post->post_content;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
echo '<a href="'.get_permalink().'"><img src="'.$strResult[1][0].'?imageView2/1/w/'.$sltw.'/h/'.$slth.'/q/'.$sltzl.'|imageslim" alt="'.$post->post_title .'" /></a>';
} else {
$random = mt_rand(1, 10);
echo '<a href="'.get_permalink().'"><img src="'.get_template_directory_uri().'/images/random/'. $random .'.jpg" alt="'.$post->post_title .'" /></a>';
}
}
}

2、在blog.php、archive.php、cms.php文件中找到以下代码

<?php ygj_thumbnail(270,180); ?>

修改为

<?php ygj_thumbnail_qiniu(270,180,75); ?>

其中，270是宽度，280是高度，75是图片质量，要跟在七牛创建的图片样式相一致，要不然会出错。不管是指定图片还是自动获取文章第一篇文章的图片路径都要是存储在七牛云才行。

至于，我们已经成功把Nana主题利用timthumb.php自动裁剪270X180的缩略图改为利用七牛图片样式裁剪的缩略图，具体效果可以看本站首页和分类列表页的缩略图。至于Nana主题其他规格的缩略图只需要重复本文的“七牛云建立图片新样式步骤”创建其他规格的图片样式，然后修改主题文件中其他规格的缩略图代码即可。

您可能感兴趣的文章

• 调整Nana主题正文和侧边栏宽度适应谷歌广告
• 2019购买老薛虚拟主机及使用终身7折优惠码流程
• 如何解决老薛主机大淘客500错误问题?
• cPanel面板如何安装Node.js程序（旧）？
• 老薛主机如何绑定不带www的域名？
• 如何设置远程访问老薛主机数据库？
• 老薛主机如何请求取消虚拟主机并申请退款？
• 老薛主机上传文件超过upload_max_filesize值怎么办?
• 老薛虚拟主机怎么绑定新域名（多个域名）？
• 老薛虚拟主机如何手动进行站点备份和还原？
• 老薛主机怎么上传的压缩包?压缩包怎么解压?
• 如何利用老薛主机自带功能创建WordPress站点？