博客主页 😥
MyDiary主题教程——相册类型文章使用缩略图
MyDiary主题教程——相册类型文章使用缩略图

Author:

火喵酱

©

Wordage:

共计 2208 字

needs:

约 2 分钟

Popular:

736 ℃

Created:

目 录

在使用MyDiary主题创建相册类型文章时,当图片过多或图片容量过大,会导致此页面在访问的时候出现严重的卡顿,而且过大的图片加载不仅会影响网站的加载速度,也会影响服务器的响应。因此最好的解决办法就是使用缩略图来替换显示封面图片,并在点开灯箱图片时再加载原图。

本地图片附件

因为上传的图片附件,typecho并不会生成缩略图,可以配合尝试使用TimThumb.php插件自动对图片附件生成缩略图。

TimThumb 是一个非常简洁方便的、用于裁图的 PHP 程序。只要给它设置一些参数,它就可以生成指定图片的缩略图甚至是直接给指定的网站截图。现在很多 WordPress 主题中,都使用的是 TimThumb 这个 PHP 类库进行缩略图处理。

TimThumb——超好用的 PHP 略缩图裁剪插件 | 孟坤博客
TimThumb 是一个非常简洁方便的、用于裁图的 PHP 程序。只要给它设置一些参数,它就可以生成指定图片的缩略图甚至是直接给指定的网站截图。现在很多 WordPress 主题中,都使用的是 Tim...

具体使用方法步骤:

  1. 下载TimThumb.php文件到站点的根目录。
    附件:TimThumb  
  2. 在MyDiary主题后台--个性--自定义全局js处填写:
    此处内容,需回复之后可见

  3. 在MyDiary主题后台--扩展--pjax回调函数处填写:

    img_src_change();
第三方图床

现在大多数用户会选择使用第三方图床服务来储存图片附件,因此这里以喵喵使用的七牛云作为案例,其他的阿里腾讯都是类似的步骤。

  1. 进入七牛云的空间管理,点击进入图片样式,在此处添加一种新图片样式,并在此新样式中确定缩略图的裁切方式,并确定好图片处理样式名称
  2. 在MyDiary主题后台--个性--自定义全局js处,使用js替换原图的样式名称为新的缩略图的样式名称。
    此处假定原图为_full,新的缩略图为_thumb,其中下划线是连接符,英文是上一步的图片处理样式名称:
    此处内容,需回复之后可见

  3. 在MyDiary主题后台--扩展--`pjax回调函数:

    img_src_change();
感谢!

如果觉得文章很不错,欢迎点一点下面的广告,来表达对喵喵的支持qaq

- - - The END - - -
作者:
火喵酱
文章:
绯色之喵・火喵博客
地址:
https://cat.dorcandy.cn/890c3dfc.html
更新:
2023 年 05 月 18 日 14 时
声明:
本文由博主原创,依据 CC BY-NC-SA 4.0 许可协议授权,转载请注明出处
文章二维码
MyDiary主题教程——相册类型文章使用缩略图
共计 4 条评论,点此发表评论
  1. 头像
    秋暮lianxs
    新人

    访客

    谢谢分享

    · Win 10+ · Chrome · 辽宁
  2. 头像
    Amuer
    Lv.1

    访客

    感谢分享

    · MacOS · Chrome · 河南
  3. 头像
    泠风寒声
    Lv.7

    好友

    看看js

    · Win 10+ · Chrome · 福建
  4. 头像
    seedream7649
    新人

    访客

    感谢分享

    · iPhone · Safari · 广东
博客主页 绯色之喵・火喵博客 记录喵喵美好生活 51统计 百度统计
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 十年之约 3 年 91 天 6 小时 13 分 🌸 本站由 Typecho 建站,并搭配自制 MyDiary 主题 Copyright © 2009 ~ 2023. 火喵酱 All rights reserved.
打赏图
打赏博主
欢迎
欢迎
欢迎访问绯色之喵・火喵博客
欢迎来看望喵喵!
搜 索
足 迹
分 类
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 测试