Back to Hugo

Fill

docs/content/en/methods/resource/Fill.md

0.161.11.4 KB
Original Source

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

The Fill 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

When filling, you must provide both width and height (such as 500x200) within the specification. Fill maintains the original aspect ratio by resizing the image to cover the target area and cropping any overflowing pixels based on the anchor provided.

go-html-template
{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "500x200 TopRight" }}
    
  {{ end }}
{{ end }}

In the example above, "500x200 TopRight" is the _processing specification.

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

Example

go-html-template
{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "500x200 TopRight" }}
    
  {{ end }}
{{ end }}

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

}}