diff options
Diffstat (limited to '_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md')
| -rw-r--r-- | _posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md | 34 |
1 files changed, 0 insertions, 34 deletions
diff --git a/_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md b/_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md deleted file mode 100644 index 8293a4d..0000000 --- a/_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md +++ /dev/null | |||
| @@ -1,34 +0,0 @@ | |||
| 1 | --- | ||
| 2 | title: "Add lazy loading of images in Jekyll posts" | ||
| 3 | permalink: /add-lazy-loading-to-jekyll-posts.html | ||
| 4 | date: 2023-11-05T09:04:28+02:00 | ||
| 5 | layout: post | ||
| 6 | type: note | ||
| 7 | draft: false | ||
| 8 | --- | ||
| 9 | |||
| 10 | Normally you define images with `![]()` in markdown files. But jekyll also | ||
| 11 | provides a way to adding custom attributes to tags with `{:attr="value"}`. | ||
| 12 | |||
| 13 | If you have lots of posts this command will append `{:loading="lazy"}` to all | ||
| 14 | images in all your markdown files. | ||
| 15 | |||
| 16 | ```md | ||
| 17 |  | ||
| 18 | ``` | ||
| 19 | |||
| 20 | will become | ||
| 21 | |||
| 22 | ```md | ||
| 23 | {:loading="lazy"} | ||
| 24 | ``` | ||
| 25 | |||
| 26 | Shell line bellow. Go into the folder where your posts are (probably `_posts`). | ||
| 27 | |||
| 28 | ```sh | ||
| 29 | find . -type f -name "*.md" -exec sed -i -E 's/(\!\[.*\]\((.*?)\))$/\1{:loading="lazy"}/' {} \; | ||
| 30 | ``` | ||
| 31 | |||
| 32 | Under the hood this adds `loading="lazy"` to HTML `img` nodes. | ||
| 33 | |||
| 34 | That is about it. | ||
