Add figure functionality for numpy.org

assets/theme-css/figure.css

@@ -0,0 +1,43 @@
+img {
+  max-width: 100%;
+}
+
+img.align-left,
+figure.align-left,
+.figure.align-left,
+object.align-left {
+  clear: left;
+  float: left;
+  margin-right: 1em;
+}
+
+img.align-right,
+figure.align-right,
+.figure.align-right,
+object.align-right {
+  clear: right;
+  float: right;
+  margin-left: 1em;
+}
+
+img.align-center,
+figure.align-center,
+.figure.align-center,
+object.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+img.align-default,
+figure.align-default,
+.figure.align-default {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+strong.caption-title {
+  font-weight: bold;
+}

assets/theme-css/styles.css

@@ -12,46 +12,6 @@ body {
   text-align: center !important;
 }
 
-img {
-  max-width: 100%;
-}
-
-img.align-left,
-figure.align-left,
-.figure.align-left,
-object.align-left {
-  clear: left;
-  float: left;
-  margin-right: 1em;
-}
-
-img.align-right,
-figure.align-right,
-.figure.align-right,
-object.align-right {
-  clear: right;
-  float: right;
-  margin-left: 1em;
-}
-
-img.align-center,
-figure.align-center,
-.figure.align-center,
-object.align-center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-img.align-default,
-figure.align-default,
-.figure.align-default {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
-
 .align-left {
   text-align: left;
 }

layouts/shortcodes/figure.html

@@ -7,7 +7,12 @@
 alt = 'Cute puppies'
 height = 200
 width = 200
-caption = 'A figure is an image with a caption and/or a legend:'
+title = 'Figure title'
+attr = '(**Figure Credits:** Daily cute puppy image from unslash.com)'
+attrlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
+caption = '''
+A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution.
+'''
 legend = '''
 **TODO: need to convert yamltotable to tomltotable**
 
@@ -18,6 +23,8 @@
 {{< figure >}}
 src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
 alt = 'Cute puppies'
+attr = 'from unslash.com'
+attrlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
 align = 'left'
 height = 150
 width = 150
@@ -41,9 +48,15 @@
 {{- $m.SetInMap "image" "align" "center" -}}
 {{ partial "_elements/image.html" (dict "data" $m.Values.image) }}
 <figcaption>
+{{- with $figure.title -}}
+<strong class="caption-title">{{ . }}</strong><a class="headerlink" href="#{{ $id  }}" title="Link to this image">#</a><br>
+{{- end }}
+{{- if $figure.attr -}}
+{{- with $figure.attrlink -}}<a href="{{ . }}">{{- end -}}{{- $figure.attr -}}{{- if $figure.attrlink -}}</a>{{- end -}}
+{{- end }}
 <p><span class="caption-text">
 {{- $figure.caption | markdownify -}}
-</span><a class="headerlink" href="#{{ $id  }}" title="Link to this image">#</a></p>
+</span>
 {{- with $figure.legend }}
 <div class="legend">
 {{ . | markdownify -}}