115 lines
5.7 KiB
HTML
115 lines
5.7 KiB
HTML
{{- /*
|
|
deprecated: image-legacy.html
|
|
TODO delete this file in the next minor release
|
|
*/ -}}
|
|
{{- $params := partial "function/params.html" -}}
|
|
{{- $class := .Class | default "" -}}
|
|
{{- $style := "" -}}
|
|
{{- $loading := .Loading | default "lazy" -}}
|
|
{{- $onload := "" -}}
|
|
{{- $onerror := "" -}}
|
|
{{- $cacheRemoteImages := $params.cacheRemoteImages -}}
|
|
{{- $suffixList := slice ".jpeg" ".jpg" ".png" ".gif" ".bmp" ".tif" ".tiff" ".webp" -}}
|
|
{{- $responsive := .Responsive -}}
|
|
|
|
{{- if hasPrefix .Src "data:image" -}}
|
|
{{- $responsive = false -}}
|
|
{{- end -}}
|
|
|
|
{{- /* handle for default size image */ -}}
|
|
{{- $src := .Src -}}
|
|
{{- $suffixValid := dict "Path" $src "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
|
|
{{- with dict "Path" $src "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
|
|
{{- $url := urls.Parse $src -}}
|
|
{{- if not $url.Host | or $cacheRemoteImages.replace -}}
|
|
{{- $src = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- /* only available for image resources that are raster images */ -}}
|
|
{{- if (eq .ResourceType "image") | and $suffixValid | and $responsive -}}
|
|
{{- $style = printf "--width: %vpx;--aspect-ratio: %v / %v;" .Width .Width .Height | safeHTMLAttr -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- $srcSmall := .SrcSmall | default $src -}}
|
|
{{- $srcMedium := $src -}}
|
|
{{- $srcLarge := .SrcLarge | default $src -}}
|
|
|
|
{{- if $responsive }}
|
|
{{- /* handle for small size image */ -}}
|
|
{{- $suffixValidSmall := dict "Path" $srcSmall "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
|
|
{{- with dict "Path" .SrcSmall "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
|
|
{{- $url := urls.Parse $.SrcSmall -}}
|
|
{{- if not $url.Host | or $cacheRemoteImages.replace -}}
|
|
{{- $srcSmall = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- if (eq .ResourceType "image") | and $suffixValidSmall -}}
|
|
{{- $style = printf "%v--width-small: %vpx;--aspect-ratio-small: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- /* handle for large size image */ -}}
|
|
{{- $suffixValidLarge := dict "Path" $srcLarge "Suffixes" $suffixList | partial "function/suffix-validation.html" -}}
|
|
{{- with dict "Path" .SrcLarge "Resources" .Resources "CacheRemoteImages" $cacheRemoteImages.enable | partial "function/resource.html" -}}
|
|
{{- $url := urls.Parse $.SrcLarge -}}
|
|
{{- if not $url.Host | or $cacheRemoteImages.replace -}}
|
|
{{- $srcLarge = .RelPermalink -}}
|
|
{{- end -}}
|
|
{{- if (eq .ResourceType "image") | and $suffixValidLarge -}}
|
|
{{- $style = printf "%v--width-large: %vpx;--aspect-ratio-large: %v / %v;" $style .Width .Width .Height | safeHTMLAttr -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- /* handle for invalid suffix */ -}}
|
|
{{- if not $suffixValid | and $src -}}
|
|
{{- $class = printf "%v suffix-invalid" $class -}}
|
|
{{- end -}}
|
|
{{- if not $suffixValidSmall | and $srcSmall -}}
|
|
{{- $class = printf "%v suffix-invalid__small" $class -}}
|
|
{{- end -}}
|
|
{{- if not $suffixValidLarge | and $srcLarge -}}
|
|
{{- $class = printf "%v suffix-invalid__large" $class -}}
|
|
{{- end -}}
|
|
|
|
{{- /* set image srcset */ -}}
|
|
{{- if (eq $src $srcSmall) | and (eq $src $srcLarge) -}}
|
|
{{- $srcSmall = printf (cond (strings.Contains $srcSmall "?") "%v&size=small" "%v?size=small") $srcSmall -}}
|
|
{{- $srcMedium = printf (cond (strings.Contains $srcMedium "?") "%v&size=medium" "%v?size=medium") $srcMedium -}}
|
|
{{- $srcLarge = printf (cond (strings.Contains $srcLarge "?") "%v&size=large" "%v?size=large") $srcLarge -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- /* set image alt and caption */ -}}
|
|
{{- $alt := .Alt | default $src -}}
|
|
{{- $caption := .Caption | default $alt -}}
|
|
|
|
{{- /* set image lazy loading */ -}}
|
|
{{- /* for details, see https://lruihao.cn/posts/native-img-loading-lazy/ */ -}}
|
|
{{- if eq $loading "lazy" -}}
|
|
{{- /* TODO move to theme.js */ -}}
|
|
{{- $commonScript := "this.title=this.dataset.title;for(const i of ['style', 'data-title','onerror','onload']){this.removeAttribute(i);}" -}}
|
|
{{- $onload = printf " onload=\"%vthis.dataset.lazyloaded='';\"" $commonScript | safeHTMLAttr -}}
|
|
{{- $onerror = printf " onerror=\"%v\"" $commonScript | safeHTMLAttr -}}
|
|
{{- $style = printf " style=\"%vbackground: url(%v) no-repeat center;\"" $style (resources.Get "images/loading.svg" | minify).RelPermalink | safeHTMLAttr -}}
|
|
{{- end -}}
|
|
|
|
{{- /* structure of lightgallery or img */ -}}
|
|
{{- if .Linked -}}
|
|
<a class="lightgallery" href="{{ $srcLarge | safeURL }}" data-thumbnail="{{ $srcSmall | safeURL }}"{{ with $caption }} data-sub-html="<h2>{{ . }}</h2>{{ with $.Title }}<p>{{ . }}</p>{{ end }}"{{ end }}{{ with .Rel }} rel="{{ . }}"{{ end }}>
|
|
{{- end -}}
|
|
<img loading="{{ $loading }}" src="{{ $src | safeURL }}" alt="{{ $alt }}"
|
|
{{- if $responsive }} srcset="{{ $srcSmall | safeURL }}, {{ $srcMedium | safeURL }} 1.5x, {{ $srcLarge | safeURL }} 2x"{{- end -}}
|
|
{{- if eq $loading "lazy" }} data-title="{{ .Title | default $alt }}"
|
|
{{- else }} title="{{ .Title | default $alt }}"{{- end -}}
|
|
{{- with .Width }} width="{{ . }}"{{- end -}}
|
|
{{- with .Height }} height="{{ . }}"{{- end -}}
|
|
{{- with $class }} class="{{ trim . " " }}"{{- end -}}
|
|
{{- with .Decoding }} decoding="{{ . }}"{{- end -}}
|
|
{{- with .Referrerpolicy }} referrerpolicy="{{ . }}"{{- end -}}
|
|
{{- with $style -}}{{ . }}{{- end -}}
|
|
{{- with $onload -}}{{ . }}{{- end -}}
|
|
{{- with $onerror -}}{{ . }}{{- end -}}
|
|
/>
|
|
{{- if .Linked -}}
|
|
</a>
|
|
{{- end -}}
|
|
|