Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/gohugoio/hugo.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorJohn Elliott <johnsvenn@googlemail.com>2022-02-22 19:50:23 +0300
committerBjørn Erik Pedersen <bjorn.erik.pedersen@gmail.com>2022-02-23 12:01:50 +0300
commit7732da9f93503c1a723d6ac5bb77da206cb0fa0e (patch)
treea205fe894c5413a7dcaa6c6ad8ce64c93e61f874 /docs
parentaebde49b884c3b5ef73d8e1a01fca8a1354ac5b9 (diff)
Allow images to be cropped without being resized
Introduces the Crop method for image processing which implements gift.CropToSize. Also allows a smartCrop without resizing, and updates the documentation. Fixes #9499
Diffstat (limited to 'docs')
-rw-r--r--docs/content/en/content-management/image-processing/index.md24
-rw-r--r--docs/layouts/shortcodes/imgproc.html4
2 files changed, 21 insertions, 7 deletions
diff --git a/docs/content/en/content-management/image-processing/index.md b/docs/content/en/content-management/image-processing/index.md
index 0211f6fcd..5b8293675 100644
--- a/docs/content/en/content-management/image-processing/index.md
+++ b/docs/content/en/content-management/image-processing/index.md
@@ -39,7 +39,7 @@ The `image` resource can also be retrieved from a [global resource]({{< relref "
## Image Processing Methods
-The `image` resource implements the `Resize`, `Fit`, `Fill`, and `Filter` methods, each returning a transformed image using the specified dimensions and processing options.
+The `image` resource implements the `Resize`, `Fit`, `Fill`, `Crop`, and `Filter` methods, each returning a transformed image using the specified dimensions and processing options.
{{% note %}}
Metadata (EXIF, IPTC, XMP, etc.) is not preserved during image transformation. Use the [`Exif`](#exif) method with the _original_ image to extract EXIF metadata from JPEG or TIFF images.
@@ -70,12 +70,20 @@ Scale down the image to fit the given dimensions while maintaining aspect ratio.
### Fill
-Resize and crop the image to match the given dimensions. Both height and width are required.
+Crop and resize the image to match the given dimensions. Both height and width are required.
```go
{{ $image := $resource.Fill "600x400" }}
```
+### Crop
+
+Crop the image to match the given dimensions without resizing. Both height and width are required.
+
+```go
+{{ $image := $resource.Crop "400x400" }}
+```
+
### Filter
Apply one or more filters to your image. See [Image Filters](/functions/images/#image-filters) for a full list.
@@ -203,7 +211,7 @@ Rotates an image by the given angle counter-clockwise. The rotation will be perf
### Anchor
-Only relevant for the `Fill` method. This is useful for thumbnail generation where the main motive is located in, say, the left corner.
+Only relevant for the `Crop` and `Fill` methods. This is useful for thumbnail generation where the main motive is located in, say, the left corner.
Valid values are `Smart`, `Center`, `TopLeft`, `Top`, `TopRight`, `Left`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`.
@@ -249,6 +257,8 @@ _The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pe
{{< imgproc sunset Fit "90x90" />}}
+{{< imgproc sunset Crop "250x250 center" />}}
+
{{< imgproc sunset Resize "300x q10" />}}
This is the shortcode used in the examples above:
@@ -286,7 +296,7 @@ quality = 75
# Valid values are "picture", "photo", "drawing", "icon", or "text".
hint = "photo"
-# Anchor used when cropping pictures.
+# Anchor used when cropping pictures with either .Fill or .Crop
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
@@ -323,12 +333,14 @@ disableLatLong = false
## Smart Cropping of Images
-By default, Hugo will use [Smartcrop](https://github.com/muesli/smartcrop), a library created by [muesli](https://github.com/muesli), when cropping images with `.Fill`. You can set the anchor point manually, but in most cases the smart option will make a good choice. And we will work with the library author to improve this in the future.
+By default, Hugo will use [Smartcrop](https://github.com/muesli/smartcrop), a library created by [muesli](https://github.com/muesli), when cropping images with `.Fill` or `.Crop`. You can set the anchor point manually, but in most cases the smart option will make a good choice. And we will work with the library author to improve this in the future.
-An example using the sunset image from above:
+Examples using the sunset image from above:
{{< imgproc sunset Fill "200x200 smart" />}}
+{{< imgproc sunset Crop "200x200 smart" />}}
+
## Image Processing Performance Consideration
Processed images are stored below `<project-dir>/resources` (can be set with `resourceDir` config setting). This folder is deliberately placed in the project, as it is recommended to check these into source control as part of the project. These images are not "Hugo fast" to generate, but once generated they can be reused.
diff --git a/docs/layouts/shortcodes/imgproc.html b/docs/layouts/shortcodes/imgproc.html
index 5e02317c6..181e97f1d 100644
--- a/docs/layouts/shortcodes/imgproc.html
+++ b/docs/layouts/shortcodes/imgproc.html
@@ -7,8 +7,10 @@
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
{{ .Scratch.Set "image" ($original.Fill $options) }}
+{{ else if eq $command "Crop"}}
+{{ .Scratch.Set "image" ($original.Crop $options) }}
{{ else }}
-{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
+{{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">