diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 8d298cde6c0..dff7faa421c 100644 --- a/_includes/refactor-content.html +++ b/_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: '' %} diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index a8db26a00ff..d3b6435fc80 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_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' %}