diff --git a/config/_default/markup.toml b/config/_default/markup.toml index 1cd9c5bc..3eb8d83b 100644 --- a/config/_default/markup.toml +++ b/config/_default/markup.toml @@ -5,6 +5,9 @@ [goldmark.parser] wrapStandAloneImageWithinParagraph = false + [goldmark.parser.attribute] + block = true + [goldmark.renderer] unsafe = true diff --git a/exampleSite/config/_default/markup.toml b/exampleSite/config/_default/markup.toml index 1cd9c5bc..3eb8d83b 100644 --- a/exampleSite/config/_default/markup.toml +++ b/exampleSite/config/_default/markup.toml @@ -5,6 +5,9 @@ [goldmark.parser] wrapStandAloneImageWithinParagraph = false + [goldmark.parser.attribute] + block = true + [goldmark.renderer] unsafe = true diff --git a/exampleSite/content/samples/markdown/index.it.md b/exampleSite/content/samples/markdown/index.it.md index af8bd56f..f151c04f 100755 --- a/exampleSite/content/samples/markdown/index.it.md +++ b/exampleSite/content/samples/markdown/index.it.md @@ -143,4 +143,28 @@ Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. \ No newline at end of file +Most salamanders 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. diff --git a/exampleSite/content/samples/markdown/index.ja.md b/exampleSite/content/samples/markdown/index.ja.md index 22da88fe..270673db 100755 --- a/exampleSite/content/samples/markdown/index.ja.md +++ b/exampleSite/content/samples/markdown/index.ja.md @@ -144,3 +144,27 @@ Xn + Yn = Zn CTRL+ALT+Deleteを押すことでセッションを終了出来ます。 多くのサラマンダーは夜行性で、昆虫やミミズ、その他の生物を狩ります。 + +## 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. diff --git a/exampleSite/content/samples/markdown/index.md b/exampleSite/content/samples/markdown/index.md index af8bd56f..f151c04f 100755 --- a/exampleSite/content/samples/markdown/index.md +++ b/exampleSite/content/samples/markdown/index.md @@ -143,4 +143,28 @@ Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. \ No newline at end of file +Most salamanders 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. diff --git a/exampleSite/content/samples/markdown/index.zh-cn.md b/exampleSite/content/samples/markdown/index.zh-cn.md index 33da6b3c..db3fee4e 100755 --- a/exampleSite/content/samples/markdown/index.zh-cn.md +++ b/exampleSite/content/samples/markdown/index.zh-cn.md @@ -143,4 +143,28 @@ Xn + Yn = Zn Press CTRL+ALT+Delete to end the session. -Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. \ No newline at end of file +Most salamanders 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. diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html index 4f13a430..6f8701cf 100644 --- a/layouts/_default/_markup/render-image.html +++ b/layouts/_default/_markup/render-image.html @@ -82,7 +82,12 @@ {{- end -}} -
+
{{- if $isRemote -}} {{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}} {{- else if $resource -}}