feat: support LQIP for images

_includes/refactor-content.html

@@ -51,23 +51,43 @@
   {% assign _img_content = nil %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
+  <!-- CDN URL -->
+  {% if site.img_cdn %}
+    {% if site.img_cdn contains '//' %}
+      {% assign _path_prefix = site.img_cdn %}
+    {% else %}
+      {% assign _path_prefix = site.img_cdn | relative_url %}
+    {% endif %}
+  {% else %}
+    {% assign _path_prefix = site.baseurl %}
+  {% endif %}
+
+  <!-- Add image path -->
+  {% if page.img_path %}
+    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
+    {% assign _path_prefix = _path_prefix | append: _path %}
+  {% endif %}
+
   {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
       {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _src = nil %}
-
     {% assign _left = _img_snippet | split: '>' | first %}
     {% assign _right = _img_snippet | remove: _left %}
 
-    {% assign _left = _left | remove: ' /' %}
+    {% unless _left contains 'src=' %}
-    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign _left = _left | remove: ' /'  | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
     {% assign _attrs = _left | split: ' ' %}
 
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _lqip = nil %}
+
     {% for _attr in _attrs %}
       {% assign _pair = _attr | split: '="' %}
       {% if _pair.size < 2 %}
@@ -75,7 +95,7 @@
       {% endif %}
 
       {% capture _key %}{{ _pair | first }}{% endcapture %}
-      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
@@ -84,67 +104,61 @@
           {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
       {% endcase %}
 
-      {% if _width and _height and _src %}
-        {% break %}
-      {% endif %}
     {% endfor %}
 
-    {% if _src %}
+    {% unless _src contains '//' %}
-      {% unless _src contains '://' %}
+      {% assign _final_src = _path_prefix | append: _src %}
-        <!-- Add CDN URL -->
+      {% capture _src_from %}"{{ _src }}"{% endcapture %}
-        {% if site.img_cdn %}
+      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
-          {% if site.img_cdn contains '//' %}
+      {% assign _left = _left | replace: _src_from, _src_to %}
-            {% assign _src_prefix = site.img_cdn %}
+    {% endunless %}
-          {% else %}
-            {% assign _src_prefix = site.img_cdn | relative_url %}
-          {% endif %}
-        {% else %}
-          {% assign _src_prefix = site.baseurl %}
-        {% endif %}
-
-        <!-- Add image path -->
-        {% if page.img_path %}
-          {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
-          {% assign _src_prefix = _src_prefix | append: _path %}
-        {% endif %}
-
-        {% assign _final_src = _src_prefix | append: _src %}
-        {% assign _left = _left | replace: _src, _final_src %}
 
+    {% if _lqip %}
+      {% unless _lqip contains ':' %}
+        {% assign _final_lqip = _path_prefix | append: _lqip %}
+        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
+        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
+        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
       {% endunless %}
-
-      <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
-
-      {% if _left contains 'class=' %}
-        {% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
-      {% else %}
-        {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
-      {% endif %}
-
-      {% assign _left = _left | replace: 'src=', 'data-src=' %}
-
     {% endif %}
 
-    <!-- Add SVG placehoder to prevent layout reflow -->
+    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
+    {% if _left contains 'class=' %}
+      {% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
+    {% else %}
+      {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
+    {% endif %}
 
-    {% if _width and _height %}
+    {% assign _left = _left | replace: 'src=', 'data-src=' %}
-      {%- capture _svg -%}
-        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
-      {%- endcapture -%}
 
-      {% assign _left =  _svg | append: ' ' | append: _left %}
+    <!-- add placeholder -->
+    {% if _lqip %}
+      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
+    {% else %}
+      {% if _width and _height %}
+        <!-- Add SVG placehoder to prevent layout reflow -->
+        {%- capture _svg -%}
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
+        {%- endcapture -%}
+        {% assign _left =  _svg | append: ' ' | append: _left %}
+      {% endif %}
     {% endif %}
 
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
+    <!-- Combine -->
     {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
-  {% assign _content = _img_content %}
+  {% if _img_content %}
+    {% assign _content = _img_content %}
+  {% endif %}
 
 {% endif %}
 

_layouts/post.html

@@ -27,12 +27,9 @@ tail_includes:
     {% endif %}
 
   {% if page.image %}
-    {% capture bg %}
-      {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
-    {% endcapture %}
-
     <div class="mt-3 mb-3">
-      <img src="{{ page.image.path | default: page.image }}" class="preview-img {{ bg | strip }}"
+      <img src="{{ page.image.path | default: page.image }}"
+        class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"
         alt="{{ page.image.alt | default: "Preview Image" }}"
 
       {% if page.image.width %}
@@ -45,12 +42,17 @@ tail_includes:
         height="{{ page.image.height }}"
       {% elsif page.image.h %}
         height="{{ page.image.h }}"
-      {% endif %}>
+      {% endif %}
+
+      {% if page.image.lqip %}
+        lqip="{{ page.image.lqip }}"
+      {% endif %}
+
+      ><!-- endof img tag -->
 
       {% if page.image.alt %}
         <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
       {% endif %}
-
     </div>
   {% endif %}
 

_sass/addon/commons.scss

@@ -184,16 +184,27 @@ i { /* fontawesome icons */
 }
 
 img[data-src] {
-  margin: 0.5rem 0;
+  @at-root #main #{&} {
-
+    margin: 0.5rem 0;
-  &.lazyload,
-  &.lazyloading {
-    opacity: 0;
   }
 
-  &.lazyloaded {
+  &[data-lqip="true"] {
-    opacity: 1;
+    &.lazyload,
-    transition: opacity 0.5s;
+    &.lazyloading {
+      filter: blur(20px);
+    }
+  }
+
+  &:not([data-lqip="true"]) {
+    &.lazyload,
+    &.lazyloading {
+      opacity: 0;
+    }
+
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 0.5s;
+    }
   }
 
   &.left {
@@ -395,6 +406,10 @@ img[data-src] {
     margin-bottom: 1.5rem;
   }
 
+  img[data-src]:not(.normal):not(.left):not(.right) {
+    @include align-center;
+  }
+
   a {
     &.img-link {
       @extend %no-cursor;
@@ -403,10 +418,6 @@ img[data-src] {
     /* created by `_includes/img-extra.html` */
     &.popup {
       cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
-        @include align-center;
-      }
     }
 
     &:hover {

_sass/colors/dark-typography.scss

@@ -96,8 +96,10 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   .post img[data-src] {
-    -webkit-filter: brightness(95%);
+    &.lazyloaded {
-    filter: brightness(95%);
+      -webkit-filter: brightness(95%);
+      filter: brightness(95%);
+    }
   }
 
   hr {

_sass/layout/post.scss

@@ -30,7 +30,7 @@ img.preview-img {
   margin: 0;
   border-radius: 6px;
 
-  &.bg {
+  &:not(.no-bg) {
     background: var(--preview-img-bg);
   }
 }