Add "target" and "rel" parameters to figure shortcode

Also:

- Remove unnecessary space from `figure` tag if no class is specified.
  - Update related tests.
- Add test cases for the changes made to the figure shortcode.
- Document the newly added target and rel parameters
- Add more detail to the documentation of all figure shortcode parameters.

diff --git a/docs/content/content-management/shortcodes.md b/docs/content/content-management/shortcodes.md
index b6428f5a0c4d6cd14543056ab1103d22edbcccf5..e5bc8526500528e1250d70cf52f8c74f9deb0c49 100644 (file)
--- a/docs/content/content-management/shortcodes.md
+++ b/docs/content/content-management/shortcodes.md
@@ -80,15 +80,41 @@ Hugo ships with a set of predefined shortcodes that represent very common usage.
 
 The `figure` shortcode can use the following named parameters:
 
-* `src`
-* `link`
-* `title`
-* `caption`
-* `class`
-* `attr` (i.e., attribution)
-* `attrlink`
-* `alt`
-* `width`
+src
+: URL of the image to be displayed.
+
+link
+: If the image needs to be hyperlinked, URL of the destination.
+
+target
+: Optional `target` attribute for the URL if `link` parameter is set.
+
+rel
+: Optional `rel` attribute for the URL if `link` parameter is set.
+
+alt
+: Alternate text for the image if the image cannot be displayed.
+
+title
+: Image title.
+
+caption
+: Image caption.
+
+class
+: `class` attribute of the HTML `figure` tag.
+
+height
+: `height` attribute of the image.
+
+width
+: `width` attribute of the image.
+
+attr
+: Image attribution text.
+
+attrlink
+: If the attribution text needs to be hyperlinked, URL of the destination.
 
 #### Example `figure` Input
 

diff --git a/docs/content/templates/shortcode-templates.md b/docs/content/templates/shortcode-templates.md
index de15942819f992ec5773244d0561189a4790ee4e..08f1b4c80a6b04daba513219301060d92ba6c2f2 100644 (file)
--- a/docs/content/templates/shortcode-templates.md
+++ b/docs/content/templates/shortcode-templates.md
@@ -218,7 +218,7 @@ You have created the shortcode at `/layouts/shortcodes/img.html`, which loads th
 Would be rendered as:
 
 {{< code file="img-output.html" copy="false" >}}
-<figure >
+<figure>
     <img src="/media/spf13.jpg"  />
     <figcaption>
         <h4>Steve Francia</h4>

diff --git a/hugolib/embedded_shortcodes_test.go b/hugolib/embedded_shortcodes_test.go
index 6167cded686e06eb0bdc18f97456a85aba0a5921..50da35c5b6979af5a47068ffc513f2b264d8298c 100644 (file)
--- a/hugolib/embedded_shortcodes_test.go
+++ b/hugolib/embedded_shortcodes_test.go
@@ -123,22 +123,22 @@ func TestShortcodeFigure(t *testing.T) {
        }{
                {
                        `{{< figure src="/img/hugo-logo.png" >}}`,
-                       "(?s)\n<figure >.*?<img src=\"/img/hugo-logo.png\" />.*?</figure>\n",
+                       "(?s)\n<figure>.*?<img src=\"/img/hugo-logo.png\" />.*?</figure>\n",
                },
                {
                        // set alt
                        `{{< figure src="/img/hugo-logo.png" alt="Hugo logo" >}}`,
-                       "(?s)\n<figure >.*?<img src=\"/img/hugo-logo.png\" alt=\"Hugo logo\" />.*?</figure>\n",
+                       "(?s)\n<figure>.*?<img src=\"/img/hugo-logo.png\" alt=\"Hugo logo\" />.*?</figure>\n",
                },
                // set title
                {
                        `{{< figure src="/img/hugo-logo.png" title="Hugo logo" >}}`,
-                       "(?s)\n<figure >.*?<img src=\"/img/hugo-logo.png\" />.*?<figcaption>.*?<h4>Hugo logo</h4>.*?</figcaption>.*?</figure>\n",
+                       "(?s)\n<figure>.*?<img src=\"/img/hugo-logo.png\" />.*?<figcaption>.*?<h4>Hugo logo</h4>.*?</figcaption>.*?</figure>\n",
                },
                // set attr and attrlink
                {
                        `{{< figure src="/img/hugo-logo.png" attr="Hugo logo" attrlink="/img/hugo-logo.png" >}}`,
-                       "(?s)\n<figure >.*?<img src=\"/img/hugo-logo.png\" />.*?<figcaption>.*?<p>.*?<a href=\"/img/hugo-logo.png\">.*?Hugo logo.*?</a>.*?</p>.*?</figcaption>.*?</figure>\n",
+                       "(?s)\n<figure>.*?<img src=\"/img/hugo-logo.png\" />.*?<figcaption>.*?<p>.*?<a href=\"/img/hugo-logo.png\">.*?Hugo logo.*?</a>.*?</p>.*?</figcaption>.*?</figure>\n",
                },
        } {
 

diff --git a/hugolib/page_test.go b/hugolib/page_test.go
index 5c8c46c9b5aa9c716874bdd0b6cdf5af8b2116c3..3e9e985e2eac3ed787b84344ecf2cf6b350d4881 100644 (file)
--- a/hugolib/page_test.go
+++ b/hugolib/page_test.go
@@ -789,7 +789,7 @@ func TestPageWithShortCodeInSummary(t *testing.T) {
        assertFunc := func(t *testing.T, ext string, pages Pages) {
                p := pages[0]
                checkPageTitle(t, p, "Simple")
-               checkPageContent(t, p, normalizeExpected(ext, "<p>Summary Next Line. \n<figure >\n    \n        <img src=\"/not/real\" />\n    \n    \n</figure>\n.\nMore text here.</p>\n\n<p>Some more text</p>\n"))
+               checkPageContent(t, p, normalizeExpected(ext, "<p>Summary Next Line. \n<figure>\n    \n        <img src=\"/not/real\" />\n    \n    \n</figure>\n.\nMore text here.</p>\n\n<p>Some more text</p>\n"))
                checkPageSummary(t, p, "Summary Next Line.  . More text here. Some more text")
                checkPageType(t, p, "page")
        }

diff --git a/hugolib/shortcode_test.go b/hugolib/shortcode_test.go
index 0b5c29e945b89233e49b334698cce65babae6d45..763394032ee09d3b2d37bf79b7698e27e1466a78 100644 (file)
--- a/hugolib/shortcode_test.go
+++ b/hugolib/shortcode_test.go
@@ -293,6 +293,11 @@ func TestParentShortcode(t *testing.T) {
 
 }
 
+func TestFigureOnlySrc(t *testing.T) {
+       t.Parallel()
+       CheckShortCodeMatch(t, `{{< figure src="/found/here" >}}`, "\n<figure>\n    \n        <img src=\"/found/here\" />\n    \n    \n</figure>\n", nil)
+}
+
 func TestFigureImgWidth(t *testing.T) {
        t.Parallel()
        CheckShortCodeMatch(t, `{{% figure src="/found/here" class="bananas orange" alt="apple" width="100px" %}}`, "\n<figure class=\"bananas orange\">\n    \n        <img src=\"/found/here\" alt=\"apple\" width=\"100px\" />\n    \n    \n</figure>\n", nil)
@@ -308,6 +313,21 @@ func TestFigureImgWidthAndHeight(t *testing.T) {
        CheckShortCodeMatch(t, `{{% figure src="/found/here" class="bananas orange" alt="apple" width="50" height="100" %}}`, "\n<figure class=\"bananas orange\">\n    \n        <img src=\"/found/here\" alt=\"apple\" width=\"50\" height=\"100\" />\n    \n    \n</figure>\n", nil)
 }
 
+func TestFigureLinkNoTarget(t *testing.T) {
+       t.Parallel()
+       CheckShortCodeMatch(t, `{{< figure src="/found/here" link="/jump/here/on/clicking" >}}`, "\n<figure>\n    <a href=\"/jump/here/on/clicking\">\n        <img src=\"/found/here\" />\n    </a>\n    \n</figure>\n", nil)
+}
+
+func TestFigureLinkWithTarget(t *testing.T) {
+       t.Parallel()
+       CheckShortCodeMatch(t, `{{< figure src="/found/here" link="/jump/here/on/clicking" target="_self" >}}`, "\n<figure>\n    <a href=\"/jump/here/on/clicking\" target=\"_self\">\n        <img src=\"/found/here\" />\n    </a>\n    \n</figure>\n", nil)
+}
+
+func TestFigureLinkWithTargetAndRel(t *testing.T) {
+       t.Parallel()
+       CheckShortCodeMatch(t, `{{< figure src="/found/here" link="/jump/here/on/clicking" target="_blank" rel="noopener" >}}`, "\n<figure>\n    <a href=\"/jump/here/on/clicking\" target=\"_blank\" rel=\"noopener\">\n        <img src=\"/found/here\" />\n    </a>\n    \n</figure>\n", nil)
+}
+
 const testScPlaceholderRegexp = "HAHAHUGOSHORTCODE-\\d+HBHB"
 
 func TestExtractShortcodes(t *testing.T) {

diff --git a/tpl/tplimpl/template_embedded.go b/tpl/tplimpl/template_embedded.go
index 627d4dc4da37ae8c994abf6e4539c0c00d4f8914..18bba44f2b3898e9f53b3079c910272683edf31e 100644 (file)
--- a/tpl/tplimpl/template_embedded.go
+++ b/tpl/tplimpl/template_embedded.go
@@ -19,8 +19,8 @@ func (t *templateHandler) embedShortcodes() {
        t.addInternalShortcode("highlight.html", `{{ if len .Params | eq 2 }}{{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }}{{ else }}{{ highlight (trim .Inner "\n\r") (.Get 0) "" }}{{ end }}`)
        t.addInternalShortcode("test.html", `This is a simple Test`)
        t.addInternalShortcode("figure.html", `<!-- image -->
-<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
-    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
+    {{ if .Get "link"}}<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>{{ end }}
         <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}/>
     {{ if .Get "link"}}</a>{{ end }}
     {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}