Skip to content

How to use Image Service

Jump to bottom Edit New page
Ivan Chou edited this page Oct 11, 2017 · 21 revisions

关于图片服务

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

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

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

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

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

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

启用图片服务

勾选 「启用」 并保存即可，启用之后获得以下特性：

  1. 只有原图会被上传到 OSS，可以极大的减少图片上传的时间和 OSS 存储空间。

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

停用图片服务

去除勾选并保存即可

未启用「本地不保留文件」的情况下：

  1. 停用图片服务，不停用插件，会遇到图片服务启用期间上传的图片缩略图丢失的情况，可以从服务器上找到所有图片及缩略图，手动上传即可修复
  2. 直接停用或卸载插件，不会有任何问题

启用 本地不保留文件 的情况下： 缩略图丢失问题无解。

使用图片预设样式

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

使用场景

普通模式下，插件会通过在图片 url 后面加上简单的参数来获取各种尺寸的图片，如：

https://stc.ichou.cn/blog/test/2016/09/dlanham-HedgehogsMushrooms.jpg?x-oss-process=image/resize,m_fill,h_655,w_1024

但是这样并不能满足所有场景需求，如：

  1. 给图片加水印
  2. 指定图片质量，压缩图片体积
  3. 随意组合图片缩放和裁剪规则
  4. 启用图片锐化效果
  5. 多主题模式下或经常切换主题时，特色图片在 url 不变的情况下，尺寸自动调节

预设样式设置

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

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

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

  • thumbnail 最小缩略图

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

  • post-thumbnail 主题特色图片

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

  • medium 中等大小图片

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

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

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

  • large 大尺寸图片

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

  • full 全尺寸图片

    推荐设置 不需要缩放处理，因启用「原图保护」时原图不可访问而需要

参考样式：

oss-image-styles-sample

上图样式规则 https://stc.ichou.cn/assets/export.txt.json 另存后导入即可

总结

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

使用图片预设样式可以最大限度的利用阿里云 OSS 图片服务的各种特性，缺点是配置起来略微复杂，各位可以按需选用

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