经验分享

七牛云生成各种尺寸样式图片缩略图教程

我的站长站 2019-04-09 人阅读

我们博客网站在首页或分类列表页或其他地方或多或少都会用到缩略图,大多数都是通过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、在 incfunctionsthumbnail.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 主题其他规格的缩略图只需要重复本文的“七牛云建立图片新样式步骤”创建其他规格的图片样式,然后修改主题文件中其他规格的缩略图代码即可。

相关推荐
  • 七牛云
  • 缩略图
  • 图片生成
  • 帝国CMS七牛云同步、上传删除插件
    帝国CMS七牛云同步、上传删除插件

    插件说明适用版本帝国CMS7.5版本,UTF-8版本,其他版本请自行转码或移植。插件安装教程1、将shu文件夹上传至网站e目录。最终目录为:/e/shu/Qiniu/ 2、系统->扩展菜单分类名称:七牛云菜单名称:配置管理...

    帝国cms插件 1578 5年前
  • 七牛云生成各种尺寸样式图片缩略图教程
    七牛云生成各种尺寸样式图片缩略图教程

    我们博客网站在首页或分类列表页或其他地方或多或少都会用到缩略图,大多数都是通过timthumb.php来实现自动裁剪功能,但是这种方法裁剪的缩略图显示不太稳定,有些博客三天两头就看不到缩略图,原因有很...

    经验分享 677 5年前
  • PHP批量删除七牛云空间所有文件
    PHP批量删除七牛云空间所有文件

    七牛的云存储官方并没有提供批量删除空间文件的功能,很是不方便,可以利用根据七牛云SDK写的一个简单PHP程序,批量删除文件。delete.php需要修改的部分:<?phpecho &#39;<meta http-equiv="Content-Ty...

    php教程 87 4年前
  • WordPress栏目缩略图插件
    WordPress栏目缩略图插件

    一个可以在导航菜单文字前添加图片的插件:Menu Image,安装插件后,会在菜单设置面板中添加上传图片的选项,并可以设置两张不同的图片用于鼠标 Over/ out,如图:感觉与添加字体图标异曲同工,不过远没有字体...

    wordpress插件 226 5年前
  • 帝国CMS新手教程调用栏目缩略图,可嵌套其他标签

    可嵌套其他标签<?php$cr=$empire->fetch1("select classimg from g_enewsclasswhere classid=&#39;$bqr[classid]&#39;");?> <img src="<?=$cr[classimg]?>">[/e:loop]// 数据表前奏 XX_enewsclass不可嵌套其他标签[e:loop={"select classi...

    帝国cms教程 348 11年前
  • PHPCMS二次开发教程标签页调用缩略图的方法

    PHPCMS v9 tag标签页调用缩略图的修改方法:打开 \phpcms\modules\content\tag.php 文件找到$res = $this->db->get_one(array(&#39;id&#39;=>$contentid), &#39;title, description, url, inputtime, style&#39;);修改为$res = $this->db->get_on...

    phpcms教程 374 8年前
  • Clay Filter AI-在线生成粘土动画风格图像工具
    Clay Filter AI-在线生成粘土动画风格图像工具

    工具介绍还在快手上面发送粘土动画风格的评论吗?这款Clay Filter AI可以直接在线生成粘土动画风格。Clay Filter AI是一款在线人工智能AI生成粘土动画风格图像的工具,能够将你将你的图片转换成粘土...

    在线工具 53 4个月前
  • ShellGPT免费AI图片生成工具
    ShellGPT免费AI图片生成工具

    软件介绍ShellGPT免费AI图片生成工具,支持多线路供选择,支持AI生成实景图片等功能,可以生成文章,改写等,功能非常强大。ShellGPT截图...

    软件分享 28 11个月前
  • dynamic根据手绘图AI生成图片工具
    dynamic根据手绘图AI生成图片工具

    工具介绍dynamic是一款在线免费的根据手绘图AI生成图片工具,基于Stable Diffusion和fal搭建的在线工具,实时生成,速度超快,免费,无限制。根据画布中的手绘图,填写一下Prompt关键字,AI即可自动生成图像。...

    在线工具 34 11个月前
最新更新