Merge pull request #2591 from pwhittlesea/support-markdown-attributes-on-images

✨ Support Hugo Markdown Attributes for Inline Images

config/_default/markup.toml

@@ -5,6 +5,9 @@
   [goldmark.parser]
     wrapStandAloneImageWithinParagraph = false
 
+    [goldmark.parser.attribute]
+      block = true
+
   [goldmark.renderer]
     unsafe = true
 

exampleSite/config/_default/markup.toml

@@ -5,6 +5,9 @@
   [goldmark.parser]
     wrapStandAloneImageWithinParagraph = false
 
+    [goldmark.parser.attribute]
+      block = true
+
   [goldmark.renderer]
     unsafe = true
 

exampleSite/content/samples/markdown/index.it.md

@@ -143,4 +143,28 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 
 Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
 
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Images
+
+In addition to the [Figure Shortcode]({{< ref "../../docs/shortcodes#figure" >}}), you can define images using the following Markdown syntax:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Image caption")
+
+You can also leverage Hugos ['Markdown attributes'](https://gohugo.io/content-management/markdown-attributes/) feature to add custom attributes to the created HTML element.
+For example, to set the width of an image to 50%:
+
+```md
+![Alt text](image.jpg "Image caption")
+{style="width:50%;"}
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Half width image caption")
+{style="width:50%;"}
+
+Note that the 'Markdown attributes' feature requires configuration of the Goldmark renderer.
+See the Hugo [documentation](https://gohugo.io/content-management/markdown-attributes/) for more information.

exampleSite/content/samples/markdown/index.ja.md

@@ -144,3 +144,27 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd>を押すことでセッションを終了出来ます。
 
 多くの<mark>サラマンダー</mark>は夜行性で、昆虫やミミズ、その他の生物を狩ります。
+
+## Images
+
+In addition to the [Figure Shortcode]({{< ref "../../docs/shortcodes#figure" >}}), you can define images using the following Markdown syntax:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Image caption")
+
+You can also leverage Hugos ['Markdown attributes'](https://gohugo.io/content-management/markdown-attributes/) feature to add custom attributes to the created HTML element.
+For example, to set the width of an image to 50%:
+
+```md
+![Alt text](image.jpg "Image caption")
+{style="width:50%;"}
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Half width image caption")
+{style="width:50%;"}
+
+Note that the 'Markdown attributes' feature requires configuration of the Goldmark renderer.
+See the Hugo [documentation](https://gohugo.io/content-management/markdown-attributes/) for more information.

exampleSite/content/samples/markdown/index.md

@@ -143,4 +143,28 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 
 Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
 
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Images
+
+In addition to the [Figure Shortcode]({{< ref "../../docs/shortcodes#figure" >}}), you can define images using the following Markdown syntax:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Image caption")
+
+You can also leverage Hugos ['Markdown attributes'](https://gohugo.io/content-management/markdown-attributes/) feature to add custom attributes to the created HTML element.
+For example, to set the width of an image to 50%:
+
+```md
+![Alt text](image.jpg "Image caption")
+{style="width:50%;"}
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Half width image caption")
+{style="width:50%;"}
+
+Note that the 'Markdown attributes' feature requires configuration of the Goldmark renderer.
+See the Hugo [documentation](https://gohugo.io/content-management/markdown-attributes/) for more information.

exampleSite/content/samples/markdown/index.zh-cn.md

@@ -143,4 +143,28 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 
 Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
 
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
+
+## Images
+
+In addition to the [Figure Shortcode]({{< ref "../../docs/shortcodes#figure" >}}), you can define images using the following Markdown syntax:
+
+```md
+![Alt text](image.jpg "Image caption")
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Image caption")
+
+You can also leverage Hugos ['Markdown attributes'](https://gohugo.io/content-management/markdown-attributes/) feature to add custom attributes to the created HTML element.
+For example, to set the width of an image to 50%:
+
+```md
+![Alt text](image.jpg "Image caption")
+{style="width:50%;"}
+```
+
+![Alt text](../../docs/shortcodes/abstract.jpg "Half width image caption")
+{style="width:50%;"}
+
+Note that the 'Markdown attributes' feature requires configuration of the Goldmark renderer.
+See the Hugo [documentation](https://gohugo.io/content-management/markdown-attributes/) for more information.

layouts/_default/_markup/render-image.html

@@ -82,7 +82,12 @@
 {{- end -}}
 
 
-<figure>
+<figure
+  {{- range $k, $v := .Attributes -}}
+    {{- if $v -}}
+      {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
+    {{- end -}}
+  {{- end -}}>
   {{- if $isRemote -}}
     {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}}
   {{- else if $resource -}}