mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-07 20:30:36 -05:00
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.
This commit is contained in:
parent
76d38d5e53
commit
2e95ec6844
6 changed files with 63 additions and 17 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
} {
|
||||
|
||||
|
|
|
@ -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")
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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")}}
|
||||
|
|
Loading…
Reference in a new issue