feat(ui): add galleries

_includes/refactor-content.html

@@ -67,6 +67,7 @@
     {% assign _src = null %}
     {% assign _lqip = null %}
     {% assign _class = null %}
+    {% assign _data_gallery = null %}
 
     {% for _attr in _attrs %}
       {% unless _attr contains '=' %}
@@ -84,6 +85,8 @@
           {% assign _lqip = _value %}
         {% when 'class' %}
           {% assign _class = _value %}
+        {% when 'data-gallery' %}
+          {% assign _data_gallery = '" data-gallery="' | append: _value %}
       {% endcase %}
     {% endfor %}
 
@@ -155,6 +158,7 @@
           | prepend: '<a href="'
           | append: '" class="popup img-link '
           | append: _class
+          | append: _data_gallery
           | append: '">'
         %}
 

_posts/2019-08-08-text-and-typography.md

@@ -190,6 +190,19 @@ The image below will toggle dark/light mode based on theme preference, notice it
 ![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
 ![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
 
+### Galleries
+
+The images below are grouped into different galleries.
+
+Gallery 1
+
+![gallery1](/posts/20190808/mockup.png){: .w-25 .normal data-gallery="gallery1"}
+
+Gallery 2
+
+![gallery2](/posts/20190808/devtools-light.png){: .w-25 .normal data-gallery="gallery2"}
+![gallery2](/posts/20190808/devtools-dark.png){: .w-25 .normal data-gallery="gallery2"}
+
 ## Video
 
 {% include embed/youtube.html id='Balreaj8Yqs' %}