From 0fd5d2a250b15897000fff53cf6d9158d644b7ac Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Wed, 17 Feb 2021 21:15:12 +0000
Subject: [PATCH] feat(style): center figure SVGs

---
 wowchemy/assets/scss/wowchemy/_base.scss | 13 +++++++++++--
 wowchemy/layouts/shortcodes/figure.html  | 17 +++++++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/wowchemy/assets/scss/wowchemy/_base.scss b/wowchemy/assets/scss/wowchemy/_base.scss
index 9c205730..157cab62 100644
--- a/wowchemy/assets/scss/wowchemy/_base.scss
+++ b/wowchemy/assets/scss/wowchemy/_base.scss
@@ -235,8 +235,17 @@ video {
 }
 
 // Center all figure images by default.
-figure img {
-  @extend .margin-auto;
+figure {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+figure img,
+figure svg {
+  height: auto;
+  max-width: 100%;
+  flex-basis: 100%;
 }
 
 // Center all figure captions by default.
diff --git a/wowchemy/layouts/shortcodes/figure.html b/wowchemy/layouts/shortcodes/figure.html
index 831d8cbf..573d4dab 100644
--- a/wowchemy/layouts/shortcodes/figure.html
+++ b/wowchemy/layouts/shortcodes/figure.html
@@ -2,17 +2,16 @@
 {{/* Load image from page dir falling back to media library at `assets/images/` and then to remote URI. */}}
 
 {{ $destination := .Get "src" }}
-{{ $caption := .Get "title" | default (.Get "caption") | default "" }}
-{{ $id := .Get "id" | default $caption }}
+{{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
+{{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
 {{ $alt := .Get "alt" | default ($caption | plainify) }}
 
 {{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
-{{- if and (not $img) .Page.File -}}
-  {{ $path :=  $destination }}
-  {{- $img = resources.Get (path.Join "images" $path) -}}
+{{- if not $img -}}
+  {{- $img = resources.Get (path.Join "images" $destination) -}}
 {{- end -}}
 
-<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ anchorize . }}"{{ end }}>
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
 
   {{- if $img -}}
     {{ $isSVG := eq $img.MediaType.SubType "svg" }}
@@ -22,13 +21,15 @@
       {{- $img_lg := $img.Fit "1200x1200" -}}
       {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
       {{- $img_sm := $img_md.Fit "400x400" -}}
+      {{- $width := (.Get "width") | default $img_md.Width -}}
+      {{- $height := (.Get "height") | default $img_md.Height -}}
       <img alt="{{ $alt }}" srcset="
            {{ $img_sm.RelPermalink }} 400w,
            {{ $img_md.RelPermalink }} 760w,
            {{ $img_lg.RelPermalink }} 1200w"
            src="{{ $img_sm.RelPermalink }}"
-           width="{{ (.Get "width") | default $img_md.Width }}"
-           height="{{ (.Get "height") | default $img_md.Height }}"
+           width="{{ $width }}"
+           height="{{ $height }}"
            loading="lazy"
            data-zoomable />
     {{ end }}