mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 14:14:41 +00:00
fix(blocks): restore missing background design features in v3 parser
- 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
1 parent
24dc36f6d7
commit
dbe0c86df7
2 files changed
+66
-379
No files matched your search
@@ -1,377 +0,0 @@
|
||||
{{/* Hugo Blox Parser v2 */}}
|
||||
{{/* Documentation: https://hugoblox.com/blocks/ */}}
|
||||
{{/* License: https://github.com/HugoBlox/kit/blob/main/LICENSE.md */}}
|
||||
|
||||
{{ $page := .page }}
|
||||
{{ $block := .block }}
|
||||
|
||||
{{- $block_type := partial "hbx/resolve-block-param" (dict "config" $block "context" "content section") | default "markdown" -}}
|
||||
{{ $block_type = lower $block_type }}
|
||||
{{ range $r := site.Data.blox_aliases.renames }}
|
||||
{{ $block_type = cond (eq $block_type $r.old) $r.new $block_type }}
|
||||
{{ end }}
|
||||
{{ $block_path := printf "hbx/blocks/%s/block.html" $block_type }}
|
||||
{{ if not (templates.Exists (printf "_partials/%s" $block_path)) }}
|
||||
{{ errorf "%s uses a `%s` block but the `%s` block was not found at `%s`. Check the name of the block and ensure it exists in the blox/%s/ directory." $page.File.Path $block_type $block_type $block_path $block_type }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Mermaid block: Workaround to make Hugo's .Page.Store.Set cascade up to the parent of headless pages */}}
|
||||
{{ if $block.Page.Store.Get "has_mermaid" }}
|
||||
{{ $page.Page.Store.Set "has_mermaid" true }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Gallery block: Workaround to make Hugo's .Page.Store.Set cascade up from page blocks to the page context */}}
|
||||
{{/* Unfortunately, `.HasShortcode "gallery"` won't accept string input, only page context - so irrelevant here */}}
|
||||
{{/* Therefore, must do our own search for shortcodes within the `text` string */}}
|
||||
{{ if (gt (len (findRE `\{\{< gallery` $block.content.text 1)) 0) }}
|
||||
{{ $page.Page.Store.Set "has_gallery" true }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Begin widget styling */}}
|
||||
{{ $bg := $block.design.background }}
|
||||
{{ $style := "" }}
|
||||
{{ $style_bg := "" }}
|
||||
|
||||
{{ if $bg.color }}
|
||||
{{/* Check if color is a map/dict (light/dark structure) or a simple string */}}
|
||||
{{ $color_type := printf "%T" $bg.color }}
|
||||
{{ if eq $color_type "map[string]interface {}" }}
|
||||
{{/* New nested light/dark structure */}}
|
||||
{{ if and $bg.color.light $bg.color.dark }}
|
||||
{{ $light_color := $bg.color.light }}
|
||||
{{ $dark_color := $bg.color.dark }}
|
||||
|
||||
{{/* Convert light color */}}
|
||||
{{ if not (or (hasPrefix $light_color "var(") (hasPrefix $light_color "rgb(") (hasPrefix $light_color "#") (eq $light_color "transparent")) }}
|
||||
{{ if hasPrefix $light_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $light_color }}
|
||||
{{ $light_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $light_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $light_color }}
|
||||
{{ $light_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $light_color "-" }}
|
||||
{{ $parts := split $light_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $light_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Convert dark color */}}
|
||||
{{ if not (or (hasPrefix $dark_color "var(") (hasPrefix $dark_color "rgb(") (hasPrefix $dark_color "#") (eq $dark_color "transparent")) }}
|
||||
{{ if hasPrefix $dark_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $dark_color }}
|
||||
{{ $dark_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $dark_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $dark_color }}
|
||||
{{ $dark_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $dark_color "-" }}
|
||||
{{ $parts := split $dark_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $dark_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $style_bg = printf "background-color: %s;" $light_color }}
|
||||
{{ $style_bg = printf "%s--dark-bg-color: %s;" $style_bg $dark_color }}
|
||||
{{ else if $bg.color.light }}
|
||||
{{ $light_color := $bg.color.light }}
|
||||
|
||||
{{/* Convert light color */}}
|
||||
{{ if not (or (hasPrefix $light_color "var(") (hasPrefix $light_color "rgb(") (hasPrefix $light_color "#") (eq $light_color "transparent")) }}
|
||||
{{ if hasPrefix $light_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $light_color }}
|
||||
{{ $light_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $light_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $light_color }}
|
||||
{{ $light_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $light_color "-" }}
|
||||
{{ $parts := split $light_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $light_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $style_bg = printf "background-color: %s;" $light_color }}
|
||||
{{ else if $bg.color.dark }}
|
||||
{{ $dark_color := $bg.color.dark }}
|
||||
|
||||
{{/* Convert dark color */}}
|
||||
{{ if not (or (hasPrefix $dark_color "var(") (hasPrefix $dark_color "rgb(") (hasPrefix $dark_color "#") (eq $dark_color "transparent")) }}
|
||||
{{ if hasPrefix $dark_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $dark_color }}
|
||||
{{ $dark_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $dark_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $dark_color }}
|
||||
{{ $dark_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $dark_color "-" }}
|
||||
{{ $parts := split $dark_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $dark_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $style_bg = printf "--dark-bg-color: %s; background-color: var(--dark-bg-color);" $dark_color }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{/* Legacy single color support - backwards compatible */}}
|
||||
{{ $bg_color := $bg.color }}
|
||||
|
||||
{{/* Convert single color */}}
|
||||
{{ if not (or (hasPrefix $bg_color "var(") (hasPrefix $bg_color "rgb(") (hasPrefix $bg_color "#") (eq $bg_color "transparent")) }}
|
||||
{{ if hasPrefix $bg_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $bg_color }}
|
||||
{{ $bg_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $bg_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $bg_color }}
|
||||
{{ $bg_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $bg_color "-" }}
|
||||
{{ $parts := split $bg_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $bg_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $style_bg = printf "background-color: %s;" $bg_color }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Modern layered background support for 2025 glassmorphism */}}
|
||||
{{ $background_layers := slice }}
|
||||
{{ $gradient_layer := "" }}
|
||||
|
||||
{{/* Process gradients first but don't add to layers yet */}}
|
||||
{{/* Support legacy gradient syntax */}}
|
||||
{{ if and $bg.gradient_start $bg.gradient_end }}
|
||||
{{ $angle := string $bg.gradient_angle | default "90" }}
|
||||
{{ $gradient_layer = printf "linear-gradient(%sdeg, %s, %s)" $angle $bg.gradient_start $bg.gradient_end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Support modern gradient syntax for 2025 */}}
|
||||
{{ if and $bg.gradient.start $bg.gradient.end }}
|
||||
{{ $angle := string $bg.gradient.direction | default "135" }}
|
||||
{{ $start_color := $bg.gradient.start }}
|
||||
{{ $end_color := $bg.gradient.end }}
|
||||
|
||||
{{/* Convert Tailwind color names to CSS custom properties */}}
|
||||
{{ if not (or (hasPrefix $start_color "var(") (hasPrefix $start_color "rgb(") (hasPrefix $start_color "#")) }}
|
||||
{{ if hasPrefix $start_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $start_color }}
|
||||
{{ $start_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $start_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $start_color }}
|
||||
{{ $start_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $start_color "-" }}
|
||||
{{ $parts := split $start_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $start_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if not (or (hasPrefix $end_color "var(") (hasPrefix $end_color "rgb(") (hasPrefix $end_color "#")) }}
|
||||
{{ if hasPrefix $end_color "primary-" }}
|
||||
{{ $shade := strings.TrimPrefix "primary-" $end_color }}
|
||||
{{ $end_color = printf "var(--color-primary-%s)" $shade }}
|
||||
{{ else if hasPrefix $end_color "secondary-" }}
|
||||
{{ $shade := strings.TrimPrefix "secondary-" $end_color }}
|
||||
{{ $end_color = printf "var(--color-secondary-%s)" $shade }}
|
||||
{{ else if strings.Contains $end_color "-" }}
|
||||
{{ $parts := split $end_color "-" }}
|
||||
{{ if eq (len $parts) 2 }}
|
||||
{{ $color := index $parts 0 }}
|
||||
{{ $shade := index $parts 1 }}
|
||||
{{ $end_color = printf "var(--color-%s-%s)" $color $shade }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $gradient_layer = printf "linear-gradient(%sdeg, %s, %s)" $angle $start_color $end_color }}
|
||||
{{ end }}
|
||||
|
||||
{{ $bg_video := "" }}
|
||||
{{ $bg_video_class := "" }}
|
||||
{{ if $bg.video.filename }}
|
||||
{{ $bg_video = resources.Get (printf "media/%s" $bg.video.filename) }}
|
||||
{{ if $bg.video.flip }}
|
||||
{{ $bg_video_class = "flip" }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $bg.image.filename }}
|
||||
{{/* See Hugo note on linking assets in styles: https://github.com/gohugoio/hugoThemes#common-permalink-issues */}}
|
||||
{{ $bg_img := resources.Get (printf "media/%s" $bg.image.filename) }}
|
||||
{{ if $bg_img }}
|
||||
{{/* Exception for SVG as Hugo doesn't yet support image processing on SVG. */}}
|
||||
{{ if ne $bg_img.MediaType.SubType "svg" }}
|
||||
{{ $bg_img = $bg_img.Fit "1920x1920 webp" }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Add image layer to background layers for glassmorphism support */}}
|
||||
{{ $image_layer := printf "url('%s')" $bg_img.Permalink }}
|
||||
{{ $background_layers = $background_layers | append $image_layer }}
|
||||
|
||||
{{/* Background properties will be set in the multi-layer section below */}}
|
||||
{{ else }}
|
||||
{{ errorf "Couldn't find `%s` in the `assets/media/` folder - please add it." $bg.image.filename }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Combine all background layers for 2025 glassmorphism effects */}}
|
||||
{{/* Layer order: image (top) comes first, then gradient (bottom) */}}
|
||||
{{ if or $background_layers $gradient_layer }}
|
||||
{{ $all_layers := $background_layers }}
|
||||
{{ if $gradient_layer }}
|
||||
{{ $all_layers = $all_layers | append $gradient_layer }}
|
||||
{{ end }}
|
||||
{{ if $all_layers }}
|
||||
{{ $combined_backgrounds := delimit $all_layers ", " }}
|
||||
{{ $style_bg = printf "%sbackground-image: %s;" $style_bg $combined_backgrounds }}
|
||||
|
||||
{{/* Build multi-layer background properties */}}
|
||||
{{ $layer_count := len $all_layers }}
|
||||
|
||||
{{/* Generate properties for each layer */}}
|
||||
{{ if gt $layer_count 1 }}
|
||||
{{/* Multiple layers: image + gradient */}}
|
||||
{{ $img_size := $bg.image.size | default "100px" }}
|
||||
{{ $img_position := $bg.image.position | default "center" }}
|
||||
{{ $img_repeat := $bg.image.repeat | default "repeat" }}
|
||||
|
||||
{{/* Handle 'repeat' in position */}}
|
||||
{{ if eq $img_position "repeat" }}
|
||||
{{ $img_repeat = "repeat" }}
|
||||
{{ $img_position = "center" }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Combine properties for both layers */}}
|
||||
{{ $style_bg = printf "%sbackground-size: %s, cover !important;" $style_bg $img_size }}
|
||||
{{ $style_bg = printf "%sbackground-position: %s, center !important;" $style_bg $img_position }}
|
||||
{{ $style_bg = printf "%sbackground-repeat: %s, no-repeat !important;" $style_bg $img_repeat }}
|
||||
{{ else }}
|
||||
{{/* Single layer: apply properties normally */}}
|
||||
{{ if $background_layers }}
|
||||
{{ with $bg.image.size }}
|
||||
{{ $style_bg = printf "%sbackground-size: %s !important;" $style_bg . }}
|
||||
{{ end }}
|
||||
{{ with $bg.image.position }}
|
||||
{{ if eq . "repeat" }}
|
||||
{{ $style_bg = printf "%sbackground-position: center !important;" $style_bg }}
|
||||
{{ $style_bg = printf "%sbackground-repeat: repeat !important;" $style_bg }}
|
||||
{{ else }}
|
||||
{{ $style_bg = printf "%sbackground-position: %s !important;" $style_bg . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $bg.image.filters.brightness }}
|
||||
{{ $style_bg = printf "%sfilter: brightness(%s);" $style_bg (string .) }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $block.design.spacing.padding }}
|
||||
{{ $style_pad := printf "padding: %s;" (delimit . " ") }}
|
||||
{{ $style = print $style $style_pad }}
|
||||
{{ else }}
|
||||
{{ with $page.Params.design.spacing }}
|
||||
{{/* Fallback to default section spacing setting */}}
|
||||
{{ $style_pad := printf "padding: %s 0 %s 0;" . . }}
|
||||
{{ $style = print $style $style_pad }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Support for clip path (design.clip_path) */}}
|
||||
{{ with $block.design.clip_path }}
|
||||
{{ $style_clip_path := printf "clip-path: %s;" . }}
|
||||
{{ $style = print $style $style_clip_path }}
|
||||
{{ end }}
|
||||
|
||||
{{ with $block.design.css_style }}
|
||||
{{ $style = print $style . }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
{{/* Fix Hugo's ContentBaseName returning wrong file base name when page section is within a bundle. */}}
|
||||
{{ $hash_id := $block.id | default (printf "section-%s" (replace $block_type "." "-")) }}
|
||||
|
||||
{{ $widget_args := dict "wcPage" $page "wcBlock" $block "wcIdentifier" $hash_id }}
|
||||
{{ $css_classes := $block.design.css_class | default "" }}
|
||||
{{ $extra_attributes := "" }}
|
||||
{{ $use_container := false }}
|
||||
{{ $columns := $block.design.columns | default "1" }}
|
||||
{{/* $use_cols := in (slice "collection" "experience" "accomplishments" "contact" "markdown" "tag_cloud" "portfolio" "skills") $block_type */}}
|
||||
{{ $use_cols := false }}
|
||||
|
||||
{{/* Special case: Slider widget. */}}
|
||||
{{ if in (slice "slider") $block_type }}
|
||||
{{ $css_classes = print $css_classes " carousel slide" }}
|
||||
{{ $extra_attributes = printf "data-ride=\"carousel\" data-interval=\"%s\"" (cond ($block.design.loop | default true) (string $block.design.interval | default "3000") "false") }}
|
||||
{{ $use_container = false }}
|
||||
{{ end }}
|
||||
|
||||
{{ $widget_class := printf "blox-%s" (replace (replace $block_type "." "-") "_" "-") }}
|
||||
|
||||
{{/* Now loaded in `init.html` */}}
|
||||
{{/*
|
||||
{{ $widget_config_file := printf "blox/%s/config.html" $block_type }}
|
||||
{{ if templates.Exists (printf "_partials/%s" $widget_config_file) }}
|
||||
{{ $cfg := partial $widget_config_file $widget_args }}
|
||||
{{ with $cfg.use_container }}{{ $use_container = . }}{{ end }}
|
||||
{{ with $cfg.inject_section_heading }}{{ $use_cols = . }}{{ end }}
|
||||
{{end}}
|
||||
*/}}
|
||||
|
||||
{{/* Extract background-specific CSS classes */}}
|
||||
{{ $bg_css_classes := $bg.css_class | default "" }}
|
||||
|
||||
{{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
|
||||
<section id="{{$hash_id}}" class="relative 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}} {{print $extra_attributes | safeHTMLAttr}}>
|
||||
<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>
|
||||
{{if $use_container}}<div class="container mx-auto">{{end}}
|
||||
|
||||
{{if $use_cols}}
|
||||
<div class="row {{if not $block.content.title | or (eq $columns "1") }}justify-content-center{{end}}">
|
||||
{{ if $block.content.title }}
|
||||
{{ if eq $columns "1" }}
|
||||
<div class="section-heading col-12 mb-3 text-center">
|
||||
{{ with $block.content.title }}<h1 class="mb-0">{{ . | markdownify | emojify }}</h1>{{ end }}
|
||||
{{ with $block.content.subtitle }}<p class="mt-1">{{ . | markdownify | emojify }}</p>{{ end }}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="section-heading col-12 col-lg-4 mb-3 mb-lg-0 d-flex flex-column align-items-center align-items-lg-start">
|
||||
{{ with $block.content.title }}<h1 class="mb-0">{{ . | markdownify | emojify }}</h1>{{ end }}
|
||||
{{ with $block.content.subtitle }}<p class="mt-1">{{ . | markdownify | emojify }}</p>{{ end }}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{ partial $block_path $widget_args }}
|
||||
|
||||
{{if $use_cols}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if $use_container}}</div>{{end}}
|
||||
</section>
|
||||
@@ -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 }}
|
||||
|
||||
Reference in new issue
Block a user