mirror of https://github.com/istio/istio.io.git
124 lines
4.4 KiB
HTML
124 lines
4.4 KiB
HTML
{{- /*
|
|
Purpose:
|
|
Inserts a figure into a page. The user of this shortcode specifies the
|
|
relative width of the figure in percentage, and an aspect ratio value in
|
|
lieu of the Y coordinate. Through CSS trickery, these two values let us
|
|
calculate the actual width and height of the image at render time in such
|
|
a way that it avoids the typical 'shifting text' problem as images are
|
|
loaded asynchronously.
|
|
|
|
Usage:
|
|
|
|
{{< image width="<NN>%" ratio="<NN>"
|
|
link="<path to image file>"
|
|
alt="<text to display when the image is not available>"
|
|
title="<text to display when hovering over the image>"
|
|
caption="<text to display below the image>"
|
|
>}}
|
|
|
|
If you omit the alt parameter, it will take on the value of the title parameter.
|
|
If you omit the title parameter, it will take on the value of the caption parameter.
|
|
In other words, if all three strings are the same, you can just supply the caption
|
|
parameter.
|
|
|
|
The width value represents the percentage of the page that the image should occupy. If
|
|
width is not supplied, it defaults to 100%.
|
|
|
|
The ratio value represents the ratio of width to height for the image. You can normally
|
|
omit this value and it will be computed automatically.
|
|
|
|
*/ -}}
|
|
|
|
{{- $width := .Get "width" -}}
|
|
{{- $ratio := .Get "ratio" -}}
|
|
{{- $link := .Get "link" -}}
|
|
{{- $caption := .Get "caption" -}}
|
|
{{- $title := or (.Get "title") (.Get "caption") -}}
|
|
{{- $alt := or (.Get "alt") (.Get "title") (.Get "caption") -}}
|
|
|
|
{{- with $caption -}}
|
|
{{- if (strings.HasSuffix . ".") -}}
|
|
{{- errorf "Image caption ends with a period (%s)" .Position -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- if not $width -}}
|
|
{{- $width = "100%" -}}
|
|
{{- end -}}
|
|
|
|
{{- /* Turn relative values for $link into absolute paths */ -}}
|
|
|
|
{{- $prefix := slicestr $link 0 1 -}}
|
|
{{- if (ne $prefix "/") -}}
|
|
{{- $prefix := slicestr $link 0 8 -}}
|
|
{{- if (ne $prefix "https://") -}}
|
|
{{- $prefix := slicestr $link 0 3 -}}
|
|
{{- if (eq $prefix "../") -}}
|
|
{{- $link = printf "/%s%s" .Page.File.Dir (slicestr $link 3) -}}
|
|
{{- else -}}
|
|
{{- $link = printf "/%s%s" .Page.File.Dir $link -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- $linkPrefix := "" -}}
|
|
{{- $path := "" -}}
|
|
{{- if eq .Page.Language.Lang "zh" -}}
|
|
{{- $path = printf "content/zh%s" $link -}}
|
|
{{- $linkPrefix = "/zh" -}}
|
|
|
|
{{- if not (fileExists $path) -}}
|
|
{{- $path = printf "content/en%s" $link -}}
|
|
{{- $linkPrefix = "" -}}
|
|
{{- end -}}
|
|
{{- else -}}
|
|
{{- $path = printf "content/en%s" $link -}}
|
|
{{- end -}}
|
|
|
|
{{- if strings.HasSuffix $link ".svg" -}}
|
|
{{- if not (fileExists $path) -}}
|
|
{{- errorf "Image '%s' was not found (%s)" $path .Position -}}
|
|
{{- end -}}
|
|
|
|
{{- $file := readFile $path -}}
|
|
{{- $w := 0.0 -}}
|
|
{{- $h := 0.0 -}}
|
|
{{- $viewBox := findRE "viewBox( *?)=( *?)\"(.*?)\"" $file 1 -}}
|
|
{{- if eq (len $viewBox) 1 -}}
|
|
{{- $viewBox = index $viewBox 0 -}}
|
|
{{- $viewBox = index (findRE "[0123456789 \\.]+" $viewBox 1) 0 -}}
|
|
{{- $sizes := split $viewBox " " -}}
|
|
{{- $w = sub (float (index $sizes 2)) (float (index $sizes 0)) -}}
|
|
{{- $h = sub (float (index $sizes 3)) (float (index $sizes 1)) -}}
|
|
{{- else -}}
|
|
{{- $w = index (findRE "width( *?)=( *?)\"(.*?)\"" $file 1) 0 -}}
|
|
{{- $w = float (index (findRE "[0123456789\\.]+" $w 1) 0) -}}
|
|
{{- $h = index (findRE "height( *?)=( *?)\"(.*?)\"" $file 1) 0 -}}
|
|
{{- $h = float (index (findRE "[0123456789\\.]+" $h 1) 0) -}}
|
|
{{- end -}}
|
|
{{- $ratio = mul (div $h $w) 100 -}}
|
|
{{- else -}}
|
|
{{- if not $ratio -}}
|
|
{{- if not (fileExists $path) -}}
|
|
{{- errorf "Image '%s' was not found (%s)" $path .Position -}}
|
|
{{- end -}}
|
|
|
|
{{- $img := imageConfig $path -}}
|
|
{{- $w := float $img.Width -}}
|
|
{{- $h := float $img.Height -}}
|
|
{{- $ratio = mul (div $h $w) 100 -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- /* Ensure that $ratio does NOT end with % */ -}}
|
|
{{- $ratio = strings.TrimRight "%" $ratio -}}
|
|
|
|
<figure style="width: {{- $width -}}">
|
|
<div class="wrapper-with-intrinsic-ratio" style="padding-bottom: {{- $ratio -}}%">
|
|
<a data-skipendnotes="true" href="{{- $linkPrefix -}}{{- $link -}}" title="{{- $title -}}">
|
|
<img class="element-to-stretch" src="{{- $linkPrefix -}}{{- $link -}}" alt="{{- $alt -}}" />
|
|
</a>
|
|
</div>
|
|
<figcaption>{{- $caption -}}</figcaption>
|
|
</figure>
|