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

投稿   老午博客  2019-03-08 07:31:58  562 人阅读  31 条评论

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

如何利用七牛云图片样式实现缩略图功能? - 第1张 - boke112导航(boke112.com)

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

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

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

如何利用七牛云图片样式实现缩略图功能? - 第2张 - boke112导航(boke112.com)

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

如何利用七牛云图片样式实现缩略图功能? - 第3张 - boke112导航(boke112.com)

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

如何利用七牛云图片样式实现缩略图功能? - 第4张 - boke112导航(boke112.com)

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

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

如何利用七牛云图片样式实现缩略图功能? - 第5张 - boke112导航(boke112.com)

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

如何利用七牛云图片样式实现缩略图功能? - 第6张 - boke112导航(boke112.com)

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

  • 开启: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 主题其他规格的缩略图只需要重复本文的“七牛云建立图片新样式步骤”创建其他规格的图片样式,然后修改主题文件中其他规格的缩略图代码即可。

站长有话说

有很多站长误以为老午博客又是 boke112 导航的一个新博客,其实这个站点前身就是那个为了测试老薛主机和申请 Google Adsense 而建立的“老薛主机怎么样?”站点,但是因为名字可能会造成用户误解和引起侵权,所以特意变更了站点名称和域名(详见“「老薛主机怎么样?」更名为「老午博客」的公告”),该站以后也就是继续体验老薛主机及顺便发一些推广文章而已。老实说,现在时间真的不够,精力也没有年轻时候那么旺盛了,多开博客也是有心无力了。

您可能感兴趣的文章

文章标签: ,  
原文地址:http://www.laow.wang/277.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 老午博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机
老午博客

阿里云专题 腾讯云专题虚拟主机专题WPS专题

 发表评论

大笑表情偷笑表情鼓掌表情思考表情疑问表情抠鼻表情抓狂表情晕表情黑线表情流汗表情流泪表情囧表情衰表情围观表情OK表情牛表情

  1. 那么羅
    那么羅 @回复

    还是又拍云好用一点

  2. 幸福收藏夹
    幸福收藏夹 @回复

    很少使用七牛,太麻烦了。。。。

  3. 阁主博客
    阁主博客 @回复

    缩略图很重要,也很方便!在加载网页速度的前提可以给用户一个好的开始!收住更多流量!

  4. 唯美图
    唯美图 @回复

    请问下DUX5.0怎么让文章缩略图随机显示呢?

    • 懿古今
      懿古今2019-03-10 22:36  回复

      @唯美图[奋斗] 这个应该不难,找到这个主题中关于缩略图的代码,然后修改获取图片的地址为随机图片名称即可。

  5. 创业路上
    创业路上 @回复

    有没有免费的,大点的放图片的空间,一张图要能有10M那样的,可以有图片链接的,这样空间能剩下好多来放图

  6. 清风小墨
    清风小墨 @回复

    为什么感觉七牛不太稳定

  7. Quanyin
    Quanyin @回复

    其他服务商也有类似的服务,还是很方便的,,能自动转成webp就已经很好很省流量了

  8. WordPress建站吧
    WordPress建站吧 @回复

    这个自动帮你裁剪好尺寸的图片,免去了自己服务器开销,处理图片采集还是比较耗费CPU 的,一般的缩略图如何处理的呢?之前写主题就研究过缩略图方案,如果每次都裁剪速度很慢,不裁剪大图用css定义大小,加载大图也很慢,

  9. 去看你博客
    去看你博客 @回复

    先学习一下,有空折腾 [强]

  10. 汪诗迪博客
    汪诗迪博客 @回复

    涨姿势了。收藏收藏~~

  11. 镜缘轩
    镜缘轩 @回复

    收藏备用,有空看看这种方法能不能用到begin主题上

  12. 明月登楼
    明月登楼 @回复

    现在看七牛的成本过高了!

    • 懿古今
      懿古今2019-03-08 11:56  回复

      @明月登楼我那个小站是HTTP站点,用七牛的还行,而且邀请好友赠送的流量都都满的,应该够用

  13. Chiser丶
    Chiser丶 @回复

    懒得折腾,只设置防盗链 [笑哭]

  14. 子午物联网
    子午物联网 @回复

    我到现在没搞定,找了个朋友折腾着

  15. WordPress建站吧
    WordPress建站吧 @回复

    阿里云对象存储也有这个挺好使的在原图上加个后缀想裁剪什么尺寸都行

  16. 仙界
    仙界 @回复

    虽然用的不是七牛,学习了,以后可以用到