Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to cache remote image locally #362

Merged
merged 1 commit into from
Oct 26, 2023
Merged

Conversation

Lruihao
Copy link
Member

@Lruihao Lruihao commented Oct 25, 2023

Why

With the GetRemote function provided by hugo and some robust matching methods, FixIt now can cache remote images locally. This feature mainly focus on adding height and width to remote images in markdown to prevent layout shifts, caching these images locally is more like an added benefit. The advantages and disadvantages of this feature are relatively obvious, so it will be offered as an option(off by default) to the user.

Fixes #348

Pros

  • Automatically add width and height to images on remote sources, avoid the occurrence of layout shift.
  • Improve the consistency of the page loading experience.
  • Lots of features can be achieved with the images cached locally, such as letting hugo crop different size images for responsive loading, or even better, convert these images to modern webp format while resizing.
  • Does not support formats such as SVG and AVIF, and does not support request images (such as Gravetar)

Cons

  • ✅ May cause CDN image to be unavailable.
  • More local disk space required.
  • Site build time will be affected by th loading speed of remote images.

Reference

@vercel
Copy link

vercel bot commented Oct 25, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
fixit ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 26, 2023 8:52am

@Lruihao Lruihao self-assigned this Oct 25, 2023
@Lruihao Lruihao added the enhancement New feature or request label Oct 25, 2023
@Lruihao Lruihao added this to the v0.2.18 milestone Oct 25, 2023
@Lruihao Lruihao marked this pull request as draft October 25, 2023 02:26
@Lruihao Lruihao changed the base branch from master to v0.2.18-lts October 26, 2023 08:52
@Lruihao Lruihao requested a review from a team October 26, 2023 08:53
@Lruihao Lruihao marked this pull request as ready for review October 26, 2023 08:53
@Lruihao
Copy link
Member Author

Lruihao commented Oct 26, 2023

处理思路

  1. 缓存图床图片到本地
  2. 获取图片的宽高并设置
  3. 可选择是否使用本地图片覆盖图床图片地址

配置

0.3.0 迁移到 params.page.cacheRemoteImages

目前的思路虽然解决了图床图片无法获取高度导致懒加载时锚点跳转错位的问题,但是又带来了不少弊端,所以该配置为试验性功能,需要的自行开启:

# FixIt 0.3.0 | NEW [Experimental] cache remote images locally, see: https://github.com/hugo-fixit/FixIt/pull/362
# FixIt 0.3.0 | 新增 [试验性功能] 缓存图床图片到本地,详见:https://github.com/hugo-fixit/FixIt/pull/362
[params.page.cacheRemoteImages]
  enable = false
  # replace remote image url with local image url
  # 用本地图片链接替换远程图片链接
  replace = false

@Lruihao Lruihao merged commit a631096 into v0.2.18-lts Oct 26, 2023
5 checks passed
@Lruihao Lruihao deleted the get_remote_image branch October 26, 2023 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

[BUG] 使用外部图床时,无法根据标题索引正确转跳至文章指定位置
1 participant