reflect.IsImageResourceProcessable

A processable image is an image file characterized by one of the following media types:

• image/bmp
• image/gif
• image/jpeg
• image/png
• image/tiff
• image/webp

Hugo can decode and encode these image formats, allowing you to use any of the resource methods applicable to images such as Width, Height, Crop, Fill, Fit, Filter, Process, Resize, etc.

Use the reflect.IsImageResourceProcessable function to determine if an image can be processed.

Usage

This example iterates through all project resources and uses reflect.IsImageResourceProcessable to ensure the image pipeline can perform transformations like resizing before processing begins.

{{ range resources.Match "**" }}
  {{ if reflect.IsImageResourceProcessable . }}
    {{ with .Process "resize 300x webp" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="Processed Image">
    {{ end }}
  {{ end }}
{{ end }}

Image operations

Use these functions to determine which operations Hugo supports for a given resource. While Hugo classifies a variety of file types as image resources, its ability to process them or extract metadata varies by format.

• reflect.IsImageResource: Reports whether the given value is a Resource object representing an image as defined by its media type.
• reflect.IsImageResourceProcessable: Reports whether the given value is a Resource object representing an image from which Hugo can extract dimensions and perform processing such as converting, resizing, cropping, or filtering.
• reflect.IsImageResourceWithMeta: Reports whether the given value is a Resource object representing an image from which Hugo can extract dimensions and, if present, Exif, IPTC, and XMP data.

The table below shows the values these functions return for various file formats. Use it to determine which checks are required before calling specific methods in your templates.

This contrived example demonstrates how to iterate through resources and use these functions to apply the appropriate handling for each image format.

{{ range resources.Match "**" }}
  {{ if reflect.IsImageResource . }}
    {{ if reflect.IsImageResourceProcessable . }}
      {{ with .Process "resize 300x webp" }}
        <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
      {{ end }}
    {{ else if reflect.IsImageResourceWithMeta . }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ else }}
      <img src="{{ .RelPermalink }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}