Skip to content

How to use Image Service

Jump to bottom Edit New page
Ivan Chou edited this page Oct 3, 2016 · 21 revisions

关于图片服务

本插件中的 图片服务 是指 阿里云OSS图片处理服务:

阿里云OSS图片处理服务（Image Service，简称 IMG） ，是阿里云OSS对外提供的海量，安全，低成本高可靠的图片处理服务。用户将原始图片上传保存在OSS上，通过简单的 RESTful 接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。图片处理服务提供图片处理接口，图片上传请使用OSS上传接口。基于IMG，用户可以搭建出跟图片相关的服务。

更多信息请参照：对象存储 OSS_图片服务手册_介绍-阿里云产品文档

WordPress 在用户上传图片时，根据预设尺寸生成不同大小的缩略图，以供页面适配。这种方式虽然有效但很不灵活，如切换主题的时候，之前的特色图片尺寸便极可能与新主题不一致。且一张图片最多可能有 5 种缩略图，迁移的时候也相对更麻烦。

Aliyun IMG 就是为了解决这类问题而出现的，它可以通过在图片 Url 后面传参来实时生成各种尺寸的图片，只需要存一张原图，就可以在任何时候满足任何需求。IMG 本身又是十分高效的，加上 缓存 与 CDN 的配合，响应速度与直接访问静态资源并没有区别。

因此，强烈推荐使用，支持 图片服务 才是这个插件的精髓ヾ(=^▽^=)ノ

启用图片服务

屏幕快照

  1. 填写有效的图片服务域名(Image Service Host)即代表开启图片服务。

  2. 启用图片服务后，只有原图会被上传到 OSS，可以极大的减少图片上传的时间。

  3. 本地缩略图依旧会生成，当你停用插件的时候，不受任何影响（不开启 本地不保留文件 的情况下）。

自定义图片预设样式

图片服务的最后一项，图片预设样式(Preset Image Style), 是指是否使用预定义的 Aliyun IMG 图片样式来作为图片处理规则。

这是插件早期的一个图片处理规则实现方式，在 2.4.0 版本中被更优雅的方式取代了，后来有用户反应需要图片水印服务等特别的需求，于是在 3.0.0 版本中将其作为可选项重新加入。

默认图片处理规则

foreach ($data['sizes'] as $size => $info)
    $data['sizes'][$size]['file'] = "{$filename}@{$info['height']}h_{$info['width']}w_1e_1c_1l{$fileExt}";

WordPress 在生成缩略图的时候，会记录生成图片的尺寸信息，默认处理规则便是从 WordPress 中取得各种缩略图的尺寸信息，再将原图强制缩放裁剪成对应的高宽，来获得目标缩略图。

参数详解：

  • 1l 如果目标缩略图大于原图不处理
  • 1c 目标缩略图高宽比与原图不一致时，使用裁剪
  • 1e 裁剪时，短边优先
  • {$fileExt} 追加文件后缀，如果是 gif 动图，需要这个参数才能被正确处理

按已知情况推测，这种方式应该能适应百分之绝大多数的场景

图片处理预设样式

启用 图片预设样式 选项前，你需要先设置图片样式

图片样式设置地址：阿里云控制台 -> OSS Bucket -> 图片处理 -> 样式管理

为了配合插件使用，你需要设置 6 种样式才能覆盖所有情况

  • thumbnail 最小缩略图

    推荐设置 按短边缩放，居中裁剪，高宽同 WordPress 后台多媒体设置

  • post-thumbnail 主题特色图片

    推荐设置 按短边缩放，居中裁剪，高宽同主题特色图片设置

  • medium 中等大小图片

    推荐设置 限定宽高，按长边缩放，高宽同 WordPress 后台多媒体设置

  • medium_large 比中等大一号的图片，这个尺寸是 WordPress 4.4 引入的，在后台里没有设置

    推荐设置 限定宽高，按长边缩放，高宽 768px 或自行设定

  • large 大尺寸图片

    推荐设置 限定宽高，按长边缩放，高宽同 WordPress 后台多媒体设置

  • origin 原图

    推荐在高级模式下设定处理规则，基本设置使用 .src 即可

参考样式：

屏幕快照 2016-10-03 下午2.09.35

上图样式规则 http://chou.oss-cn-hangzhou.aliyuncs.com/assets/Aliyun%20IMG%20Rules.txt 另存后导入即可

图片预设样式使用场景

设置好全部 6 种图片样式后，就可以开启 图片预设样式 选项了。如果你是按照参考样式设置的，获得的效果应该和插件默认处理规则结果是一致的。

在此基础上，你就可以自定义修改你的图片处理规则了：

  1. 可以加图片水印
  2. 可以指定图片质量，压缩图片体积
  3. 随意组合图片缩放和裁剪规则
  4. 启用图片锐化效果

这些规则是可以随时修改的，比如切换主题后，如果 特色图片 尺寸与之前不一致，修改 post-thumbnail 样式的规则即可完成对老文章的适配。

Add a custom footer
Add a custom sidebar
Clone this wiki locally