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

fix(blocks): restore missing background design features in v3 parser

Browse Source 
- Fix background image brightness filter not applying (closes issue URL below)
- Add CSS filters: blur, contrast, saturate, grayscale
- Add background image size, position, and repeat controls
- Add background.css_class for custom classes on bg layer
- Add design.clip_path for shaped section edges
- Add errorf for missing background images
- Remove dead v2 parser (no longer referenced)

Fixes https://discord.com/channels/722225264733716590/1477717661981999114/1477717661981999114
This commit is contained in:
George Cushen committed 2026-03-03 00:30:27 +00:00
1 parent 24dc36f6d7
commit dbe0c86df7
2 files changed
+66 -379
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/blox/layouts/_partials/functions/parse_block_v3.html
+66 -2
View File
@@ -179,6 +179,8 @@
{{ end }}
{{ $image_layer := printf "url('%s')" $bg_img.RelPermalink }}
{{ $background_layers = $background_layers | append $image_layer }}
{{ else }}
{{ errorf "Couldn't find `%s` in the `assets/media/` folder - please add it." $bg.image.filename }}
{{ end }}
{{ end }}
@@ -190,6 +192,60 @@
{{ if $all_layers }}
{{ $combined_backgrounds := delimit $all_layers ", " }}
{{ $style_bg = printf "%sbackground-image: %s;" $style_bg $combined_backgrounds }}
{{/* Background image size/position/repeat properties */}}
{{ $layer_count := len $all_layers }}
{{ if gt $layer_count 1 }}
{{/* Multiple layers: image + gradient */}}
{{ $img_size := $bg.image.size | default "cover" }}
{{ $img_position := $bg.image.position | default "center" }}
{{ $img_repeat := $bg.image.repeat | default "no-repeat" }}
{{ if eq $img_position "repeat" }}
{{ $img_repeat = "repeat" }}
{{ $img_position = "center" }}
{{ end }}
{{ $style_bg = printf "%sbackground-size: %s, cover;" $style_bg $img_size }}
{{ $style_bg = printf "%sbackground-position: %s, center;" $style_bg $img_position }}
{{ $style_bg = printf "%sbackground-repeat: %s, no-repeat;" $style_bg $img_repeat }}
{{ else }}
{{/* Single layer */}}
{{ if $background_layers }}
{{ with $bg.image.size }}
{{ $style_bg = printf "%sbackground-size: %s;" $style_bg . }}
{{ end }}
{{ with $bg.image.position }}
{{ if eq . "repeat" }}
{{ $style_bg = printf "%sbackground-position: center;" $style_bg }}
{{ $style_bg = printf "%sbackground-repeat: repeat;" $style_bg }}
{{ else }}
{{ $style_bg = printf "%sbackground-position: %s;" $style_bg . }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{/* Background image filters: brightness, blur, contrast, saturate, grayscale */}}
{{ with $bg.image.filters }}
{{ $filter_parts := slice }}
{{ with .brightness }}
{{ $filter_parts = $filter_parts | append (printf "brightness(%s)" (string .)) }}
{{ end }}
{{ with .blur }}
{{ $filter_parts = $filter_parts | append (printf "blur(%s)" (string .)) }}
{{ end }}
{{ with .contrast }}
{{ $filter_parts = $filter_parts | append (printf "contrast(%s)" (string .)) }}
{{ end }}
{{ with .saturate }}
{{ $filter_parts = $filter_parts | append (printf "saturate(%s)" (string .)) }}
{{ end }}
{{ with .grayscale }}
{{ $filter_parts = $filter_parts | append (printf "grayscale(%s)" (string .)) }}
{{ end }}
{{ if $filter_parts }}
{{ $style_bg = printf "%sfilter: %s;" $style_bg (delimit $filter_parts " ") }}
{{ end }}
{{ end }}
@@ -202,17 +258,25 @@
{{ $style = print $style . }}
{{ end }}
{{/* Support for clip path (design.clip_path) */}}
{{ with $block.design.clip_path }}
{{ $style = printf "%sclip-path: %s;" $style . }}
{{ end }}
{{ $hash_id := $block.id | default (printf "section-%s" (replace $block_type "." "-")) }}
{{ $css_classes := $block.design.css_class | default "" }}
{{ $widget_class := printf "blox-%s" (replace (replace $block_type "." "-") "_" "-") }}
{{/* Extract background-specific CSS classes */}}
{{ $bg_css_classes := $bg.css_class | default "" }}
{{/* Route to appropriate handler */}}
{{ if $is_preact }}
{{/* Render Preact block with styling wrapper */}}
<section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
{{/* Gradient Mesh Background */}}
{{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
{{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
</div>
{{/* Use generic Preact wrapper for content */}}
@@ -240,7 +304,7 @@
<section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
{{/* Gradient Mesh Background */}}
{{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
<div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
{{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
</div>
{{ partial $block_path $widget_args }}