Skip to content

Commit

Permalink
Extracted picture partial
Browse files Browse the repository at this point in the history
  • Loading branch information
@stereobooster
stereobooster committed Sep 12, 2023
1 parent 86dd657 commit 7d562c7
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 145 deletions.
89 changes: 4 additions & 85 deletions layouts/_default/_markup/render-image.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,4 @@
{{ $url := urls.Parse .Destination }}
{{ $altText := .Text }}
{{ $caption := .Title }}
{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := $.Page.Site.Params.enableWebp | 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>
<picture>
{{ if (and (ne .MediaType.SubType "svg") $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,
{{- (.Resize "1024x webp").RelPermalink }} 1024w,
{{- (.Resize "1320x webp").RelPermalink }} 2x"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
class="mx-auto my-0 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
decoding="async"
{{ 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 }}
/>
</picture>
{{ 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 }}
<figure>
{{ partial "picture.html" (dict "context" . "src" .Destination "alt" .Text) }}
{{ with .Title }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
26 changes: 5 additions & 21 deletions layouts/_default/single.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{{ define "main" }}
{{- $images := .Resources.ByType "image" }}
{{- $cover := $images.GetMatch (.Params.cover | default "*cover*") }}
{{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $cover }}
{{- $feature := (.Params.feature | default "*feature*") | default $cover }}
{{- $featureImg := $images.GetMatch $feature }}
<article>
<header class="max-w-prose">
{{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
Expand All @@ -13,27 +14,10 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
<div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</div>
{{ with $feature }}
{{ if $featureImg }}
<div class="prose">
<img
class="mb-6 -mt-4 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"
{{ end }}
{{ end }}
alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
/>
{{ $alt := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
{{ partial "picture.html" (dict "context" . "src" $feature "alt" $alt "class" "mb-6 -mt-4 rounded-md") }}
{{ with $.Params.coverCaption }}
<figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
{{ end }}
Expand Down
80 changes: 80 additions & 0 deletions layouts/partials/picture.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
{{ $url := urls.Parse .src }}
{{ $altText := .alt }}
{{ $class := .class | default "mx-auto my-0 rounded-md" }}

{{ $lazyLoad := .context.Page.Site.Params.enableImageLazyLoading | default true }}
{{ $webp := .context.Page.Site.Params.enableWebp | default true }}

{{ if findRE "^https?" $url.Scheme }}
<img
class="{{ $class }}"
src="{{ $url.String }}"
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
{{ else }}
{{ $resource := "" }}
{{ if .context.Page.Resources.GetMatch ($url.String) }}
{{ $resource = .context.Page.Resources.GetMatch ($url.String) }}
{{ else if resources.GetMatch ($url.String) }}
{{ $resource = resources.Get ($url.String) }}
{{ end }}
{{ with $resource }}
<picture>
{{ if (and (ne .MediaType.SubType "svg") $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,
{{- (.Resize "1024x webp").RelPermalink }} 1024w,
{{- (.Resize "1320x webp").RelPermalink }} 2x"
src="{{ (.Resize "660x webp").RelPermalink }}"
{{ end }}
type="image/webp"
/>
{{ end }}
<img
class="mx-auto my-0 rounded-md"
{{ if eq .MediaType.SubType "svg" }}
src="{{ .RelPermalink }}"
{{ else }}
width="{{ .Width }}"
height="{{ .Height }}"
decoding="async"
{{ 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 }}
/>
</picture>
{{ else }}
<img
class="mx-auto my-0 rounded-md"
src="{{ $url.String }}"
alt="{{ $altText }}"
{{ if $lazyLoad }}
loading="lazy"
{{ end }}
/>
{{ end }}
{{ end }}


42 changes: 3 additions & 39 deletions layouts/shortcodes/figure.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,14 @@
{{ if .Get "default" }}
{{ template "_internal/shortcodes/figure.html" . }}
{{ else }}
{{ $url := urls.Parse (.Get "src") }}
{{ $altText := .Get "alt" }}
{{ $src := .Get "src" }}
{{ $alt := .Get "alt" }}
{{ $caption := .Get "caption" }}
{{ $href := .Get "href" }}
{{ $class := .Get "class" }}
<figure{{ with $class }} class="{{ . }}"{{ end }}>
{{ with $href }}<a href="{{ . }}">{{ end }}
<img
class="mx-auto my-0 rounded-md"
alt="{{ $altText }}"
{{ if .Site.Params.enableImageLazyLoading | default true }}
loading="lazy"
{{ end }}
{{ if findRE "^https?" $url.Scheme }}
src="{{ $url.String }}"
{{ 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 }}
{{ 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 }}
{{ else }}
src="{{ $url.String }}"
{{ end }}
{{ end }}
/>
{{ partial "picture.html" (dict "context" . "src" $src "alt" $alt) }}
{{ with $href }}</a>{{ end }}
{{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
</figure>
Expand Down

0 comments on commit 7d562c7

Please sign in to comment.