解决七牛云存储缓存加速Gravatar 头像图片路径url 参数失效的问题

前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 url 参数失效,通过参数来定义图片宽高大小没戏了。这样七牛加载的头像图片一律是默认的80x80大小,虽然在CSS 定义下看起来没有区别,但无缘无故加载多了1kb 左右的体积实在不爽。苛刻的Jeff 决定解决这个问题。

问题呈现

如果你熟悉get_avatar函数的使用,你可能明白下面我所说的内容。不熟悉的也没关系,可以先阅读一下WordPress 官方文档,Jeff 尽量用简单的文字说明:

在WordPress 中,调用Gravatar 头像后的图片路径及显示效果如下:

http://www.gravatar.com/avatar/e069fb6ca153e3c272bc85beb6f85b49?s=40&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb652 3536%3Fs%3D40&r=G

注意到上面的路径的一些参数,如 s= 、d=、r=G。这些参数的作用分别是:

?s=(或?size=)表示为图像指定一个 长宽大小,值为整数,设定后便会返回一个指定大小(长宽一样)的图像。 ?d= 表示缺省头像——当由于头像分级或未设置头像而无法显示时,可以设置一个缺省头像。 ?r= 表示头像分级。注册Gravatar 头像还记得有个分级的选项吧?对于国内来几乎没用,r=G 对应是“ 头像适合在所有网站的所有受众类型”。

对于绝大多数WordPress 站点来说,只有?s=参数有用,其余的都没什么用处。下面是官方路径的Gravatar 头像不同size 的图片,依次是?s=40、60、80、100(你可以审查元素看看):

但是,通过《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》一文设置后,图片路径url 参数已经失效。

如下面的来自七牛地址:

http://gravatar.qiniudn.com/avatar/e069fb6ca153e3c272bc85beb6f85b49?s=40

但其实际大小是80x80:

   ,无论你如何修改?s 的参数。

七牛缓存了Gravatar 服务器的图片,却复制不了他们的参数调用设置。80x80的大小在实际运用中虽然可以通过CSS 控制宽高,但不免多加载了1~2KB 的体积。作为追求完美的 Jeff ,实在不能忍受。

解决方法:

在Jeff 发现这个问题时候,想到了两个解决思路(以下以调用40x40大小为例子):

一、利用七牛云存储本身带有的图片处理的参数,迎合WordPress 的这个 ?s 参数。但悲催的是,七牛不支持 ?s 参数(如果我要设置,必须分隔符为?,样式名称为 s=40,七牛两个都不支持)。叉掉。

二、通过修改修改get_avatar函数,将参数样式由 ?s 改为七牛支持的分隔符样式(如英文中划线 - )。

查阅WordPress 官方文档,得知 get_avatar 函数在wp-includes/pluggable.php下,打开该文件,从1653 行开始是这么一段代码(Jeff加上了注释):

if ( !empty($email) ) { $out = "$host/avatar/"; $out .= $email_hash; $out .= '?s='.$size;// s= 大小 $out .= '&d=' . urlencode( $default );//d= 缺省头像   $rating = get_option('avatar_rating'); if ( !empty( $rating ) ) $out .= "&r={$rating}";// r=分级

注意到 第1656、1657、1661 行(上诉代码则对应第4、5、9行),分别对应 s= 、d=、r=G 参数。

那么,我们只需要注释掉第1657、1661 行(对应上诉代码则对应第5、9行),将第1656(对应上面第4)行修改为

$out .= '-'.$size;

注意是英文中划线 -,你可以使用七牛支持的其他分隔符_(下划线)或者 /(斜杠)或者 !(感叹号)。

完整修改后的代码如下:

if ( !empty($email) ) { $out = "$host/avatar/"; $out .= $email_hash; $out .= '-'.$size;// 有修改 //$out .= '&d=' . urlencode( $default );//d= 缺省头像   $rating = get_option('avatar_rating'); if ( !empty( $rating ) ) //$out .= "&r={$rating}";// r=分级

接下来还需要在七牛云存储后台新建图片样式,如Jeff 的设置如下:

然后就解决了!

查看一下,40x40的路径已经是http://gravatar.qiniudn.com/avatar/e069fb6ca153e3c272bc85beb6f85b49-40了,成功!

因为技术有限,只想到修改WordPress 源代码的方法。如果你有通过添加过滤器(filter)的方法,还望不吝赐教!

后记

就为了这1~2KB 的多余体积,Jeff 就去折腾那么久,真是作孽啊~~~谁叫我那么较真呢?

通过这个,进一步认识了Gravatar的运用,也不错!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1711
来自专栏数据小魔方

动态图表8|组合框(offset函数)

今天跟大家分享动态图表8——组合框(offset函数)! 步骤: 使用组合框制作下拉菜单 使用offset函数制作动态数据源 利用动态数据源制作图表 1、组合框...

3746
来自专栏dotnet & java

datatables 配套bootstrap3样式使用小结(1)

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。

1132
来自专栏微信小程序开发

Mac好工具Spectacle推荐

Spectacle 是一个窗口管理快捷键程序,为当前窗口居中全屏上下左右半屏四分之一屏等等设定快捷键。免费实用,相比之前用的moom,更喜欢Spectacle。...

45512
来自专栏数据的力量

职场人必备的WORD排版十大技巧

2197
来自专栏偏前端工程师的驿站

JS魔法堂:IMG元素加载行为详解

一、前言                               在《JS魔法堂:jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异...

2126
来自专栏DeveWork

代码实现WordPress自动关键词keywords与描述description

之前在文章《WordPress自定义栏目运用实例II:添加文章Meta标签(keywords /description)》中给出了手动添加关键词keywords...

2809
来自专栏IMWeb前端团队

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统的WEB开发中,当与用户或服务器发生交互时,需要我们手动获取数...

2487
来自专栏Material Design组件

Human Interface Guidelines — Text Fields

1655
来自专栏Python小屋

使用Jupyter Notebook+bokeh绘图入门完整步骤

Bokeh是一款基于浏览器的交互式绘图工具,在IPython Notebook中具有非常好的表现。 安装anaconda3,单击开始菜单,单击下图红色箭头所指菜...

2726

扫码关注云+社区

领取腾讯云代金券