mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
c305e44f5f
2fc775dec Fix allLanguages code dc6bfbedb Fix header level 6d652458c Fixed typo in docs. 2da6518be Fix broken build in previous commit eabe7a40b Move some release notes to bundles to test the resource setup 34f2a41f2 Add featured image to news articles bba1104b8 Update index.md 62bb8d826 Bundless > bundles afea67773 Release notes spelling f66d13af2 Release Hugo 0.35 613c50cdd releaser: Add release notes to /docs for release of 0.35 c9f7fd637 releaser: Bump versions for release of 0.35 360296c34 docs: Regenerate CLI docs 0d688633f Merge commit '337d0c5f516ee085205e8abefdb7f87e6d33ca05' 8fc9e325b command: Remove undraft command f8cc6d51f docs: Re-generate CLI docs 556ea887a releaser: Prepare repository for 0.35-DEV git-subtree-dir: docs git-subtree-split: 2fc775dece2c5a76aaa3855b6dd054fd74c8738d
141 lines
No EOL
3.9 KiB
Markdown
141 lines
No EOL
3.9 KiB
Markdown
---
|
|
title: "Image Processing"
|
|
description: "Image Page resources can be resized and cropped."
|
|
date: 2018-01-24T13:10:00-05:00
|
|
lastmod: 2018-01-26T15:59:07-05:00
|
|
linktitle: "Image Processing"
|
|
categories: ["content management"]
|
|
keywords: [bundle,content,resources,images]
|
|
weight: 4004
|
|
draft: false
|
|
toc: true
|
|
menu:
|
|
docs:
|
|
parent: "content-management"
|
|
weight: 32
|
|
---
|
|
|
|
## The Image Page Resource
|
|
|
|
The `image` is a [Page Resource]({{< relref "content-management/page-resources" >}}), and the processing methods listed below does not work on images inside your `/static` folder.
|
|
|
|
|
|
To get all images in a [Page Bundle]({{< relref "content-management/organization#page-bundles" >}}):
|
|
|
|
|
|
```html
|
|
{{ with .Resources.ByType "image" }}
|
|
{{ end }}
|
|
|
|
```
|
|
|
|
## Image Processing Methods
|
|
|
|
|
|
The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options.
|
|
|
|
Resize
|
|
: Resizes the image to the specified width and height.
|
|
|
|
```go
|
|
// Resize to a width of 600px and preserve ratio
|
|
{{ $image := $resource.Resize "600x" }}
|
|
|
|
// Resize to a height of 400px and preserve ratio
|
|
{{ $image := $resource.Resize "x400" }}
|
|
|
|
// Resize to a width 600px and a height of 400px
|
|
{{ $image := $resource.Resize "600x400" }}
|
|
```
|
|
|
|
Fit
|
|
: Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.
|
|
|
|
```go
|
|
{{ $image := $resource.Fit "600x400" }}
|
|
```
|
|
|
|
Fill
|
|
: Resize and crop the image to match the given dimensions. Both height and width are required.
|
|
|
|
```go
|
|
{{ $image := $resource.Fill "600x400" }}
|
|
```
|
|
|
|
|
|
{{% note %}}
|
|
Image operations in Hugo currently **do not preserve EXIF data** as this is not supported by Go's [image package](https://github.com/golang/go/search?q=exif&type=Issues&utf8=%E2%9C%93). This will be improved on in the future.
|
|
{{% /note %}}
|
|
|
|
|
|
## Image Processing Options
|
|
|
|
In addition to the dimensions (e.g. `600x400`), Hugo supports a set of additional image options.
|
|
|
|
|
|
JPEG Quality
|
|
: Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
|
|
|
|
```go
|
|
{{ $image.Resize "600x q50" }}
|
|
```
|
|
|
|
Rotate
|
|
: Rotates an image by the given angle counter-clockwise. The rotation will be performed first to get the dimensions correct. The main use of this is to be able to manually correct for [EXIF orientation](https://github.com/golang/go/issues/4341) of JPEG images.
|
|
|
|
```go
|
|
{{ $image.Resize "600x r90" }}
|
|
```
|
|
|
|
Anchor
|
|
: Only relevant for the `Fill` method. This is useful for thumbnail generation where the main motive is located in, say, the left corner.
|
|
Valid are `Center`, `TopLeft`, `Top`, `TopRight`, `Left`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`.
|
|
|
|
```go
|
|
{{ $image.Fill "300x200 BottomLeft" }}
|
|
```
|
|
|
|
Resample Filter
|
|
: Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling.
|
|
|
|
Examples are: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`.
|
|
|
|
See https://github.com/disintegration/imaging for more. If you want to trade quality for faster processing, this may be a option to test.
|
|
|
|
```go
|
|
{{ $image.Resize "600x400 Gaussian" }}
|
|
```
|
|
|
|
## Image Processing Examples
|
|
|
|
_The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pedersen](https://commons.wikimedia.org/wiki/User:Bep) (Creative Commons Attribution-Share Alike 4.0 International license)_
|
|
|
|
|
|
{{< imgproc sunset Resize "300x" />}}
|
|
|
|
{{< imgproc sunset Fill "90x120 left" />}}
|
|
|
|
{{< imgproc sunset Fill "90x120 right" />}}
|
|
|
|
{{< imgproc sunset Fit "90x90" />}}
|
|
|
|
{{< imgproc sunset Resize "300x q10" />}}
|
|
|
|
|
|
This is the shortcode used in the examples above:
|
|
|
|
|
|
{{< code file="layouts/shortcodes/imgproc.html" >}}
|
|
{{< readfile file="layouts/shortcodes/imgproc.html" >}}
|
|
{{< /code >}}
|
|
|
|
And it is used like this:
|
|
|
|
```html
|
|
{{</* imgproc sunset Resize "300x" /*/>}}
|
|
```
|
|
|
|
|
|
{{% note %}}
|
|
**Tip:** Note the self-closing shortcode syntax above. The `imgproc` shortcode can be called both with and without **inner content**.
|
|
{{% /note %}} |