热门文章

巧用阿里云oss图片规则

注意:当前文章为“折腾”分类,请查看当前更新时间:2019 年 04 月 23 日 19:20:23。如时间太久,请谷歌搜索最新相关文章。

今天又发了一篇教程,其实也是针对小白来写的。因为看到好多人博客的文章缩略图都有问题。还让自己的博客速度变得很慢,我就有点强迫症想提醒下博主:你的缩略图有问题的。有强迫症的人没办法。

一位博主的缩略图

一位博主的文章缩略图的尺寸,相信大家也看得出来是个什么问题。文章缩略图直接获取整张图片,然后居中显示一部分,这样的问题就是我们前面页面看起来没什么问题,其实在传输数据的时候已经开始掉链子了。这样的问题应该有很多人都有。优化真的是从一点一滴做起来的。

针对wordpress来说

以前用wordpress的时候,记得用后台上传的图片会被裁剪多种尺寸的缩略图。各种尺寸的都有,如果自己做主题的,还要在functions.php中加一个自己主题文章缩略图尺寸的一个函数,或者就是自己在wordpress后台自己设置一个裁剪的尺寸。

wordpress上传图片自动裁剪图片尺寸

wordpress上传图片自动裁剪图片尺寸,上传了一个test.png图片,被裁剪了好几种尺寸的图片。

这个后台自动裁剪有利就有弊,弊就是随着博客图片的日积月累,一个图片还被裁剪的很多个小尺寸的图,服务器文件会越来越大。另外就是图片存在自己服务器里,一旦服务器出现点问题,解决起来其实挺麻烦的。如果用了oss来存图片,日常备份就是文章sql数据,文章都是文字,备份还是挺快的,阿里云要是oss出问题了,那就是超级大的问题了,不过一般不会出问题吧。图片数据事关重大,特别是那些记录生活事迹的博客,万一图片哪天因为自己服务器出问题找不回来了,真的是崩溃。

之前写过一个利用七牛云来作为文章博客缩略图的方法,还写了从七牛那边获取自己提前设置好的尺寸参数来设置文章缩略图的尺寸。具体链接:使用外链图片来作为博客的特色图

其实现在看来其实这个有点麻烦了。因为写了一堆不太重要的。

针对typecho来说

其实typecho倒没有后台上传图片后系统自动裁剪图片尺寸的做法,但是在显示缩略图的时候其实也是直接显示一整张的。不过玩typecho的基本上都是用的外链来作为特色图的。

利用阿里云oss当图床

现在开始说正事儿了,前面那都是铺垫的。之前一直都是用七牛,后面转typecho后,七牛还老是提醒域名问题什么的,还有就是七牛镜像站有点烦。乘着域名,服务器都在阿里云的时候,准备给图床从七牛搬到阿里云oss,研究了下,其实还蛮方便的。

去阿里云开一个oss存储空间,如果你服务器是阿里云的,可以选择跟你服务器同地区的oss存储空间,听说内网传输快还免流量。具体不知道怎么玩的。这里就不说了。

这里着重说oss的图片裁剪规则。开通oss储存空间,图片处理-新建样式。重要的步骤下面的图片给到了,可以点击图片查看。新建样式其实就是根据自己主题的文章缩略图尺寸来做一个尺寸规则。下次在给自己文章设置缩略图的时候,在图床复制出来的链接后面加一个新建样式的规则名称就起效了,阿里云自动云上裁剪。

如何使用规则名称,其实就是往图床链接的结尾处加上自己设置的规则名称就ojbk了。例子如下。

//图床复制过来的原链接
https://static.mrju.cn/images/0415.png

//纯图床链接添加方法
https://static.mrju.cn/images/0415.png!lonesonme_thumb  //结尾处从的“!lonesonme_thumb”就是规则名称

//本主题的获取缩略图函数后面加规则名称
<?php $this->fields->img(); ?>!lonesonme_thumb  //这样就ojbk了

到这里就已经到尾声了,其实大部分博主只给大家说了图床如何如何方便什么的,但是这个图片规则真的才是正确图床的食用方法。你可以再多建几条图片规则来用于其他需要相应尺寸图片的地方。具体的就不多说了,自己去开整吧。另外说下,oss流量费很便宜,我们小博客的流量几乎一个月才几分钱,多点就几毛钱。谁让我们是博客,没什么流量哈。

基本上是图文无关,完全随心而写,你们看看就好。

发表评论

已有 12 条评论

  1. 老虎 老虎说道:

    最有用的还是exif攫取。

    1. 枫叶 枫叶说道:

      看了你那个oss获取exif的代码,虽然有点云里雾里,但还算是解决了我一直想要弄的一个功能。就是wordpress上的figcaption图标标签信息。你的代码最后一段给了我思路。获取图片的alt信息来“曲线救国”显示。你可以看我第一篇文章里图片上的就知道了哈。多谢提供思路~

      1. 老虎 老虎说道:

        歪打正着哈哈。

    2. 枫叶 枫叶说道:

      查了下,好像说的是获取数码相机拍摄图片里的信息。然后我并买不起。高玩玩家必备。

      1. 老虎 老虎说道:

        啥意思?oss里有这个功能啊。

        1. 枫叶 枫叶说道:

          额,oss确实有。阿里云oss那边说的“数码相机拍摄的照片文件中包含 exif 信息,用于记录数码照片的属性信息和拍摄数据”。不知道手机拍的,它支持不支持获取哦。不过图片按照规则自从裁剪处理还是用的比较多的,你看对于淘宝京东那些产品主图,基本上无一例外都是用的图片规则。

          1. 枫叶 枫叶说道:

            好东西,早想整这个了,真的是踏破铁鞋无处什么来着,得来全不费功夫哇。多谢Tiger。

          2. 老虎 老虎说道:

            ps 手机也都有exif。十年前的都有。

          3. 老虎 老虎说道:

            talk.synyan.net/27328

            不谢。

  2. 从良未遂 从良未遂说道:

    谢谢博主,抽空整一下

  3. 趋小势 趋小势说道:

    谢谢,很有用我已经改好了,主题也很漂亮

    1. 枫叶 枫叶说道:

      其实也是给用我主题的你们写的哈。因为一句话说不清楚。你博客里的侧边栏最新评论其实没必要那么长的,你可以在“后台”-“设置”-“评论”里设置下需要显示几条就ok了。你那太长啦。

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫