nginx生成缩略图和使用slimbox2图片灯箱

作者: writer 分类: 技术 发布时间: 2017-08-20 21:40 ė 1117 6 没有评论

最近换了目前正在用的TangStyle的主题,这款主题很简洁符合我的审美,速度嗖嗖的快,但是缩略图的功能不大令人满意,从zhangge的这篇文章里学到了一个方法,利用nginx的image_filter模块来处理缩略图,效果不错,记录一下实现的过程。

nginx安装image_filter模块

如果正在运行的nginx没有编进去image_filter模块,那么需要重新从源代码编译一次,具体过程参见前面的博文无缝升级为nginx添加ngx_cache_purge模块,这里记录一下编译的参数

nginx配置文件

nginx加入image_filter模块以后,需要在配置文件里启用相应的功能。在server部分加入下面的代码

现在图片链接接受两个参数 width=???height=???。比如下面的链接将原图裁剪为480×300
https://static.feiqy.com/wp-content/uploads/2017/08/nginx.png?width=480&height=300
或者只指定宽度参数600px,高度由nginx自动算出,保持原图的宽高比.
https://static.feiqy.com/wp-content/uploads/2017/08/nginx.png?width=600

修改php代码定义缩略图尺寸

通过前面链接的测试,nginx已经能够根据参数生成满足要求的缩略图了,可以直接在文章中插入对应的链接用起来。可是对于每张图片都手动加上宽度高度参数未免太繁琐,于是可以在主题目录下的functinos.php文件里加入下面的代码

正则表达式替换的模式是搜索html中img元素表示的图片,然后将其放置于超链接内,并且修改图片的url末尾width和height参数,代表文章中缩略图的尺寸。
现在可以打开一篇文章实验一下,所有的图片都变成了可以点击的链接,并且被缩放成480×480的尺寸了。

使用slimbox2灯箱功能

将所有图片设置成小尺寸的缩略图主要是为了排版美观,节省流量,当用户需要查看图片细节时才点击图片显示原图,这样考虑到通用的方案是使用灯箱。目前主题功能较为简洁没有自带灯箱功能,在网上搜了一下现成的方案:
nginx生成缩略图和使用slimbox2图片灯箱
从网上搜到的大多数图片灯箱是基于fancybox的,体积稍大,另外找到一个slimbox2的项目据说比fancybox更小更快,这里是slimbox2的项目地址.
为了使用灯箱需要对主题做下面几点修改

  • 将项目中images目录下的图片放到主题目录下的images目录
  • 将项目中slibox2.css里的内容拷到主题目下style.css文件里
  • 将项目中slimbox2.min.js文件拷到主题目录下
  • 修改主题的footer.php文件,插入下面几行

含义是将文章中所有的图片链接加入slimbox2的属性,然后对这些含有slimbox2属性的链接应用灯箱效果。

TangStyle修改

最后总结一下根据自己的喜好,针对TangStyle主题所做的修改,使得主题更加符合当前的页面风格:

  • 页面宽度从980px调到1100px,这样一行能显示更多代码
  • 首页缩略图自适应宽高
  • 网站标题稍许向右移动
  • totop按钮稍许向右移动
  • 文章中插入的图片水平居中

本文出自扉启博客,转载时请注明出处及相应链接。

本文永久链接: https://www.feiqy.com/nginx_image_filter_slimbox/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部