Has anyone a webp shortcode?

support
2
layouts/shortcodes/picture.html 
{{- $path := .Get "path" -}}
{{- $alt := .Get "alt" -}}
{{- $width := .Get "width" -}}
{{- $height := .Get "height " -}}

{{- $msg1 := "The %q shortcode requires a parameter named %q. See %s" -}}
{{- $msg2 := "The resource %q passed to the %q shortcode is not an image. See %s" -}}
{{- $msg3 := "The resource %q passed to the %q shortcode could not be found. See %s" -}}

{{ if not $path }}
  {{ errorf $msg1 .Name "path" .Position }}
{{ end }}

{{- with $i := resources.Get $path -}}
  {{- if eq $i.MediaType.MainType "image" -}}
    {{- if not $width -}}
      {{- $width = $i.Width -}}
    {{- end -}}
    {{- if not $height -}}
      {{- $height = $i.Height -}}
    {{- end -}}

    {{- $j := "" -}}
    {{- $w := "" -}}

    {{- if eq $i.MediaType "image/webp" -}}
      {{- $fitOptions := printf "%vx%v jpg" $width $height -}}
      {{- $j = $i.Fit $fitOptions -}}
      {{- $w = $i -}}
    {{- else if eq $i.MediaType "image/jpeg" -}}
      {{- $fitOptions := printf "%vx%v webp" $width $height -}}
      {{- $w = $i.Fit $fitOptions -}}
      {{- $j = $i -}}
    {{- else -}}
      {{- $fitOptions := printf "%vx%v jpg" $width $height -}}
      {{- $j = $i.Fit $fitOptions -}}
      {{- $fitOptions = printf "%vx%v webp" $width $height -}}
      {{- $w = $i.Fit $fitOptions -}}
    {{- end -}}

    <picture>
      <source srcset="{{ $w.RelPermalink }}" type="image/webp">
      <source srcset="{{ $j.RelPermalink }}" type="image/jpeg">
      <img src="{{ $j.RelPermalink }}" alt="{{ $alt }}" width="{{ $j.Width }}" height="{{ $j.Height }}">
    </picture>
  {{- else -}}
    {{- errorf $msg2 $path $.Name $.Position -}}
  {{- end -}}
{{- else -}}
  {{- errorf $msg3 $path .Name .Position -}}
{{- end -}}
{{- /* chomp */ -}}

Place one format (JPEG, PNG, WEBP, or GIF) of an image in the assets/ directory, then call the shortcode like this:

{{< picture path="a.png" >}}
{{< picture path="a.png" alt="My image" width="300" height="150" >}}
  • The alt, width, and height parameters are optional.
  • The image size will be adjusted to fit (aspect ratio is maintained) the provided dimensions.
  • If you provide neither width nor height, the image size will not change.
  • If you provide either width or height, the missing value will be determined by the original image.

This is rendered something like:

<picture>
  <source srcset="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_533x400_fit_q75_h2_box_3.webp" type="image/webp">
  <source srcset="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_533x400_fit_q75_bgffffff_box_3.jpg" type="image/jpeg">
  <img src="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_533x400_fit_q75_bgffffff_box_3.jpg" alt="" width="533" height="400">
</picture>
<picture>
  <source srcset="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_300x400_fit_q75_h2_box_3.webp" type="image/webp">
  <source srcset="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_300x400_fit_q75_bgffffff_box_3.jpg" type="image/jpeg">
  <img src="/a_hu1c281d6ad96666827d571a3c8f40b864_327575_300x400_fit_q75_bgffffff_box_3.jpg" alt="My image" width="300" height="225">
</picture>

Note that the width and height in the rendered <img> element may not match the width and height parameters in the shortcode call. That’s expected: the .Fit method maintains aspect ratio.

5 Likes