gohugoio--hugo/docs/content/en/methods/resource/Process.md

title, description, categories, keywords, params

title	description	categories	keywords	params
Process	Applicable to images, returns a new image resource processed according to the given processing specification.		process	alt_title functions_and_methods RESOURCE.Process returnType signatures images.ImageResource RESOURCE.Process SPECIFICATION

{{% include "/_common/methods/resource/global-page-remote-resources.md" %}}

The Process method returns a new resource from a processable image according to the given processing specification.

Note

Use the reflect.IsImageResourceProcessable function to verify that an image can be processed.

Usage

This versatile method supports the full range of image transformations including resizing, cropping, rotation, and format conversion within a single specification string. Unlike specialized methods such as Resize or Crop, you must explicitly include the action in the specification if you are changing the image dimensions.

{{ with resources.Get "images/original.jpg" }}
  {{ with .Process "crop 200x200 TopRight webp q50" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

In the example above, "crop 200x200 TopRight webp q50" is the processing specification.

You can also use this method to apply simple transformations such as rotation and conversion:

{{/* Rotate 90 degrees counter-clockwise. */}}
{{ $image := $image.Process "r90" }}

{{/* Convert to WebP. */}}
{{ $image := $image.Process "webp" }}

The Process method is also available as a filter. This is more effective if you need to apply multiple filters to an image. See images.Process.

{{% include "/_common/methods/resource/processing-spec.md" %}}

Example

{{ with resources.Get "images/original.jpg" }}
  {{ with .Process "crop 200x200 TopRight webp q50" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

{{< img src="images/examples/zion-national-park.jpg" alt="Zion National Park" filter="Process" filterArgs="crop 200x200 TopRight webp q50" example=true

}}