{{- /*************************************************************************** Possible call scenarios: With unnamed parameters (static images preferred): - {{< figure "path/to/image" / >}} - {{< figure "path/to/image" "alt-title" / >}} With named parameters: - {{< figure src="path/to/image" title="" alt="" / >}} - {{< figure src="path/to/image" title="" alt="" >}}caption{{< /figure >}} - {{< figure name="resource name" title="" alt="" >}}caption{< /figure >}} For now we think about device pixel ratios up to 4. Available Parameters: - name - resource name to show (resources are defined in frontmatter or it's the filename of the image in a page bundle - src - image to show (optional). must be relative to the static folder - link - link the image to something - class - additional classes for the image - alt - alt attribute for the image (optional, suggested) - title - title attribute for the image (optional) - command - command for image processing (optional, required with options) - options - options for image processing (optional, required with command) - width - width of the image (optional) - height - height of the image (optional) Tagvariants: - {{< figure >}}Something{{< /figure }} - {{< figure />}} ***************************************************************************/ -}} {{- /* PREPARATION */ -}} {{ $params := $.Params }} {{ $position := .Position }} {{ $paramSrc := false }} {{ $paramTitle := false }} {{ if ne .IsNamedParams }} {{ $paramSrc = .Get 0 }} {{ $paramTitle = .Get 1 }} {{ else }} {{ $paramSrc = .Get "src" }} {{ $paramTitle = .Get "title" }} {{ end }} {{ $imagesizes := slice 936 854 734 696 516 }}{{- /* sorted ↑↓ max width size */ -}} {{ $classes := "lazyload w-100" }} {{ $cloneTitle := false }}{{- /* set to true to clone missing alt from title/caption */ -}} {{- /* PARAMETER SETUP */ -}} {{ $paramName := .Get "name" | default false }} {{ $paramLink := .Get "link" | default false }}{{- /* links the image to something */ -}} {{ $paramClass := (printf "%s %s" $classes (.Get "class" | default "")) }} {{ $paramAlt := .Get "alt" | default $paramTitle }}{{- /* */ -}} {{ $paramCommand := .Get "command" }}{{- /* */ -}} {{ $paramOptions := .Get "options" }}{{- /* */ -}} {{ $paramWidth := .Get "width" }}{{- /* */ -}} {{ $paramHeight := .Get "height" }}{{- /* */ -}} {{ $paramCaption := trim .Inner " \n" | markdownify }}{{- /* used for caption */ -}} {{- /* image processing opons */ -}} {{ $paramBackgroundColor := .Get "background-color" | default false }} {{ $paramQuality := .Get "quality" | default false }} {{ $paramRotate := .Get "rotate" | default false }} {{ $paramAnchor := .Get "anchor" | default "smart" }} {{ $paramResample := .Get "resample" | default "Box" }} {{ $paramTargetFormat := .Get "target" | default "jpg" }} {{ if (or $paramSrc $paramName) }} {{- /* determine the type of the image */ -}} {{- $isPageBundle := false -}}{{- /* bool for static image file */ -}} {{- $isStaticFile := false -}}{{- /* bool for resource image file */ -}} {{- $resources := .Page.Resources -}} {{- $info := false -}} {{- $image := false -}} {{- with $paramSrc -}} {{- $image := "" -}} {{- if (fileExists (printf "static/%s" .)) -}} {{/* image exists in static directory and can't be processed */}} {{ $info = imageConfig (printf "static/%s" .) }} {{- $isStaticFile = true -}} {{- else -}} {{- /* Trying to "fall-back" to resources */ -}} {{- $image = $resources.GetMatch (printf "%s" .) -}} {{- if ne $image -}} {{- warnf "The image set in src was not found: %s : %s" . $position -}} {{- else -}} {{- $isPageBundle = true -}} {{- warnf "You added a src attribute, but it seems this is a page resource: %s : %s" . $position -}} {{- end -}} {{- end -}} {{- end -}} {{- if ne $image -}} {{- with $paramName -}} {{- $image = $resources.GetMatch (printf "%s" .) -}} {{- if $image -}} {{- $isPageBundle = true -}} {{- else -}} {{- $image = $resources.GetMatch (printf "*%s*" .) -}} {{- if ne $image -}} {{- warnf "No match found for named image: %s at: %s" . $position -}} {{ end }} {{- end -}} {{- end -}} {{- end -}} {{ $finalImage := dict }} {{ $lowQualityPreviewImage := $image.Resize "100x" | images.Filter (images.Pixelate 8) (images.GaussianBlur 10) }} {{ $finalImage = merge $finalImage (dict "lqp" $lowQualityPreviewImage) }} {{ if $isPageBundle }} {{/******************************************************************/}} {{ $imgFallback := false }} {{ $imgSrcSet := slice }} {{ range $idx, $size := $imagesizes }} {{ $resizedImage := (printf "%dx" $size | $image.Resize)}} {{ $srcUrl := $resizedImage.RelPermalink }} {{ if ne $idx }} {{ $finalImage = merge $finalImage (dict "width" $resizedImage.Width) }} {{ $finalImage = merge $finalImage (dict "height" $resizedImage.Height) }} {{ end }} {{ if ne $imgFallback }} {{ $imgFallback = $srcUrl }} {{ end }} {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $srcUrl $size) }} {{ end }} {{ $finalImage = merge $finalImage (dict "src" $imgFallback) }} {{ $finalImage = merge $finalImage (dict "srcset" (delimit $imgSrcSet ", ")) }} {{/******************************************************************/}} {{ else if $isStaticFile }} {{/******************************************************************/}} {{ $finalImage = merge $finalImage (dict "src" (printf "/%s" $paramSrc)) }} {{ $finalImage = merge $finalImage (dict "height" $info.Height) }} {{ $finalImage = merge $finalImage (dict "width" $info.Width) }} {{/******************************************************************/}} {{ end }} {{ if (and (ne $paramTitle) $cloneTitle) }} {{ $finalImage = merge $finalImage (dict "title" $paramAlt) }} {{ else if $paramTitle }} {{ $finalImage = merge $finalImage (dict "title" $paramTitle) }} {{ end }} {{ $finalImage = merge $finalImage (dict "caption" $paramCaption) }} {{ $finalImage = merge $finalImage (dict "alt" $paramAlt) }} {{ $finalImage = merge $finalImage (dict "class" $paramClass) }} {{ $finalImage = merge $finalImage (dict "link" $paramLink) }} {{ with $finalImage }} {{- /* and finally we print */ -}}
{{ with .link -}}{{- end }} {{ with .alt }}{{ . }}{{ end }} {{ with .link -}}{{- end }} {{ with .caption -}}
{{ . }}
{{- end }}
{{ end }} {{ else }} {{- warnf "Either name or src are required attributes at: %s" $position -}} {{ end }} {{- /*************************************************************************** ******* ¯\_(ツ)_/¯ DEV NOTES in the final loop where the image is printed the $finalImage variable is a map with the following structure (using JSON for clarity): { "name": "", "src": "", "height": 100, "width": 100, "title": "", "alt": "", "class": "", "link": "link to put the image in, param `link` required on the shortcode", "caption": "markdownified content of .Inner", "srcset": "", } ༼ つ ◕_◕ ༽つ***************************************************************/ -}}