mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
Merge pull request #2532 from ZhenShuo2021/fix/render-image
🐛 Fix(render-image): correct srcset and HTML structure
This commit is contained in:
Nuno C.
GitHub
@@ -1,56 +1,109 @@
|
||||
{{ define "RenderImageSimple" -}}
|
||||
<img class="my-0 rounded-md" loading="lazy" alt="{{ .alt }}" src="{{ .src }}">
|
||||
{{- end }}
|
||||
|
||||
{{ define "RenderImageResponsive" -}}
|
||||
{{- define "RenderImageSimple" -}}
|
||||
{{- $imgObj := .imgObj -}}
|
||||
{{- $src := .src -}}
|
||||
{{- $alt := .alt -}}
|
||||
<img
|
||||
class="my-0 rounded-md"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="low"
|
||||
alt="{{ .alt }}"
|
||||
srcset="
|
||||
{{ (.resource.Resize "330x").RelPermalink }} 330w,
|
||||
{{ (.resource.Resize "660x").RelPermalink }} 660w,
|
||||
{{ (.resource.Resize "1280x").RelPermalink }} 1280w
|
||||
"
|
||||
data-zoom-src="{{ .resource.RelPermalink }}"
|
||||
src="{{ .resource.RelPermalink }}">
|
||||
{{- end }}
|
||||
alt="{{ $alt }}"
|
||||
src="{{ $src }}"
|
||||
{{ with $imgObj -}}
|
||||
{{ with $imgObj.Width }}width="{{ . }}"{{ end }}
|
||||
{{ with $imgObj.Height }}height="{{ . }}"{{ end }}
|
||||
{{- end }}>
|
||||
{{- end -}}
|
||||
|
||||
{{ define "RenderImageCaption" -}}
|
||||
{{- with .caption }}
|
||||
{{- define "RenderImageResponsive" -}}
|
||||
{{/* Responsive Image
|
||||
The current setting sizes="(min-width: 768px) 50vw, 65vw" makes the iPhone 16 and 16 Pro
|
||||
select a smaller image, while the iPhone 16 Pro Max selects a larger image.
|
||||
|
||||
Steps:
|
||||
1. Check the media queries in the `sizes` property.
|
||||
2. Find the first matching value. For example, on a mobile device with a CSS pixel width
|
||||
of 390px and DPR = 3 (iPhone 13), given setting sizes="(min-width: 768px) 50vw, 100vw",
|
||||
it matches the `100vw` option.
|
||||
3. Calculate the optimal image size: 390 × 3 × 100% (100vw) = 1170.
|
||||
4. Find the corresponding match in the `srcset`.
|
||||
|
||||
To make the browser select a smaller image on mobile devices
|
||||
override the template and change the `sizes` property to "(min-width: 768px) 50vw, 30vw"
|
||||
|
||||
The sizes="auto" is valid only when loading="lazy".
|
||||
*/}}
|
||||
{{- $imgObj := .imgObj -}}
|
||||
{{- $alt := .alt -}}
|
||||
{{- $originalWidth := $imgObj.Width -}}
|
||||
|
||||
{{- $img800 := $imgObj -}}
|
||||
{{- $img1280 := $imgObj -}}
|
||||
{{- if gt $originalWidth 800 -}}
|
||||
{{- $img800 = $imgObj.Resize "800x" -}}
|
||||
{{- end -}}
|
||||
{{- if gt $originalWidth 1280 -}}
|
||||
{{- $img1280 = $imgObj.Resize "1280x" -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $srcset := printf "%s 800w, %s 1280w" $img800.RelPermalink $img1280.RelPermalink -}}
|
||||
|
||||
|
||||
<img
|
||||
class="my-0 rounded-md"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="auto"
|
||||
alt="{{ $alt }}"
|
||||
{{ with $imgObj.Width }}width="{{ . }}"{{ end }}
|
||||
{{ with $imgObj.Height }}height="{{ . }}"{{ end }}
|
||||
src="{{ $img800.RelPermalink }}"
|
||||
srcset="{{ $srcset }}"
|
||||
sizes="(min-width: 768px) 50vw, 65vw"
|
||||
data-zoom-src="{{ $imgObj.RelPermalink }}">
|
||||
{{- end -}}
|
||||
|
||||
{{- define "RenderImageCaption" -}}
|
||||
{{- with .caption -}}
|
||||
<figcaption>{{ . | markdownify }}</figcaption>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $disableImageOptimizationMD := .Page.Site.Params.disableImageOptimizationMD | default false }}
|
||||
{{- $disableImageOptimizationMD := .Page.Site.Params.disableImageOptimizationMD | default false -}}
|
||||
{{- $urlStr := .Destination | safeURL -}}
|
||||
{{- $url := urls.Parse $urlStr -}}
|
||||
{{- $altText := .Text }}
|
||||
{{- $caption := .Title }}
|
||||
{{- $isRemote := findRE "^(https?|data)" $url.Scheme }}
|
||||
{{- $resource := "" }}
|
||||
{{- $altText := .Text -}}
|
||||
{{- $caption := .Title -}}
|
||||
{{- $isRemote := findRE "^(https?|data)" $url.Scheme -}}
|
||||
{{- $resource := "" -}}
|
||||
|
||||
{{- if not $isRemote }}
|
||||
{{- $resource = or ($.Page.Resources.GetMatch $urlStr) (resources.Get $urlStr) }}
|
||||
{{- end }}
|
||||
{{- if not $isRemote -}}
|
||||
{{- $resource = or ($.Page.Resources.GetMatch $urlStr) (resources.Get $urlStr) -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<figure>
|
||||
{{- if $isRemote }}
|
||||
{{ template "RenderImageSimple" (dict "src" $urlStr "alt" $altText) }}
|
||||
{{- else if $resource }}
|
||||
{{- $isSVG := eq $resource.MediaType.SubType "svg" }}
|
||||
{{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) }}
|
||||
{{- if $shouldOptimize }}
|
||||
{{ template "RenderImageResponsive" (dict "resource" $resource "alt" $altText) }}
|
||||
{{- else }}
|
||||
{{ template "RenderImageSimple" (dict "src" $resource.RelPermalink "alt" $altText) }}
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
{{ template "RenderImageSimple" (dict "src" $urlStr "alt" $altText) }}
|
||||
{{- end }}
|
||||
{{- if $isRemote -}}
|
||||
{{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}}
|
||||
{{- else if $resource -}}
|
||||
{{- $isSVG := eq $resource.MediaType.SubType "svg" -}}
|
||||
{{- $shouldOptimize := and (not $disableImageOptimizationMD) (not $isSVG) -}}
|
||||
{{- if $shouldOptimize -}}
|
||||
{{- template "RenderImageResponsive" (dict "imgObj" $resource "alt" $altText) -}}
|
||||
{{- else -}}
|
||||
{{/* Not optimize image
|
||||
If it is an SVG file, pass the permalink
|
||||
Otherwise, pass the resource to allow width and height attributes
|
||||
*/}}
|
||||
{{- if $isSVG -}}
|
||||
{{- template "RenderImageSimple" (dict "imgObj" "" "src" $resource.RelPermalink "alt" $altText) -}}
|
||||
{{- else -}}
|
||||
{{- template "RenderImageSimple" (dict "imgObj" $resource "src" $resource.RelPermalink "alt" $altText) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- template "RenderImageSimple" (dict "imgObj" "" "src" $urlStr "alt" $altText) -}}
|
||||
{{- end -}}
|
||||
|
||||
{{ template "RenderImageCaption" (dict "caption" $caption) }}
|
||||
{{- template "RenderImageCaption" (dict "caption" $caption) -}}
|
||||
</figure>
|
||||
|
||||
@@ -31,14 +31,18 @@
|
||||
{{- else }}
|
||||
<img
|
||||
class="my-0 rounded-md{{ with $nozoom }} nozoom{{ end }}{{ with $class }} {{ . }}{{ end }}"
|
||||
srcset="
|
||||
{{ (.Resize "330x").RelPermalink }} 330w,
|
||||
{{ (.Resize "660x").RelPermalink }} 660w,
|
||||
{{ (.Resize "1024x").RelPermalink }} 1024w,
|
||||
{{ (.Resize "1320x").RelPermalink }} 2x"
|
||||
src="{{ (.Resize "660x").RelPermalink }}"
|
||||
data-zoom-src="{{ (.Resize "1320x").RelPermalink }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
fetchpriority="auto"
|
||||
alt="{{ $altText }}"
|
||||
{{ with .Width }}width="{{ . }}"{{ end }}
|
||||
{{ with .Height }}height="{{ . }}"{{ end }}
|
||||
src="{{ (.Resize "800x").RelPermalink }}"
|
||||
srcset="
|
||||
{{- (.Resize "800x").RelPermalink }} 800w,
|
||||
{{- (.Resize "1280x").RelPermalink }} 1280w"
|
||||
sizes="(min-width: 768px) 50vw, 65vw"
|
||||
data-zoom-src="{{ .RelPermalink }}"
|
||||
/>
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
|
||||
Reference in New Issue
Block a user