Fix: shortcode imgproc does not work with % for markdown body (#332)

layouts/shortcodes/imgproc.html

@@ -1,23 +1,27 @@
-{{ $original := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
-{{ $command := .Get 1 }}
-{{ $options := .Get 2 }}
-{{ if eq $command "Fit"}}
-{{ .Scratch.Set "image" ($original.Fit $options) }}
-{{ else if eq $command "Resize"}}
-{{ .Scratch.Set "image" ($original.Resize $options) }}
-{{ else if eq $command "Fill"}}
-{{ .Scratch.Set "image" ($original.Fill $options) }}
-{{ else if eq $command "Crop"}}
-{{ .Scratch.Set "image" ($original.Crop $options) }}
-{{ else }}
-{{ errorf "Invalid image processing command: Must be one of Fit, Fill, Crop or Resize."}}
-{{ end }}
-{{ $image := .Scratch.Get "image" }}
-<figure class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 }}px">
-	<img class="card-img-top" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
-	{{ with .Inner }}
-	<figcaption class="card-body px-0 pt-2 pb-0">
-		<p class="card-text">{{ . }}{{ with $image.Params.byline }}<small class="text-muted"><br/>{{ . | html }}</small>{{ end }}</p>
-	</figcaption>
-	{{ end }}
+{{ $original := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) -}}
+{{ $command := .Get 1 -}}
+{{ $options := .Get 2 -}}
+{{ if eq $command "Fit" -}}
+    {{ .Scratch.Set "image" ($original.Fit $options) -}}
+{{ else if eq $command "Resize" -}}
+    {{ .Scratch.Set "image" ($original.Resize $options) -}}
+{{ else if eq $command "Fill" -}}
+    {{ .Scratch.Set "image" ($original.Fill $options) -}}
+{{ else if eq $command "Crop" -}}
+    {{ .Scratch.Set "image" ($original.Crop $options) -}}
+{{ else -}}
+    {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Crop or Resize." -}}
+{{ end -}}
+{{ $image := .Scratch.Get "image" -}}
+
+<figure class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: {{ add $image.Width 10 -}}px">
+<img class="card-img-top" src="{{- $image.RelPermalink -}}" width="{{- $image.Width -}}" height="{{- $image.Height -}}">
+{{ with .Inner -}}
+<figcaption class="card-body px-0 pt-2 pb-0">
+<p class="card-text">
+
+{{ . }}{{ with $image.Params.byline }}<small class="text-muted"><br/>{{ . }}</small>{{ end }}
+</p>
+</figcaption>
+{{ end -}}
 </figure>

userguide/content/en/docs/adding-content/shortcodes/index.md

@@ -8,7 +8,7 @@ description: >
 resources:
 - src: "**spruce*.jpg"
   params:
-    byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA"
+    byline: "*Photo*: Bjørn Erik Pedersen / CC-BY-SA"
 ---
 
 Rather than writing all your site pages from scratch, Hugo lets you define and use [shortcodes](https://gohugo.io/content-management/shortcodes/). These are reusable snippets of content that you can include in your pages, often using HTML to create effects that are difficult or impossible to do in simple Markdown. Shortcodes can also have parameters that let you, for example, add your own text to a fancy shortcode text box. As well as Hugo's [built-in shortcodes](https://gohugo.io/content-management/shortcodes/), Docsy provides some shortcodes of its own to help you build your pages.
@@ -198,14 +198,16 @@ The **imgproc** shortcode finds an image in the current [Page Bundle](/docs/addi
 
 
 ```go-html-template
-{{</* imgproc spruce Fill "400x450" */>}}
-Norway Spruce <i>Picea abies</i> shoot with foliage buds.
-{{</* /imgproc */>}}
+{{%/* imgproc spruce Fill "400x450" */%}}
+Norway Spruce *Picea abies* shoot with foliage buds.
+{{%/* /imgproc */%}}
 ```
 
-{{< imgproc spruce Fill "400x450" >}}
-Norway Spruce <i>Picea abies</i> shoot with foliage buds.
-{{< /imgproc >}}
+Use the syntax printed above if the inner content and/or the `byline` parameter of your shortcode is authored in markdown. In case of HTML content, use square brackets `<>` as innermost delimiters: `{{</* imgproc >}}<b>HTML</b> content{{< /imgproc */>}}`.
+
+{{% imgproc spruce Fill "400x450" %}}
+Norway Spruce *Picea abies* shoot with foliage buds.
+{{% /imgproc %}}
 
 The example above has also a byline with photo attribution added. When using illustrations with a free license from [WikiMedia](https://commons.wikimedia.org/) and similar, you will in most situations need a way to attribute the author or licensor. You can add metadata to your page resources in the page front matter. The `byline` param is used by convention in this theme:
 
@@ -217,15 +219,15 @@ The example above has also a byline with photo attribution added. When using ill
 src = "**spruce*.jpg"
 
   [resources.params]
-  byline = "Photo: Bjørn Erik Pedersen / CC-BY-SA"
+  byline = "*Photo*: Bjørn Erik Pedersen / CC-BY-SA"
 +++
 {{< /tab >}}
 {{< tab header="yaml" lang="yaml" >}}
 ---
 resources:
 - src: "**spruce*.jpg"
   params:
-    byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA"
+    byline: "*Photo*: Bjørn Erik Pedersen / CC-BY-SA"
 ---
 {{< /tab >}}
 {{< tab header="json" lang="json" >}}
@@ -234,7 +236,7 @@ resources:
     {
       "src": "**spruce*.jpg",
       "params": {
-        "byline": "Photo: Bjørn Erik Pedersen / CC-BY-SA"
+        "byline": "*Photo*: Bjørn Erik Pedersen / CC-BY-SA"
       }
     }
   ]
@@ -437,7 +439,7 @@ Tabbed panes are implemented using two shortcodes:
 * The `tabpane` shortcode, which is the container element for the tabs. This shortcode can hold the optional named parameters `lang`, `highlight` and `right`. The value of the optional parameters `lang` and `highlight` are passed on as second `LANG` and third `OPTIONS` arguments to Hugo's built-in [`highlight`](https://gohugo.io/functions/highlight/) function which is used to render the code blocks of the individual tabs. Specify `right=true` if you want to right align your tabs. In case the header text of the tab equals the language used in the tab's code block (as in the first tabbed pane example above), you may specify `langEqualsHeader=true` in the surrounding `tabpane` shortcode. Then, the header text of the individual tab is automatically set as `lang` parameter of the respective tab.
 * The various `tab` shortcodes represent the tabs you would like to show. Specify the named parameter `header` for each tab in order to set the header text of the tab. If the `header` parameter is the only parameter inside your tab shortcode, you can specify the header as unnamed parameter, something like `{ tab "My header" }} … {{ /tab }}`. If your `tab` shortcode does not have any parameters, the header of the tab will default to `Tab n`. To split the panes into a left aligned and a right aligned tab group, specify `right=true` in the dividing tab. By giving `right=true` several times, you can even render multiple tab groups. You can disable a tab by specifying the parameter `disabled=true`. For enabled tabs, there are two modes for content display, `code` representation and _textual_ representation:
   * By default, the tab's content is rendered as `code block`. In order to get proper syntax highlighting, specify the named parameter `lang` --and optionally the parameter `highlight`-- for each tab. Parameters set in the parent `tabpane` shortcode will be overwritten.
-  * If the contents of your tabs should be rendered as text with different styles and with optional images, specify `text=true` as parameter of your `tabpane` (or your `tab`). If your content is markdown, use the percent sign `%` as outermost delimiter of your `tab` shortcode, your markup should look like `{{%/* tab */%}}`Your \*\*markdown\*\* content`{{%/* /tab */%}}`. In case of HTML content, use square brackets `<>` as outermost delimiters: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.
+  * If the contents of your tabs should be rendered as text with different styles and with optional images, specify `text=true` as parameter of your `tabpane` (or your `tab`). If your content is markdown, use the percent sign `%` as outermost delimiter of your `tab` shortcode, your markup should look like `{{%/* tab */%}}`Your \*\*markdown\*\* content`{{%/* /tab */%}}`. In case of HTML content, use square brackets `<>` as innermost delimiters: `{{</* tab */>}}`Your &lt;b&gt;HTML&lt;/b&gt; content`{{</* /tab */>}}`.
 
 {{% alert title="Info" %}}
 By default, the language of the selected tab is stored and preserved between different browser sessions. If the content length within your tabs differs greatly, this may lead to unwanted scrolling when switching between tabs. To disable this unwanted behaviour, specify `persistLang=false` within your `tabpane` shortcode.