fixed the figure shortcode to play well with our img shortcode.

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
new file mode 100644 (file)
index 0000000..86ae6b7
--- /dev/null
+++ b/layouts/shortcodes/figure.html
@@ -0,0 +1,27 @@
+{{/*
+    * This version of the figure shortcode needs to be closed and doesn't 
+    * add an image itself, but relies on the img.html shortcode to provide
+    * a responsive image instead.
+    */}}
+<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end -}}
+    {{- .Inner -}}
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index 2f0bd67..e93d5aa 100644 (file)
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -27,7 +27,7 @@
     $CFPstyle is for use in styling
     the div's background, as you'll see shortly.
 */}}
-{{- $CFPstyle := printf "%s%s%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat;" -}}
+{{- $CFPstyle := printf "%s%s%s%v%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "; height: " $source.Height ";" -}}
 {{/*
     Then, we create a 640-pixel-wide JPG
     of the image. This will serve as the