Merge pull request #915 from gethinode/develop

Improve image set rendering
2025-10-07 18:14:28 +00:00 · 2024-05-06 09:25:09 +02:00 · 2024-05-06 08:14:15 +02:00 · 2024-05-05 09:59:41 +02:00 · 2024-05-05 07:54:06 +00:00 · 2024-05-04 06:47:24 +02:00
16 changed files with 152 additions and 59 deletions
--- a/assets/scss/components/_nav.scss
+++ b/assets/scss/components/_nav.scss
@@ -23,7 +23,7 @@
    text-align: start;
    vertical-align: text-top;
    border-radius: 0;
-    padding: 0 0 (4 * $spacer) 0;
+    padding: 0 0 (4 * $spacer);
    border-bottom: none;
 }

--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -140,7 +140,7 @@
    white-space: normal;
    text-align: center !important;
    vertical-align: middle;
-    padding: 0 $spacer 0 $spacer;
+    padding: 0 $spacer;
    width: 100% !important;
 }

--- a/assets/scss/helpers/_display.scss
+++ b/assets/scss/helpers/_display.scss
@@ -5,7 +5,7 @@
 // stylelint-disable annotation-no-unknown

 // scss-docs-start display-color
-.d-none-light {
+.d-none-light, .d-none-inline-light {
    display: none if($enable-important-utilities, !important, null); 
 }

@@ -13,13 +13,21 @@
    display: block if($enable-important-utilities, !important, null);
 }

+.d-none-inline-dark {
+    display: inline if($enable-important-utilities, !important, null);
+}
+
@if $enable-dark-mode {
    @include color-mode(dark) {
        .d-none-light {
            display: block if($enable-important-utilities, !important, null);
        }

-        .d-none-dark {
+        .d-none-inline-light {
+            display: inline if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark, .d-none-inline-dark {
            display: none if($enable-important-utilities, !important, null);
        }
    }
--- a/data/structures/card-group.yml
+++ b/data/structures/card-group.yml
@@ -66,6 +66,15 @@ arguments:
      Flag indicating if pagination should be added to the card group, if the
      list exceeds the maximum number of cards to display. 
    group: partial
+  pagination:
+    type: int
+    optional: true
+    comment: >-
+      Number of elements per page in pagination, overrides site settings.
+    group: partial
+    options:
+      min: 1
+    release: v0.23.12
  href:
    type: string
    optional: true
--- 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: >-
--- 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
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -219,6 +219,7 @@
      "flex-column",
      "flex-fill",
      "flex-grow-1",
+      "flex-md-grow-0",
      "font-monospace",
      "footer",
      "form-control",
@@ -301,11 +302,13 @@
      "navbar",
      "navbar-brand",
      "navbar-collapse",
+      "navbar-container",
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
      "navbar-nav",
      "navbar-nav-scroll",
+      "navbar-title",
      "navbar-toggler",
      "next",
      "no-js",
--- a/go.mod
+++ b/go.mod
@@ -4,13 +4,13 @@ go 1.19

 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
-	github.com/gethinode/mod-bootstrap v1.2.5 // indirect
+	github.com/gethinode/mod-bootstrap v1.2.6 // indirect
 	github.com/gethinode/mod-flexsearch v1.11.3 // indirect
-	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
-	github.com/gethinode/mod-katex v1.0.7 // indirect
-	github.com/gethinode/mod-leaflet v1.0.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.8.2 // indirect
+	github.com/gethinode/mod-katex v1.0.8 // indirect
+	github.com/gethinode/mod-leaflet v1.0.1 // indirect
 	github.com/gethinode/mod-lottie v1.4.4 // indirect
-	github.com/gethinode/mod-utils/v2 v2.1.1 // indirect
+	github.com/gethinode/mod-utils/v2 v2.2.2 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -16,6 +16,8 @@ github.com/gethinode/mod-bootstrap v1.2.4 h1:4CFNpwpRKiZlMVWg9u5+ijSb924j4yM3G1p
 github.com/gethinode/mod-bootstrap v1.2.4/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-bootstrap v1.2.5 h1:h6yAlkMZA34wJU3pLFpLxp1ynEBte/YTY4kGEQtMGPE=
 github.com/gethinode/mod-bootstrap v1.2.5/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.2.6 h1:joKKVqWzPgitPbUFlU4oIRj72YXsEHkVun3TPf4ZZ2Q=
+github.com/gethinode/mod-bootstrap v1.2.6/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
 github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
@@ -96,6 +98,8 @@ github.com/gethinode/mod-fontawesome v1.8.0 h1:YEuCmvCdzcemF1eFK35Wnp1asKKO3/xbx
 github.com/gethinode/mod-fontawesome v1.8.0/go.mod h1:uvuC2YL8mdXNp6NRzFOu4TWsHvtY9AZ8YxJkF23/M/8=
 github.com/gethinode/mod-fontawesome v1.8.1 h1:iyvULrpaGizQoI5Vl9WjFYcMGWefdyG90NGK2UKax+k=
 github.com/gethinode/mod-fontawesome v1.8.1/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.8.2 h1:LAzLytyh9c9gLzBWMju6Gtp3uEojhBQEYw0o38EUKZY=
+github.com/gethinode/mod-fontawesome v1.8.2/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
@@ -110,6 +114,8 @@ github.com/gethinode/mod-katex v1.0.5 h1:AVhcTINYory0ygChQERf8PcyJkbT1oqhmLRF6ES
 github.com/gethinode/mod-katex v1.0.5/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.7 h1:FTEhvi3r+O5lPeOxB7OsanFZuAB14yC5fIk3DqhkNyY=
 github.com/gethinode/mod-katex v1.0.7/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.8 h1:tFGFz/JIEogCz4wvUsUncrOsOupPxsjP+TwU/3NxIjY=
+github.com/gethinode/mod-katex v1.0.8/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
 github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
@@ -124,6 +130,8 @@ github.com/gethinode/mod-leaflet v0.4.0 h1:Xc6c1UTf4m1saQLFfFWT5sEpwj25xVGuS8csG
 github.com/gethinode/mod-leaflet v0.4.0/go.mod h1:yr+bUKAstifdB16mbYh69OayAmgPOlNUubAmVn5eL2M=
 github.com/gethinode/mod-leaflet v1.0.0 h1:HdnWafOGkkK1hYGfqLYF3pp9dAFS/caxlzML9sO1rCc=
 github.com/gethinode/mod-leaflet v1.0.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.0.1 h1:L4Coe6HTD9O0Txs1S8AtVg+6/TEneSF9i6fJK8jdWUw=
+github.com/gethinode/mod-leaflet v1.0.1/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
 github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
 github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
@@ -168,6 +176,8 @@ github.com/gethinode/mod-utils/v2 v2.1.0 h1:5I0IN/AX5qPFYx7tjWXk59GBevTJzixxZUGj
 github.com/gethinode/mod-utils/v2 v2.1.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.1.1 h1:aLBcS9Zbx+dqnu5oBsTM01AkkN5nwwifgbV4D0qiHnM=
 github.com/gethinode/mod-utils/v2 v2.1.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.2.2 h1:ZRxWIJKmZIDYsoMS3WhxxC+BWJrkd1dcZ8rz/cLZExc=
+github.com/gethinode/mod-utils/v2 v2.2.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -39,7 +39,11 @@
 {{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
 {{ $paginator := "" }}
 {{ if and $isPages $paginate }}
-    {{ $paginator = $page.Paginate $pages .max }}
+    {{ with .pagination }}
+        {{ $paginator = $page.Paginate $pages . }}
+    {{ else }}
+        {{ $paginator = $page.Paginate $pages }}
+    {{ end }}
    {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
 {{ end }}

@@ -74,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 -}}
@@ -98,6 +128,7 @@
                "footer" $footer
                "header" $header
                "loading" $loading
+                "sizes" $sizes
                "orientation" $orientation
                "padding" $padding
                "ratio" $ratio
--- 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 @@
        <div class="row g-0 row-cols-1 h-100{{ if $button }} pb-5{{ end }}">
            <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else }}col-4{{ end }}">
                {{- 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 -}}
                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
@@ -157,7 +158,7 @@
    <!-- Render stacked / default card -->
    <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
        {{- 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 -}}
            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
--- 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)
 -}}

--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -204,8 +204,8 @@
                    <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
                        {{- if (and $logoLight $logoDark) -}}
                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
-                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-inline-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-inline-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
                        {{- else if $logo -}}
                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
                            <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
--- 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" }}
            <div class="row justify-content-center flex-fill">
                <div class="col-12 col-md-{{ $width }} m-auto text-center">
-                    {{ 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) }}
                </div>
            </div>
@@ -79,8 +87,11 @@
                <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
                </div>
-                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto align-self-end">
-                    {{ 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) }}
+                <div class="col col-12 col-md-{{ $newWidth }} order-0 order-md-1 text-center my-md-auto align-self-end">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4 pb-md-0") }}
                </div>
            </div>
        {{ end }}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,26 +1,26 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.23.10",
+  "version": "0.23.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "0.23.10",
+      "version": "0.23.13",
      "license": "MIT",
      "devDependencies": {
        "@fullhuman/postcss-purgecss": "^6.0.0",
        "@gethinode/netlify-plugin-dartsass": "^0.3.0",
        "@netlify/plugin-lighthouse": "^6.0.0",
        "autoprefixer": "^10.4.19",
-        "cssnano": "^7.0.0",
-        "cssnano-preset-advanced": "^7.0.0",
+        "cssnano": "^7.0.1",
+        "cssnano-preset-advanced": "^7.0.1",
        "eslint": "^8.57.0",
        "eslint-config-standard": "^17.1.0",
        "eslint-plugin-import": "^2.29.1",
        "eslint-plugin-n": "^16.6.2",
        "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "0.122.4",
+        "hugo-bin": "0.122.5",
        "markdownlint-cli2": "^0.13.0",
        "netlify-plugin-hugo-cache-resources": "^0.2.1",
        "npm-run-all": "^4.1.5",
@@ -29,7 +29,7 @@
        "replace-in-files-cli": "^2.2.0",
        "rimraf": "^5.0.5",
        "shx": "^0.3.4",
-        "stylelint": "^16.4.0",
+        "stylelint": "^16.5.0",
        "stylelint-config-standard-scss": "^13.1.0"
      },
      "optionalDependencies": {
@@ -2127,12 +2127,12 @@
      }
    },
    "node_modules/cssnano": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.0.0.tgz",
-      "integrity": "sha512-hhVRaaGbEDpb99AHBTaNJf6oXpnU4B7evBi7rt3ShiOh5JEnWsBWYsldywE9L0twVTLPBY9jT/zY6YODXP3TEg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.0.1.tgz",
+      "integrity": "sha512-917Mej/4SdI7b55atsli3sU4MOJ9XDoKgnlCtQtXYj8XUFcM3riTuYHyqBBnnskawW+zWwp0KxJzpEUodlpqUg==",
      "dev": true,
      "dependencies": {
-        "cssnano-preset-default": "^7.0.0",
+        "cssnano-preset-default": "^7.0.1",
        "lilconfig": "^3.1.1"
      },
      "engines": {
@@ -2147,14 +2147,14 @@
      }
    },
    "node_modules/cssnano-preset-advanced": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-7.0.0.tgz",
-      "integrity": "sha512-D8A+wntV4LQquO7ej/VwafC9isSHF0Tl6/bR7BsMcEZqr3vTrVqTkmPLGAyJj6XdhGXmDAAsXRmdqA7XDsI2YA==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-7.0.1.tgz",
+      "integrity": "sha512-y1NE/+WiKPnR/kVrUPeYrX3oWb9iHQZ3+KhNH++UTOgbLS7yJtC6nOkisnP90A5mQXLhpK8OjjxYEe9kAmRAnA==",
      "dev": true,
      "dependencies": {
        "autoprefixer": "^10.4.19",
        "browserslist": "^4.23.0",
-        "cssnano-preset-default": "^7.0.0",
+        "cssnano-preset-default": "^7.0.1",
        "postcss-discard-unused": "^7.0.0",
        "postcss-merge-idents": "^7.0.0",
        "postcss-reduce-idents": "^7.0.0",
@@ -2168,15 +2168,15 @@
      }
    },
    "node_modules/cssnano-preset-default": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.0.tgz",
-      "integrity": "sha512-3YdcG6aHxALLdT0Gjq44zA45PcgW+qWuODq4XNtwpx1olR08cX+tozlXOU25IjeXeaYyqvTUxicIr2fcdJHRZg==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.1.tgz",
+      "integrity": "sha512-Fumyr+uZMcjYQeuHssAZxn0cKj3cdQc5GcxkBcmEzISGB+UW9CLNlU4tBOJbJGcPukFDlicG32eFbrc8K9V5pw==",
      "dev": true,
      "dependencies": {
        "browserslist": "^4.23.0",
        "css-declaration-sorter": "^7.2.0",
        "cssnano-utils": "^5.0.0",
-        "postcss-calc": "^9.0.1",
+        "postcss-calc": "^10.0.0",
        "postcss-colormin": "^7.0.0",
        "postcss-convert-values": "^7.0.0",
        "postcss-discard-comments": "^7.0.0",
@@ -4386,9 +4386,9 @@
      "dev": true
    },
    "node_modules/hugo-bin": {
-      "version": "0.122.4",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.122.4.tgz",
-      "integrity": "sha512-npOHGyTxeW9MF1Q5tC5PDjuhOBU+KMi75d+0so+hNYoE/iOUTsUeAO4vG/kD6W7zUtoeF/5PDjxxMUtcfqoTZg==",
+      "version": "0.122.5",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.122.5.tgz",
+      "integrity": "sha512-Iuua9s1aGQb8kWeAjklfryEPLF/4jsSbRHehRe3vyS3Mgb7iuZjKI9p8yn6ha5LatVJREHn4qznZ2D5IPGSCUA==",
      "dev": true,
      "funding": [
        {
@@ -6641,19 +6641,19 @@
      }
    },
    "node_modules/postcss-calc": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz",
-      "integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.0.0.tgz",
+      "integrity": "sha512-OmjhudoNTP0QleZCwl1i6NeBwN+5MZbY5ersLZz69mjJiDVv/p57RjRuKDkHeDWr4T+S97wQfsqRTNoDHB2e3g==",
      "dev": true,
      "dependencies": {
-        "postcss-selector-parser": "^6.0.11",
+        "postcss-selector-parser": "^6.0.16",
        "postcss-value-parser": "^4.2.0"
      },
      "engines": {
-        "node": "^14 || ^16 || >=18.0"
+        "node": "^18.12 || ^20.9 || >=22.0"
      },
      "peerDependencies": {
-        "postcss": "^8.2.2"
+        "postcss": "^8.4.38"
      }
    },
    "node_modules/postcss-cli": {
@@ -8879,9 +8879,9 @@
      }
    },
    "node_modules/stylelint": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.4.0.tgz",
-      "integrity": "sha512-uSx7VMuXwLuYcNSIg+0/fFNv0WinsfLAqsVVy7h7p80clKOHiGE8pfY6UjqwylTHiJrRIahTl6a8FPxGezhWoA==",
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
+      "integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
      "dev": true,
      "dependencies": {
        "@csstools/css-parser-algorithms": "^2.6.1",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.23.10",
+  "version": "0.23.13",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -71,14 +71,14 @@
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "@netlify/plugin-lighthouse": "^6.0.0",
    "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.0",
-    "cssnano-preset-advanced": "^7.0.0",
+    "cssnano": "^7.0.1",
+    "cssnano-preset-advanced": "^7.0.1",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "0.122.4",
+    "hugo-bin": "0.122.5",
    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
@@ -87,7 +87,7 @@
    "replace-in-files-cli": "^2.2.0",
    "rimraf": "^5.0.5",
    "shx": "^0.3.4",
-    "stylelint": "^16.4.0",
+    "stylelint": "^16.5.0",
    "stylelint-config-standard-scss": "^13.1.0"
  },
  "optionalDependencies": {
Author	SHA1	Message	Date
Mark Dumay	9c71856e49	Merge pull request #915 from gethinode/develop Improve image set rendering	2024-05-06 09:25:09 +02:00
Mark Dumay	9300a794b1	Improve image set rendering	2024-05-06 08:14:15 +02:00
Mark Dumay	6d57058d9e	Merge pull request #913 from gethinode/hugo-mod-dependencies Update Hugo module dependencies	2024-05-05 09:59:41 +02:00
markdumay	b6e5b24514	fix: update Hugo module dependencies	2024-05-05 07:54:06 +00:00
Mark Dumay	f1d99aa191	Merge pull request #912 from gethinode/develop Introduce pagination parameter for card groups	2024-05-04 06:47:24 +02:00
Mark Dumay	5597ad8c7d	Merge branch 'main' into develop	2024-05-04 06:39:46 +02:00
github-actions[bot]	cce1a68c0b	Merge pull request #907 from gethinode/dependabot/npm_and_yarn/stylelint-16.5.0 Bump stylelint from 16.4.0 to 16.5.0	2024-05-04 04:36:50 +00:00
Mark Dumay	b3116d0c86	Merge branch 'main' into dependabot/npm_and_yarn/stylelint-16.5.0	2024-05-04 06:32:05 +02:00
Mark Dumay	0540f4f0ae	Introduce pagination parameter for card groups Fixes #910	2024-05-04 06:31:47 +02:00
Mark Dumay	172fbcfbfb	Merge pull request #911 from gethinode/develop Fix linting issues	2024-05-04 06:30:13 +02:00
Mark Dumay	2cfb171f9e	Merge branch 'main' into develop	2024-05-04 05:50:58 +02:00
Mark Dumay	d1e589f60c	Fix linting issues	2024-05-04 05:50:26 +02:00
Mark Dumay	e866263fd0	Merge pull request #909 from gethinode/hugo-mod-dependencies Update Hugo module dependencies	2024-05-04 05:46:51 +02:00
markdumay	f749f7311c	fix: update Hugo module dependencies	2024-05-03 03:06:25 +00:00
dependabot[bot]	29f0caf070	Bump stylelint from 16.4.0 to 16.5.0 Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.4.0 to 16.5.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/16.4.0...16.5.0) --- updated-dependencies: - dependency-name: stylelint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-05-02 13:33:09 +00:00
github-actions[bot]	b3a16435f8	Merge pull request #908 from gethinode/dependabot/npm_and_yarn/hugo-bin-0.122.5 Bump hugo-bin from 0.122.4 to 0.122.5	2024-05-02 13:32:24 +00:00
dependabot[bot]	2a17b0faa1	Bump hugo-bin from 0.122.4 to 0.122.5 Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.122.4 to 0.122.5. - [Release notes](https://github.com/fenneclab/hugo-bin/releases) - [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.122.4...v0.122.5) --- updated-dependencies: - dependency-name: hugo-bin dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-05-02 13:27:20 +00:00
github-actions[bot]	b29206df52	Merge pull request #905 from gethinode/dependabot/npm_and_yarn/cssnano-7.0.1 Bump cssnano from 7.0.0 to 7.0.1	2024-04-29 14:10:34 +00:00
dependabot[bot]	88210f6f0f	Bump cssnano from 7.0.0 to 7.0.1 Bumps [cssnano](https://github.com/cssnano/cssnano) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano@7.0.0...cssnano@7.0.1) --- updated-dependencies: - dependency-name: cssnano dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-04-29 14:05:12 +00:00
github-actions[bot]	571353a1f0	Merge pull request #904 from gethinode/dependabot/npm_and_yarn/cssnano-preset-advanced-7.0.1 Bump cssnano-preset-advanced from 7.0.0 to 7.0.1	2024-04-29 14:04:32 +00:00
dependabot[bot]	22a2b3e308	Bump cssnano-preset-advanced from 7.0.0 to 7.0.1 Bumps [cssnano-preset-advanced](https://github.com/cssnano/cssnano) from 7.0.0 to 7.0.1. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano-preset-advanced@7.0.0...cssnano-preset-advanced@7.0.1) --- updated-dependencies: - dependency-name: cssnano-preset-advanced dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-04-29 13:57:56 +00:00
Mark Dumay	c91642cbb8	Merge pull request #903 from gethinode/develop Fix alignment of color-mode aware brand logo	2024-04-29 09:15:48 +02:00
Mark Dumay	12f334292a	Merge branch 'main' into develop	2024-04-29 09:10:04 +02:00
Mark Dumay	9394ae46e8	Bump package release	2024-04-29 09:09:37 +02:00
Mark Dumay	aa82875644	Fix alignment of color-mode aware brand logo	2024-04-29 09:08:55 +02:00