tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-13 04:14:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: handle SVG images in responsive image processing

Browse Source 
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
This commit is contained in:
George Cushen committed 2026-03-13 13:39:56 +00:00
1 parent 71f472d381
commit 2c3a2491f1
7 files changed
+65 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/blox/blox/resume-biography-3/block.html
+6 -4
View File
@@ -131,10 +131,12 @@
{{ $img = $image_resource }}
{{ if $img }}
{{ $isSVG := eq $img.MediaType.SubType "svg" }}
{{ $isGIF := eq $img.MediaType.SubType "gif" }}
<div class="relative w-full h-64 rounded-2xl overflow-hidden shadow-xl mb-8">
{{ 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 }}
<img class="absolute inset-0 w-full h-full object-cover"
src="{{$img.RelPermalink}}"
alt="" />
modules/blox/blox/resume-biography/block.html
+7 -6
View File
@@ -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 @@
</div>
</div>
{{ else }}
{{/* Handle GIF without processing */}}
{{- $img = $img.Process "webp" -}}
{{/* Handle SVG/GIF without processing */}}
{{ if not $isSVG }}{{ $img = $img.Process "webp" }}{{ end }}
<div class="w-full bg-gray-200 dark:bg-gray-900 flex flex-wrap items-center justify-center">
<div class="w-full bg-white rounded dark:bg-gray-800">
<div class="h-2/4 sm:h-64 overflow-hidden w-full">
<img class="w-full object-cover"
src="{{$img.RelPermalink}}"
width="{{$img.Width}}" height="{{$img.Height}}"
alt="" />
</div>
</div>
modules/blox/layouts/_partials/blox/preact-wrapper.html
+12 -11
View File
@@ -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" }}
modules/blox/layouts/_partials/functions/process_responsive_image.html
+1 -2
View File
@@ -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 -}}
modules/blox/layouts/_partials/page_author_card.html
+14 -3
View File
@@ -14,14 +14,24 @@
<div class="flex pt-12 pb-4">
{{ if $avatar }}
{{ $responsive := partial "functions/process_responsive_image.html" (dict
"image" $avatar
{{ $isSVG := eq $avatar.MediaType.SubType "svg" }}
{{ if $isSVG }}
<img
class="mr-4 h-24 w-24 {{if ne $avatar_shape "square"}}rounded-full{{end}}"
src="{{ $avatar.RelPermalink }}"
width="96"
height="96"
alt="{{$profile.title}}"
loading="lazy"
/>
{{ 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)
) }}
<img
class="mr-4 h-24 w-24 {{if ne $avatar_shape "square"}}rounded-full{{end}}"
srcset="{{ $responsive.srcset }}"
@@ -32,6 +42,7 @@
alt="{{$profile.title}}"
loading="lazy"
/>
{{ end }}
{{ end }}
<div class="place-self-center">
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
modules/blox/layouts/authors/term.html
+12
View File
@@ -9,6 +9,17 @@
<div class="flex flex-col sm:flex-row sm:items-center gap-6">
<div class="flex-shrink-0">
{{ if $avatar }}
{{ $isSVG := eq $avatar.MediaType.SubType "svg" }}
{{ if $isSVG }}
<img
class="h-32 w-32 sm:h-40 sm:w-40 {{ if ne $avatar_shape "square" }}rounded-full{{ end }}"
src="{{ $avatar.RelPermalink }}"
width="160"
height="160"
alt="{{ $profile.title }}"
loading="lazy"
/>
{{ else }}
{{ $responsive := partial "functions/process_responsive_image.html" (dict
"image" $avatar
"mode" "fill"
@@ -26,6 +37,7 @@
alt="{{ $profile.title }}"
loading="lazy"
/>
{{ end }}
{{ else }}
<div class="h-32 w-32 sm:h-40 sm:w-40 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
{{ partial "functions/get_icon" (dict "name" "hero/user" "attributes" "class=\"h-12 w-12 text-gray-400\"") }}
modules/blox/theme.toml
+13 -11
View File
@@ -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"