Add image CDN support & improve image lazy loading

_config.yml

@@ -9,14 +9,14 @@
 # --------------------------
 title: Chirpy                          # the main title
 
-tagline: A text-focused Jekyll theme.  # it will display as the sub-title
+tagline: A text-focused Jekyll theme   # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
   A minimal, portfolio, sidebar,
   bootstrap Jekyll theme with responsive web design
   and focuses on text presentation.
 
-# fill in the base hostname & protocol for your site, e.g., 'https://username.github.io'
+# fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: ''
 
 author: your_full_name                  # change to your full name
@@ -79,7 +79,15 @@ disqus:
 #
 #     dark   - Use the dark color scheme
 #
-theme_mode:   # <light|dark>
+theme_mode:   # [light|dark]
+
+# The CDN endpoint for images.
+# Notice that once it is assigned, the CDN url
+# will be added to all image (site avatar & posts' images) paths starting with '/'
+#
+# e.g. 'https://cdn.com'
+img_cdn: ''
+
 
 # boolean type, the global switch for ToC in posts.
 toc: true

_includes/lozad.html

@@ -2,7 +2,7 @@
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 
 <script type="text/javascript">
-  const imgs = document.querySelectorAll('#post-wrapper img');
+  const imgs = document.querySelectorAll('.post-content img');
   const observer = lozad(imgs);
   observer.observe();
 </script>

_includes/refactor-content.html

@@ -35,5 +35,32 @@
   %}
 {% endif %}
 
+{% if _content contains '<img src="' %}
+
+  {% if site.img_cdn != '' %}
+    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
+  {% else %}
+    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
+  {% endif %}
+
+  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
+
+  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+  {% assign lozad = true %}
+  {% assign img_placehodler
+    = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
+
+  {% assign lozad_replacement = '<img src="'
+    | append: img_placehodler
+    | append: '" data-src="' %}
+
+  {% assign _content = _content | replace: '<img src="', lozad_replacement %}
+
+{% endif %}
+
 <!-- return -->
 {{ _content }}
+
+{% if lozad %}
+  {% include lozad.html %}
+{% endif %}

_includes/sidebar.html

@@ -12,10 +12,15 @@
     <div id="avatar">
       <a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
         {% assign avatar_url = site.avatar %}
-        {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
+
-        {% if start == '/' %}
+        {% unless avatar_url contains '://' %}
-          {% assign avatar_url = avatar_url | prepend: site.baseurl %}
+          {% if site.img_cdn %}
-        {% endif %}
+            {% assign avatar_url = avatar_url | prepend: site.img_cdn %}
+          {% else %}
+            {% assign avatar_url = avatar_url | relative_url %}
+          {% endif %}
+        {% endunless %}
+
         <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
       </a>
     </div>

_layouts/post.html

@@ -47,21 +47,13 @@ layout: default
       </div> <!-- .post-meta -->
 
       <div class="post-content">
-        {%- capture img_placehodler -%}
-          data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
-        {%- endcapture -%}
 
         {% if page.image %}
-          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="preview-img">
+          <img src="{{ page.image }}" class="preview-img" alt="Preview Image">
         {% endif %}
 
-        <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+        {{ content }}
-        {% if content contains '<img src=' %}
+
-          {% assign replacement = '<img src="' | append: img_placehodler | append: '" data-src=' %}
-          {{ content | replace: '<img src=', replacement }}
-        {% else %}
-          {{ content }}
-        {% endif %}
       </div>
 
       <div class="post-tail-wrapper text-muted">
@@ -140,5 +132,3 @@ layout: default
   </div> <!-- .col-* -->
 
 </div> <!-- .row -->
-
-{% include lozad.html %}