-
-
Notifications
You must be signed in to change notification settings - Fork 335
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🔀 Merge pull request #693 from stereobooster/picture-new
feat: picture partial
- Loading branch information
Showing
7 changed files
with
167 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,28 @@ | ||
| {{ $url := urls.Parse .Destination }} | ||
| {{ $altText := .Text }} | ||
| {{ $caption := .Title }} | ||
| {{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }} | ||
| {{ if findRE "^https?" $url.Scheme }} | ||
| <figure> | ||
| <img | ||
| class="mx-auto my-0 rounded-md" | ||
| src="{{ $url.String }}" | ||
| alt="{{ $altText }}" | ||
| {{ if $lazyLoad }} | ||
| loading="lazy" | ||
| {{ end }} | ||
| /> | ||
| {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }} | ||
| </figure> | ||
| {{ else }} | ||
| {{ $resource := "" }} | ||
| {{ if $.Page.Resources.GetMatch ($url.String) }} | ||
| {{ $resource = $.Page.Resources.GetMatch ($url.String) }} | ||
| {{ else if resources.GetMatch ($url.String) }} | ||
| {{ $resource = resources.Get ($url.String) }} | ||
| {{ end }} | ||
| {{ with $resource }} | ||
| <figure> | ||
| <img | ||
| class="mx-auto my-0 rounded-md" | ||
| {{ if eq .MediaType.SubType "svg" }} | ||
| src="{{ .RelPermalink }}" | ||
| {{ else }} | ||
| width="{{ .Width }}" | ||
| height="{{ .Height }}" | ||
| {{ if lt .Width 660 }} | ||
| src="{{ .RelPermalink }}" | ||
| {{ else }} | ||
| srcset=" | ||
| {{- (.Resize "330x").RelPermalink }} 330w, | ||
| {{- (.Resize "660x").RelPermalink }} 660w, | ||
| {{- (.Resize "1024x").RelPermalink }} 1024w, | ||
| {{- (.Resize "1320x").RelPermalink }} 2x" | ||
| src="{{ (.Resize "660x").RelPermalink }}" | ||
| {{ end }} | ||
| {{ end }} | ||
| alt="{{ $altText }}" | ||
| {{ if $lazyLoad }} | ||
| loading="lazy" | ||
| {{ end }} | ||
| /> | ||
| {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }} | ||
| </figure> | ||
| {{ else }} | ||
| <figure> | ||
| <img | ||
| class="mx-auto my-0 rounded-md" | ||
| src="{{ $url.String }}" | ||
| alt="{{ $altText }}" | ||
| {{ if $lazyLoad }} | ||
| loading="lazy" | ||
| {{ end }} | ||
| /> | ||
| {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }} | ||
| </figure> | ||
| {{ end }} | ||
| {{ end }} | ||
| {{ $class := "mx-auto my-0 rounded-md" }} | ||
|
|
||
| {{ $file := $url.Path }} | ||
| {{ $img := .Page.Resources.GetMatch $file }} | ||
| {{- if and (not $img) .Page.File }} | ||
| {{ $path := path.Join .Page.File.Dir $file }} | ||
| {{ $img = resources.Get $path }} | ||
| {{ end -}} | ||
|
|
||
| {{/* https://github.com/gohugoio/hugo/pull/10666 */}} | ||
| {{- $params := $url.Query -}} | ||
| {{- $x2Param := $params.Get "2x" -}} | ||
| {{- $x2 := false -}} | ||
| {{- if eq $x2Param "true" -}} | ||
| {{- $x2 = true -}} | ||
| {{- end -}} | ||
|
|
||
| <figure> | ||
| {{- with $img -}} | ||
| {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }} | ||
| {{- else -}} | ||
| <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/> | ||
| {{- end -}} | ||
| {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }} | ||
| </figure> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| {{ $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 lt .Width 660 }} | ||
| {{ 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 | ||
| {{ else }} | ||
| {{ with .Resize (printf "%dx%d webp" .Width .Height) }} | ||
| ,{{ .RelPermalink }} {{ .Width }}w | ||
| {{ end }} | ||
| {{ end }} | ||
| {{ if gt .Width 1320 }} | ||
| ,{{ (.Resize "1320x webp").RelPermalink }} 2x | ||
| {{ else }} | ||
| {{ with .Resize (printf "%dx%d webp" .Width .Height) }} | ||
| ,{{ .RelPermalink }} {{ .Width }}w | ||
| {{ end }} | ||
| {{ 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 lt .Width 660 }} | ||
| src="{{ .RelPermalink }}" | ||
| {{ else }} | ||
| srcset=" | ||
| {{- (.Resize "330x").RelPermalink }} 330w, | ||
| {{- (.Resize "660x").RelPermalink }} 660w | ||
| {{ if gt .Width 1024 }} | ||
| ,{{ (.Resize "1024x").RelPermalink }} 1024w | ||
| {{ else }} | ||
| ,{{ .RelPermalink }} {{ .Width }}w | ||
| {{ end }} | ||
| {{ if gt .Width 1320 }} | ||
| ,{{ (.Resize "1320x").RelPermalink }} 2x | ||
| {{ else }} | ||
| ,{{ .RelPermalink }} {{ .Width }}w | ||
| {{ end }}" | ||
| src="{{ (.Resize "660x").RelPermalink }}" | ||
| {{ end }} | ||
| > | ||
| </picture> | ||
| {{ end }} | ||
| {{ end }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters