Preventing image reflow (fix #351)

_includes/refactor-content.html

@@ -35,8 +35,10 @@
   %}
 {% endif %}
 
+
 {% if _content contains '<img src="' %}
 
+  <!-- add CDN prefix if it exists -->
   {% if site.img_cdn != '' %}
     {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
   {% else %}
@@ -46,16 +48,53 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign img_placehodler
+  {% assign _content = _content | replace: '<img src="', '<img data-src="' %}
-    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
 
-  {% assign lozad_replacement = '<img src="'
+  <!-- add image placehoder to prevent layout reflow -->
-    | append: img_placehodler
-    | append: '" data-src="' %}
 
-  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+  {% assign _img_content = nil %}
+
+  {% assign _images = _content | split: '<img ' %}
+
+  {% for _img in _images %}
+    {% if forloop.first %}
+      {% assign _img_content = _img %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+
+    {% for _attr in _attrs %}
+      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
+      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+      {% endcase %}
+
+      {% if _width and _height %}
+        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
+        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+        {% break %}
+      {% endif %}
+
+    {% endfor %}
+
+    {% unless _width and _height %}
+      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
+    {% endunless %}
+
+  {% endfor %}
+
+  {% assign _content = _img_content %}
 
 {% endif %}
 
+
 <!-- return -->
 {{ _content }}

_javascript/utils/img-extra.js

@@ -11,10 +11,10 @@ $(function() {
     return;
   }
 
-  /* lozy loading */
+  /* lazy loading */
 
-  const imgs = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
+  const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
-  const observer = lozad(imgs);
+  const observer = lozad(imgList);
   observer.observe();
 
   /* popup */
@@ -40,9 +40,8 @@ $(function() {
     }
   });
 
-
   /* markup the image links */
+
   $(`${IMG_SCOPE} a`).has("img").addClass('img-link');
 
 });
-

_layouts/post.html

@@ -44,7 +44,11 @@ layout: default
       <div class="post-content">
 
         {% if page.image.src %}
-          <img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
+          <img src="{{ page.image.src }}"
+            class="preview-img"
+            alt="{{ page.image.alt | default: "Preview Image" }}"
+            {% if page.image.width %}width="{{ page.image.width }}"{% endif %}
+            {% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
         {% endif %}
 
         {{ content }}

_sass/addon/commons.scss

@@ -107,6 +107,7 @@ a {
 
 img {
   max-width: 100%;
+  height: auto;
 }
 
 blockquote {