mirror of https://github.com/jpanther/congo.git
104 lines
3.6 KiB
HTML
104 lines
3.6 KiB
HTML
{{ $img := .img }}
|
|
{{ $alt := .alt }}
|
|
{{ $class := .class }}
|
|
{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
|
|
{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
|
|
{{ $lqip := .lqip | default false }}
|
|
{{ $x2 := .x2 | default false }}
|
|
|
|
{{ with $img }}
|
|
{{ if (eq .MediaType.SubType "svg") }}
|
|
{{ $width := ""}}
|
|
{{ $height := ""}}
|
|
{{ $svgContent := .Content }}
|
|
{{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
|
|
{{ $width = index . 1 }}
|
|
{{ end }}
|
|
{{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
|
|
{{ $height = index . 1 }}
|
|
{{ end }}
|
|
{{ if (eq "" $width $height) }}
|
|
{{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
|
|
{{ $width = index . 3 }}
|
|
{{ $height = index . 4 }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ if (eq "" $width $height) }}
|
|
{{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
|
|
{{/* do not use lazy without dimensions */}}
|
|
{{ $lazy = false }}
|
|
{{ end }}
|
|
<picture {{ with $class }} class="{{ . }}" {{ end }}>
|
|
<img
|
|
src="{{ .RelPermalink }}"
|
|
{{ with $width }} width="{{ . }}" {{ end }}
|
|
{{ with $height }} height="{{ . }}" {{ end }}
|
|
{{ with $class }} class="{{ . }}" {{ end }}
|
|
{{ with $alt }} alt="{{ . }}" {{ end }}
|
|
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
|
|
>
|
|
</picture>
|
|
{{ else }}
|
|
<picture
|
|
{{ with $class }} class="{{ . }}" {{ end }}
|
|
{{ if $lqip }}
|
|
{{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
|
|
style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
|
|
{{ end }}
|
|
>
|
|
{{ $width := .Width }}
|
|
{{ $height := .Height }}
|
|
{{ if $x2 }}
|
|
{{ $width = div .Width 2 }}
|
|
{{ $height = div .Height 2 }}
|
|
{{ end }}
|
|
{{ if $webp }}
|
|
<source
|
|
{{ if or (lt .Width 660) $x2 }}
|
|
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
|
|
src="{{ .RelPermalink }}"
|
|
{{ end }}
|
|
{{ else }}
|
|
srcset="
|
|
{{- (.Resize "330x webp").RelPermalink }} 330w,
|
|
{{- (.Resize "660x webp").RelPermalink }} 660w
|
|
{{ if gt .Width 1024 }}
|
|
,{{ (.Resize "1024x webp").RelPermalink }} 1024w
|
|
{{ end }}
|
|
{{ if gt .Width 1320 }}
|
|
,{{ (.Resize "1320x webp").RelPermalink }} 2x
|
|
{{ end }}
|
|
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
|
|
,{{ .RelPermalink }} {{ .Width }}w
|
|
{{ end }}"
|
|
src="{{ (.Resize "660x webp").RelPermalink }}"
|
|
{{ end }}
|
|
type="image/webp"
|
|
/>
|
|
{{ end }}
|
|
<img
|
|
src="{{ .RelPermalink }}"
|
|
width="{{ $width }}"
|
|
height="{{ $height }}"
|
|
{{ with $class }} class="{{ . }}" {{ end }}
|
|
{{ with $alt }} alt="{{ . }}" {{ end }}
|
|
{{ with $lazy }} loading="lazy" decoding="async" {{ end }}
|
|
{{ if or (lt .Width 660) $x2 }}
|
|
src="{{ .RelPermalink }}"
|
|
{{ else }}
|
|
srcset="
|
|
{{- (.Resize "330x").RelPermalink }} 330w,
|
|
{{- (.Resize "660x").RelPermalink }} 660w
|
|
{{ if gt .Width 1024 }}
|
|
,{{ (.Resize "1024x").RelPermalink }} 1024w
|
|
{{ end }}
|
|
{{ if gt .Width 1320 }}
|
|
,{{ (.Resize "1320x").RelPermalink }} 2x
|
|
{{ end }}
|
|
,{{ .RelPermalink }} {{ .Width }}w"
|
|
src="{{ (.Resize "660x").RelPermalink }}"
|
|
{{ end }}
|
|
>
|
|
</picture>
|
|
{{ end }}
|
|
{{ end }} |