diff --git a/data/structures/card.yml b/data/structures/card.yml index 10f711a3..f9ca5dac 100644 --- a/data/structures/card.yml +++ b/data/structures/card.yml @@ -211,6 +211,14 @@ arguments: optional: true comment: Render hook for the image partial. group: partial + sizes: + type: string + default: 100vw + optional: true + comment: >- + One or more strings separated by commas, indicating the source sizes of an + image set. + group: partial body: optional: true comment: >- diff --git a/data/structures/image.yml b/data/structures/image.yml index ffa1670f..56aedc6f 100644 --- a/data/structures/image.yml +++ b/data/structures/image.yml @@ -98,6 +98,14 @@ arguments: - low - auto group: partial + sizes: + type: string + default: 100vw + optional: true + comment: >- + One or more strings separated by commas, indicating the source sizes of an + image set. + group: partial title: type: string optional: true diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 1ecfdcbd..5b3e0eff 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -181,10 +181,6 @@ "fa-2xs", "fa-4x", "fa-activity", - "fa-angle-left", - "fa-angle-right", - "fa-angles-left", - "fa-angles-right", "fa-arrow-left", "fa-arrow-right", "fa-bootstrap", @@ -331,10 +327,6 @@ "p-2", "p-3", "p-4", - "page-item", - "page-link", - "pagination", - "pagination-terse", "pb-2", "pb-3", "pb-4", @@ -351,7 +343,6 @@ "ps-1", "ps-3", "pt-1", - "pt-3", "pt-5", "pt-md-3", "ptw-3", diff --git a/layouts/partials/assets/card-group.html b/layouts/partials/assets/card-group.html index 982e7a4f..4c57029e 100644 --- a/layouts/partials/assets/card-group.html +++ b/layouts/partials/assets/card-group.html @@ -78,12 +78,38 @@ {{- $responsive := .responsive | default true -}} {{- $cols := string .cols | default "3" -}} +{{- $sizes := "100vw" }} {{- $colGrid := "" -}} -{{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}} -{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}} -{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}} -{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}} -{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}} +{{- if eq $cols "1" }} + {{ $colGrid = "row-cols-1" -}} +{{- else if eq $cols "2" }} + {{ if $responsive }} + {{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }} + {{ else }} + {{ $colGrid = "row-cols-2" }} + {{ end -}} + {{ $sizes = printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize }} +{{- else if eq $cols "3" }} + {{ if $responsive }} + {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }} + {{ else }} + {{ $colGrid = "row-cols-3" }} + {{ end -}} + {{ $sizes = printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }} +{{- else if eq $cols "4" }} + {{ if $responsive }} + {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }} + {{ else }} + {{ $colGrid = "row-cols-4" }} + {{ end -}} + {{ $sizes = printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }} +{{- else if eq $cols "5" }} + {{ if $responsive }} + {{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }} + {{ else }} + {{ $colGrid = "row-cols-5" }} + {{ end -}} + {{ $sizes = printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }} {{ end -}} {{- if not $paginate -}} @@ -102,6 +128,7 @@ "footer" $footer "header" $header "loading" $loading + "sizes" $sizes "orientation" $orientation "padding" $padding "ratio" $ratio diff --git a/layouts/partials/assets/card.html b/layouts/partials/assets/card.html index 7bce69b6..695eaa8c 100644 --- a/layouts/partials/assets/card.html +++ b/layouts/partials/assets/card.html @@ -22,6 +22,7 @@ {{- $iconStyle := "" -}} {{- $align := .align | default "start" -}} {{- $style := .style | default "" -}} +{{- $sizes := .sizes | default "100vw" -}} {{- $loading := .loading -}} {{- $orientation := .orientation | default "stacked" -}} {{- $padding := (string .padding) | default "auto" -}} @@ -131,7 +132,7 @@
{{- if $thumbnail -}} - {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}} + {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}} {{- else if $icon -}}
{{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}} @@ -157,7 +158,7 @@
{{- if $thumbnail -}} - {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}} + {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}} {{- else if $icon -}}
{{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}} diff --git a/layouts/partials/assets/image.html b/layouts/partials/assets/image.html index 7dada908..f02e6573 100644 --- a/layouts/partials/assets/image.html +++ b/layouts/partials/assets/image.html @@ -35,6 +35,8 @@ {{- $lazy := eq $loading "lazy" -}} {{- $priority := .priority -}} {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}} +{{- $sizes := .sizes | default "100vw" -}} + {{- define "partials/image-portrait.html" -}} {{- $dimensions := slice }} @@ -168,6 +170,7 @@ {{- $modes := .modes -}} {{- $lazy := .lazy -}} {{- $page := .page -}} + {{- $sizes := .sizes -}} {{- $priority := .priority -}} {{- $isVector := false -}} @@ -235,7 +238,7 @@ src="{{ $fallbackURL }}" {{ if $lazy }}loading="lazy"{{ end }} {{ with $priority }}fetchpriority="{{ . }}"{{ end }} - {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }} + {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }} {{ with $height }}height="{{ . }}"{{ end }} {{ with $width }}width="{{ . }}"{{ end }} {{ with $title }}alt="{{ . }}"{{ end }}> @@ -263,6 +266,7 @@ "figclass" $figclass "lazy" $lazy "priority" $priority + "sizes" $sizes "page" $page) -}} diff --git a/layouts/partials/list/featured.html b/layouts/partials/list/featured.html index 4b62f3cc..cab76247 100644 --- a/layouts/partials/list/featured.html +++ b/layouts/partials/list/featured.html @@ -3,6 +3,7 @@ {{- $orientation := .orientation | default "stacked" -}} {{- $actions := .actions -}} {{- $width := .width | default 6 }} +{{ $sizes := "100vw" }} {{- if or (lt $width 1) (gt $width 12) -}} {{- $width = 6 -}} {{- warnf "partial [list/featured.html] - Invalid column width: %d" $width -}} @@ -19,6 +20,11 @@ {{- end -}} {{- $breadcrumb := and (not $page.IsHome) site.Params.navigation.breadcrumb -}} +{{- define "partials/list/featured-sizes.html" }} + {{ $sizes := printf "(min-width: 768px) %dvw, 50vw" (int (math.Round (div (mul .width 100) 12))) }} + {{ return $sizes }} +{{ end }} + {{- define "partials/list/featured-body.html" }} {{- $page := .page -}} {{- $headings := .headings -}} @@ -44,6 +50,7 @@ {{- define "partials/list/featured-illustration.html" }} {{- $page := .page -}} {{- $style := printf "img-wrap mx-auto mx-md-0 %s" .style -}} + {{ $sizes := .sizes }} {{ if $page.Params.icon }} {{- $icon := (or (and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.url) $page.Params.Icon) -}} @@ -56,7 +63,7 @@ {{ else }} {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}} {{- if $thumbnail }} - {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }} + {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "sizes" $sizes "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }} {{ end }} {{ end }} {{- end -}} @@ -70,7 +77,8 @@ {{ if eq $orientation "stacked" }}
- {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4") }} + {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $width) }} + {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4") }} {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions) }}
@@ -79,8 +87,11 @@
{{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
-
- {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }} + {{ $newWidth := $width }} + {{ if gt $width 6 }}{{ $newWidth = sub 12 $width }}{{ end }} + {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $newWidth) }} +
+ {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4 pb-md-0") }}
{{ end }} diff --git a/package-lock.json b/package-lock.json index 4ea6a499..f313b845 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.23.12", + "version": "0.23.13", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.23.12", + "version": "0.23.13", "license": "MIT", "devDependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", diff --git a/package.json b/package.json index e8d95ab2..3b2ef8c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gethinode/hinode", - "version": "0.23.12", + "version": "0.23.13", "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator", "keywords": [ "hugo",