shithub: hugo

Info  •  Files  •  Log  •  Branches

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.

--- a/docs/content/content-management/shortcodes.md

+++ b/docs/content/content-management/shortcodes.md

@@ -80,15 +80,41 @@

 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

--- a/docs/content/templates/shortcode-templates.md

+++ b/docs/content/templates/shortcode-templates.md

@@ -218,7 +218,7 @@

 Would be rendered as:

 {{< code file="img-output.html" copy="false" >}}

-<figure >

+<figure>

     <img src="/media/spf13.jpg"  />

     <figcaption>

         <h4>Steve Francia</h4>

--- a/hugolib/embedded_shortcodes_test.go

+++ b/hugolib/embedded_shortcodes_test.go

@@ -123,22 +123,22 @@

 	}{

 		{

 			`{{< 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",

 		},

 	} {

--- a/hugolib/page_test.go

+++ b/hugolib/page_test.go

@@ -789,7 +789,7 @@

 	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")

 	}

--- a/hugolib/shortcode_test.go

+++ b/hugolib/shortcode_test.go

@@ -293,6 +293,11 @@

 }

+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)

@@ -306,6 +311,21 @@

 func TestFigureImgWidthAndHeight(t *testing.T) {

 	t.Parallel()

 	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"

--- a/tpl/tplimpl/template_embedded.go

+++ b/tpl/tplimpl/template_embedded.go

@@ -19,8 +19,8 @@

 	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")}}