Hugo Helpers | benstrawbridge.com consulting - It's the best Jerry, The Best!

Here are some useful partials I use in this theme.

layouts/_default/_markup/render-image.html

This replaces the default markup template for rendering an image when the markdown code ![Alt Text](/path/to/img.jpg) is used. It calls another partial you have to add to your theme or layout directory in your site called ImageConverter.

{{ $image := resources.Get .Destination }}
{{- if $image -}}
{{- $post_image_webp := partial "ImageConverter.html" (dict "ImageSrc" .Destination "ImgParam" (printf "%dx%d webp q100" $image.Width $image.Height)) -}}
{{- $post_image_jpg := partial "ImageConverter.html" (dict "ImageSrc" .Destination "ImgParam" (printf "%dx%d jpg q100" $image.Width $image.Height)) -}}
<picture>
    <source srcset="{{ $post_image_webp }}" type="image/webp">
    <source srcset="{{ $post_image_jpg }}" type="image/jpeg">
    <img loading="lazy" class="img-fluid" src="{{ $post_image_jpg }}" width="{{ $image.Width }}" height="{{ $image.Height  }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }}>
</picture>
{{- else -}}
  <img loading="lazy" class="img-fluid" src="{{ .Destination | safeURL }}" {{ with .Text}} alt="{{ . }}" {{ else }} alt="{{ .Page.Title }}" {{ end }} {{ with .Title}} title="{{ . }}"{{ end }} />
{{- end -}}

layouts/partials/ImageConverter.html

This uses the power of hugo image processing to optimize your images and convert them to webp or other types.

{{/* Step 1: A default image as fallback */}}
{{ $image := "/images/placeholder.png" }}

{{/* Step 2: now check if passed image exists with same as title */}}
{{ $image_url := resources.Get .ImageSrc }}
{{ $img_param := .ImgParam }}

{{ if $image_url }}
    {{/* Resize and convert the image  */}}
    {{ $image_url = $image_url.Resize  $img_param }}
    {{ $image = $image_url.RelPermalink }}
{{end}}

{{return $image}}

partials/alert.html

This one passes the variables within the page context by using .Scratch.set "var1" "val1" in the calling template. It is used to create alert boxes in various different styles.

{{/*
  Based on: https://flowbite.com/docs/components/alerts/

  Usage::
    {{- .Scratch.Set "alertType" "success"}}
    {{- .Scratch.Set "alertTitle" "Alpha Release" }}
    {{- .Scratch.Set "alertMessage" "You are viewing an alpha version of this site redesign. Things may be broken at times or just in a state of flux." }}
    {{- partial "alert.html" . }}
*/}}
{{ $alertType := .Scratch.Get "alertType" }}
{{ $alertTitle := .Scratch.Get "alertTitle" }}
{{ $alertMessage := .Scratch.Get "alertMessage" }}
{{ $alertClasses := "" }}
{{ if eq $alertType "info" }}
  {{ $alertClasses = "text-blue-800 border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800" }}
{{ else if eq $alertType "danger" }}
  {{ $alertClasses = "text-red-800 border-red-300 bg-red-50 dark:text-red-400 dark:border-red-800" }}
{{ else if eq $alertType "success" }}
  {{ $alertClasses = "text-green-800 border-green-300 bg-green-50 dark:text-green-400 dark:border-green-800" }}
{{ else if eq $alertType "warning" }}
  {{ $alertClasses = "text-yellow-800 border-yellow-300 bg-yellow-50 dark:text-yellow-400 dark:border-yellow-800" }}
{{ else }}
  {{ $alertClasses = "text-gray-800 border-gray-300 bg-gray-50 dark:text-gray-400 dark:border-gray-800" }}
{{ end }}

<div class="flex items-center p-4 mb-4 text-sm border rounded-lg  dark:bg-gray-800 {{ $alertClasses }}" role="alert">
  <i class="fa-solid fa-circle-info flex-shrink-0 inline w-4 h-4 me-3"></i>
  <span class="sr-only">{{ $alertType }}</span>
  <div>
    <span class="font-medium">{{ $alertTitle }}</span> {{ $alertMessage }}
  </div>
</div>