mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-20 02:16:40 +00:00
George Cushen
bab17c129d
Introduce reusable partial process_responsive_image.html (fit/fill/resize/responsive), using Hugo .Process, WebP by default, skip GIFs, respect Hugo imaging defaults Preserve original look: pre-fit/pre-fill to intended dimensions, then generate responsive variants; use fitted dims for width/height to avoid CLS single.html: featured image pre-fit by placement (720/1200/2560), responsive srcset, fetchpriority=high; author avatar uses 2x retina (32→16) article-grid.html: main image pre-fit 960×540 (fill/fit), responsive srcset; author avatar uses 2x retina (40→20) card.html: pre-fill 655×655, responsive srcset render-image.html: default display 760px with responsive srcset (matches prior layout) page_author_card.html: high‑res avatar pipeline with srcset (sizes=96px) testimonials.html: avatar uses 2x retina (96→48) CTA/resume banners: responsive srcset + sizes Fix issues: avoid using fallback dims for display Closes #1988
64 lines
2.9 KiB
HTML
64 lines
2.9 KiB
HTML
{{/* Hugo Blox: CTA Image Paragraph */}}
|
|
{{/* Documentation: https://hugoblox.com/blocks/ */}}
|
|
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
|
|
|
|
{{/* Initialise */}}
|
|
{{ $page := .wcPage }}
|
|
{{ $block := .wcBlock }}
|
|
|
|
<div>
|
|
{{ range $idx, $item := $block.content.items }}
|
|
{{ $title := .title | emojify | $page.RenderString }}
|
|
{{ $text := .text | emojify | $page.RenderString }}
|
|
{{ $image_path := path.Join "media" .image }}
|
|
{{ $image := resources.GetMatch $image_path }}
|
|
{{ with $image }}
|
|
<div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
|
|
{{ if ne $image.MediaType.SubType "gif" }}
|
|
{{ $responsive := partial "functions/process_responsive_image.html" (dict
|
|
"image" $image
|
|
"mode" "fit"
|
|
"sizes" (slice 400 600 800 1200)
|
|
) }}
|
|
<img class="w-full"
|
|
srcset="{{ $responsive.srcset }}"
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
src="{{ $responsive.fallback.RelPermalink }}"
|
|
width="{{ $responsive.fallback.Width }}"
|
|
height="{{ $responsive.fallback.Height }}"
|
|
alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
|
|
{{ else }}
|
|
<img class="w-full"
|
|
src="{{$image.RelPermalink}}"
|
|
width="{{$image.Width}}"
|
|
height="{{$image.Height}}"
|
|
alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
|
|
{{ end }}
|
|
{{ else }}
|
|
{{ errorf "%s uses the `cta-image-paragraph` blox which specifies a non-existent `image` at `assets/%s`. Please add the image to this folder and try again." $page.File.Path $image_path }}
|
|
{{ end }}
|
|
<div class="mt-4 md:mt-0">
|
|
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{$title}}</h2>
|
|
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">{{$text}}</p>
|
|
{{ $icon := .feature_icon | default "check" }}
|
|
{{ if .features }}
|
|
<ul>
|
|
{{ range .features }}
|
|
<li class="relative mb-4 pl-6">
|
|
{{ partial "functions/get_icon" (dict "name" $icon "attributes" `class="inline-block pr-3" style="height: 1em;"`) }}
|
|
{{ . | markdownify }}
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
{{ end }}
|
|
{{ with .button }}
|
|
<a href="{{.url}}" class="mt-3 inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
|
|
{{.text}}
|
|
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|