mirror of
https://github.com/gohugoio/hugo.git
synced 2025-04-28 06:30:33 +03: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
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -20,7 +20,7 @@ func (t *templateHandler) embedShortcodes() {
|
|||
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 }}
|
||||
{{ 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…
Add table
Add a link
Reference in a new issue