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