From 4abcce013c9ee3053badf2abda77190233066676 Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Fri, 23 Feb 2024 10:35:22 +0100 Subject: Testing thoughts page --- .../2023-11-05-add-lazy-loading-to-jekyll-posts.md | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 _posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md (limited to '_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md') 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 new file mode 100644 index 0000000..8293a4d --- /dev/null +++ b/_posts/notes/2023-11-05-add-lazy-loading-to-jekyll-posts.md @@ -0,0 +1,34 @@ +--- +title: "Add lazy loading of images in Jekyll posts" +permalink: /add-lazy-loading-to-jekyll-posts.html +date: 2023-11-05T09:04:28+02:00 +layout: post +type: note +draft: false +--- + +Normally you define images with `![]()` in markdown files. But jekyll also +provides a way to adding custom attributes to tags with `{:attr="value"}`. + +If you have lots of posts this command will append `{:loading="lazy"}` to all +images in all your markdown files. + +```md +![image-title](/path/to/your/image.jpg) +``` + +will become + +```md +![image-title](/path/to/your/image.jpg){:loading="lazy"} +``` + +Shell line bellow. Go into the folder where your posts are (probably `_posts`). + +```sh +find . -type f -name "*.md" -exec sed -i -E 's/(\!\[.*\]\((.*?)\))$/\1{:loading="lazy"}/' {} \; +``` + +Under the hood this adds `loading="lazy"` to HTML `img` nodes. + +That is about it. -- cgit v1.2.3