From 2c3a2491f1a4a4880bda6d0dd631246ce712187f Mon Sep 17 00:00:00 2001 From: George Cushen Date: Fri, 13 Mar 2026 13:37:17 +0000 Subject: [PATCH] fix: handle SVG images in responsive image processing SVG resources don't support .Width, .Height, or .Process in Hugo, causing crashes in process_responsive_image.html and all callers that pass SVGs without guards. Add SVG checks to process_responsive_image.html, preact-wrapper.html, resume-biography, resume-biography-3, authors/term, and page_author_card. Fixes #3305 --- .../blox/blox/resume-biography-3/block.html | 10 ++++---- modules/blox/blox/resume-biography/block.html | 13 +++++----- .../_partials/blox/preact-wrapper.html | 23 +++++++++--------- .../functions/process_responsive_image.html | 3 +-- .../layouts/_partials/page_author_card.html | 17 ++++++++++--- modules/blox/layouts/authors/term.html | 12 ++++++++++ modules/blox/theme.toml | 24 ++++++++++--------- 7 files changed, 65 insertions(+), 37 deletions(-) diff --git a/modules/blox/blox/resume-biography-3/block.html b/modules/blox/blox/resume-biography-3/block.html index eb197f7b..c24713df 100644 --- a/modules/blox/blox/resume-biography-3/block.html +++ b/modules/blox/blox/resume-biography-3/block.html @@ -131,10 +131,12 @@ {{ $img = $image_resource }} {{ if $img }} + {{ $isSVG := eq $img.MediaType.SubType "svg" }} + {{ $isGIF := eq $img.MediaType.SubType "gif" }}
- {{ if ne $img.MediaType.SubType "gif" }} - {{ $responsive := partial "functions/process_responsive_image.html" (dict - "image" $img + {{ if not (or $isSVG $isGIF) }} + {{ $responsive := partial "functions/process_responsive_image.html" (dict + "image" $img "mode" "fill" "aspect_ratio" "16:9" "sizes" (slice 768 1024 1366 1920 2560) @@ -145,7 +147,7 @@ src="{{ $responsive.fallback.RelPermalink }}" alt="" /> {{ else }} - {{- $img = $img.Process "webp" -}} + {{ if not $isSVG }}{{ $img = $img.Process "webp" }}{{ end }} diff --git a/modules/blox/blox/resume-biography/block.html b/modules/blox/blox/resume-biography/block.html index 26701434..a90fa2d8 100644 --- a/modules/blox/blox/resume-biography/block.html +++ b/modules/blox/blox/resume-biography/block.html @@ -103,9 +103,11 @@ {{ $img = $image_resource }} {{ if $img }} - {{ if ne $img.MediaType.SubType "gif" }} - {{ $responsive := partial "functions/process_responsive_image.html" (dict - "image" $img + {{ $isSVG := eq $img.MediaType.SubType "svg" }} + {{ $isGIF := eq $img.MediaType.SubType "gif" }} + {{ if not (or $isSVG $isGIF) }} + {{ $responsive := partial "functions/process_responsive_image.html" (dict + "image" $img "mode" "fill" "aspect_ratio" "16:9" "sizes" (slice 768 1024 1366 1920 2560) @@ -124,14 +126,13 @@
{{ else }} - {{/* Handle GIF without processing */}} - {{- $img = $img.Process "webp" -}} + {{/* Handle SVG/GIF without processing */}} + {{ if not $isSVG }}{{ $img = $img.Process "webp" }}{{ end }}
diff --git a/modules/blox/layouts/_partials/blox/preact-wrapper.html b/modules/blox/layouts/_partials/blox/preact-wrapper.html index 8257ed58..bfb5443d 100644 --- a/modules/blox/layouts/_partials/blox/preact-wrapper.html +++ b/modules/blox/layouts/_partials/blox/preact-wrapper.html @@ -95,18 +95,19 @@ {{ $img_data := dict }} {{ if $image_resource }} - {{ if eq $block_type "cta-image-paragraph" }} + {{ $isSVG := eq $image_resource.MediaType.SubType "svg" }} + {{ $isGIF := eq $image_resource.MediaType.SubType "gif" }} + {{ if or $isSVG $isGIF }} + {{/* SVG/GIF: no processing, just pass through */}} + {{ $img_data = dict "src" $image_resource.RelPermalink }} + {{ else if eq $block_type "cta-image-paragraph" }} {{/* Responsive mode: generate srcset via process_responsive_image */}} - {{ if ne $image_resource.MediaType.SubType "gif" }} - {{ $responsive := partial "functions/process_responsive_image.html" (dict - "image" $image_resource - "mode" "fit" - "sizes" (slice 400 600 800 1200) - ) }} - {{ $img_data = dict "srcset" $responsive.srcset "src" $responsive.fallback.RelPermalink "width" $responsive.fallback.Width "height" $responsive.fallback.Height }} - {{ else }} - {{ $img_data = dict "src" $image_resource.RelPermalink "width" $image_resource.Width "height" $image_resource.Height }} - {{ end }} + {{ $responsive := partial "functions/process_responsive_image.html" (dict + "image" $image_resource + "mode" "fit" + "sizes" (slice 400 600 800 1200) + ) }} + {{ $img_data = dict "srcset" $responsive.srcset "src" $responsive.fallback.RelPermalink "width" $responsive.fallback.Width "height" $responsive.fallback.Height }} {{ else }} {{/* Thumbnail mode (testimonials, etc.): Fill 96x96 */}} {{ $processed := $image_resource.Process "Fill 96x96 Center webp" }} diff --git a/modules/blox/layouts/_partials/functions/process_responsive_image.html b/modules/blox/layouts/_partials/functions/process_responsive_image.html index e085e202..0a72ac0e 100644 --- a/modules/blox/layouts/_partials/functions/process_responsive_image.html +++ b/modules/blox/layouts/_partials/functions/process_responsive_image.html @@ -138,8 +138,7 @@ Returns: Map with processed images and srcset string {{- end -}} {{ end }} {{- else -}} - {{/* Handle unsupported formats (SVG, GIF) */}} - {{- $srcset_parts = $srcset_parts | append (printf "%s %dw" $image.RelPermalink $image.Width) -}} + {{/* Handle unsupported formats (SVG, GIF) - skip srcset as width/height are unavailable for SVGs */}} {{- $fallback_image = $image -}} {{- $processed_images = $processed_images | append $image -}} {{- end -}} diff --git a/modules/blox/layouts/_partials/page_author_card.html b/modules/blox/layouts/_partials/page_author_card.html index e36b6f43..98b00066 100644 --- a/modules/blox/layouts/_partials/page_author_card.html +++ b/modules/blox/layouts/_partials/page_author_card.html @@ -14,14 +14,24 @@
{{ if $avatar }} - {{ $responsive := partial "functions/process_responsive_image.html" (dict - "image" $avatar + {{ $isSVG := eq $avatar.MediaType.SubType "svg" }} + {{ if $isSVG }} + {{$profile.title}} + {{ else }} + {{ $responsive := partial "functions/process_responsive_image.html" (dict + "image" $avatar "mode" "fill" "aspect_ratio" "1:1" "anchor" "Center" "sizes" (slice 96 192 288 384) ) }} - {{$profile.title}} + {{ end }} {{ end }}
diff --git a/modules/blox/layouts/authors/term.html b/modules/blox/layouts/authors/term.html index 8f290c0f..247a18fa 100644 --- a/modules/blox/layouts/authors/term.html +++ b/modules/blox/layouts/authors/term.html @@ -9,6 +9,17 @@
{{ if $avatar }} + {{ $isSVG := eq $avatar.MediaType.SubType "svg" }} + {{ if $isSVG }} + {{ $profile.title }} + {{ else }} {{ $responsive := partial "functions/process_responsive_image.html" (dict "image" $avatar "mode" "fill" @@ -26,6 +37,7 @@ alt="{{ $profile.title }}" loading="lazy" /> + {{ end }} {{ else }}
{{ partial "functions/get_icon" (dict "name" "hero/user" "attributes" "class=\"h-12 w-12 text-gray-400\"") }} diff --git a/modules/blox/theme.toml b/modules/blox/theme.toml index c996d223..fdfd1f4f 100644 --- a/modules/blox/theme.toml +++ b/modules/blox/theme.toml @@ -1,24 +1,26 @@ name = "Hugo Blox - Tailwind" license = "MIT" licenselink = "https://github.com/HugoBlox/kit/blob/main/LICENSE.md" -description = "Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included." +description = "Easily create a beautiful website your way with fully customizable blocks - build landing pages, marketing sites, blogs, portfolios, docs, and more. Used by Nvidia, Stanford, and 1000s of others." homepage = "https://github.com/HugoBlox/kit" -demosite = "https://hugo-academic-pages.netlify.app/" -tags = ["widgets", - "portfolio", - "responsive", - "company", - "blog", +demosite = "https://hugoblox.com/templates/dev-portfolio/" +tags = ["blog", "minimal", + "personal", "dark", + "light", "multilingual", - "landing page", - "one page", - "customizable" + "portfolio", + "landing", + "tailwind", + "popular", + "company", + "docs", + "saas" ] features = ["page builder", "widgets", "color themes", "dark mode", "customizable", "filterable portfolio", "blog", "create landing pages", "gallery", "contact form"] [author] name = "George Cushen" - homepage = "https://georgecushen.com" + homepage = "https://neuralgeo.com"