Thumbnails: Typecho 文章缩略图插件

December 2nd, 2012

2016/04/03:本插件兼容Typecho 0.9版本,其他版本暂未进行兼容性测试,请按照实际情况进行使用。

博客在较早前已经在文章列表页面加入了实现的缩略图效果,原理是直接调用对应文章内第一张图片的地址 。本来缩略图只需要一张小尺寸的图片就足够了,然而文章内的图片都要大得多,这样就导致了浏览器要花费多余的时间去加载大图去完成缩略效果,造成了不好的用户体验。

我在这两天抽了点时间去修改下原来缩略图的代码,新增了图像缓存,并写成了插件分享出来。

首次访问文章列表时,插件会生成每篇文章的小尺寸缩略图像,储存在 thumbnails 目录下,以后每次打开图像都取用缓存文件,从而提高页面加载速度。

1. 插件下载

附件:Thumbnails_1.0.0.zip

2. 准备工作

  1. /usr 目录下新建一个名为 resources 的目录。
  2. 在新建的 resources 目录内分别新增 categoriesthumbnails 两个目录。
  3. 确保上述目录可读写。
  4. 根据网页情况新增缩略图的 CSS 样式。

下面为供参考的 CSS 代码:

.thumbnail{
    float:left;
    border:1px solid #CCCCCC;
    padding:3px;
    max-width:150px;
    max-height:100px;
    margin-right:5px;
    width:expression(this.width > 150 ? "140px" : this.width);
    height:expression(this.height > 100 ? "100px" : this.height);
}

3. 调用插件

到控制台启用插件后,可通过以下方式调用插件:

Thumbnails_Plugin::tbn($this);
本文共有 15 则回复
  1. mixreal mixreal 回复

    1.0 的确不行了,持续关注

  2. 阿歪 阿歪 回复

    1.0 版本已经不可以用了
    what a pity

    1. 阿歪 阿歪

      我昨天找到暂时的解决方案——提取了 LiNPX 网站的主题里面的缩略图代码,但是还是有点问题,我也在关注这个。

    2. Wis Chu Wis Chu

      Roger~ 我看看什么时候抽点时间修复一下吧,感谢反馈

  3. 赛欧建站 赛欧建站 回复

    这个0.9还是不能用 copy的别人的吧

    1. Wis Wis

      这个版本只能兼容到0.8,对于0.9版本没有做兼容性测试

      PS:请问你是从哪里看出这是copy别人的?

  4. Ace Ace 回复

    还是不会用~~~~~~~~

  5. hostgator hostgator 回复

    来关注一下,好棒的内容

  6. Ben Ben 回复

    啊,(#°Д°) 晚了一步,坐地板好了

  7. ivy ivy 回复

    大家都在忙啊:)

    1. Wis Wis

      我也是这样觉得滴~

  8. Xider Xider 回复

    先占沙发 后看内容

    1. Xider Xider

      等我什么时候开始折腾TE的时候吧~~~

    2. Wis Wis

      欢迎测试 :)