TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-09-14 10:44:43 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve image metadata formatting (#1067)

Browse Source 
* Improve image metadata formatting

* Use lang.NumFmt instead of printf for number formatting
This commit is contained in:
Caleb Jasik 2020-03-31 13:32:03 -05:00 committed by GitHub
parent c569f36572
commit 58f53654d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
content/en/content-management/image-processing/index.md
View File

@ -4,7 +4,7 @@ description: "Image Page resources can be resized and cropped."
date: 2018-01-24T13:10:00-05:00 date: 2018-01-24T13:10:00-05:00
linktitle: "Image Processing" linktitle: "Image Processing"
categories: ["content management"] categories: ["content management"]
keywords: [resources,images] keywords: [resources, images]
weight: 4004 weight: 4004
draft: false draft: false
toc: true toc: true
@ -28,7 +28,6 @@ To get all images in a [Page Bundle]({{< relref "/content-management/organizatio
## Image Processing Methods ## 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. The `image` resource also, since Hugo 0.58, implements the method `Exif` and `Filter`. The `image` resource implements the methods `Resize`, `Fit` and `Fill`, each returning the transformed image using the specified dimensions and processing options. The `image` resource also, since Hugo 0.58, implements the method `Exif` and `Filter`.
### Resize ### Resize
@ -47,6 +46,7 @@ Resizes the image to the specified width and height.
``` ```
### Fit ### Fit
Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required. Scale down the image to fit the given dimensions while maintaining aspect ratio. Both height and width are required.
```go ```go
@ -54,6 +54,7 @@ Scale down the image to fit the given dimensions while maintaining aspect ratio.
``` ```
### Fill ### Fill
Resize and crop the image to match the given dimensions. Both height and width are required. Resize and crop the image to match the given dimensions. Both height and width are required.
```go ```go
@ -104,14 +105,22 @@ TAG: {{ $k }}: {{ $v }}
Or individually access EXIF data with dot access, e.g.: Or individually access EXIF data with dot access, e.g.:
```go-html-template ```go-html-template
{{ with $img.Exif }} {{ with $src.Exif }}
Date: {{ .Date }} <ul>
Lat/Long: {{ .Lat }}/{{ .Long }} {{ with .Date }}<li>Date: {{ .Format "January 02, 2006" }}</li>{{ end }}
Aperture: {{ .Tags.ApertureValue }} {{ with .Tags.ApertureValue }}<li>Aperture: {{ lang.NumFmt 2 . }}</li>{{ end }}
Focal Length: {{ .Tags.FocalLength }} {{ with .Tags.BrightnessValue }}<li>Brightness: {{ lang.NumFmt 2 . }}</li>{{ end }}
{{ with .Tags.ExposureTime }}<li>Exposure Time: {{ . }}</li>{{ end }}
{{ with .Tags.FNumber }}<li>F Number: {{ . }}</li>{{ end }}
{{ with .Tags.FocalLength }}<li>Focal Length: {{ . }}</li>{{ end }}
{{ with .Tags.ISOSpeedRatings }}<li>ISO Speed Ratings: {{ . }}</li>{{ end }}
{{ with .Tags.LensModel }}<li>Lens Model: {{ . }}</li>{{ end }}
</ul>
{{ end }} {{ end }}
``` ```
Some fields may need to be formatted with [`lang.NumFmt`]({{< relref "functions/numfmt" >}}) function to prevent display like `Aperture: 2.278934289` instead of `Aperture: 2.28`.
#### Exif fields #### Exif fields
Date Date
@ -125,10 +134,6 @@ Long
See [Image Processing Config](#image-processing-config) for how to configure what gets included in Exif. See [Image Processing Config](#image-processing-config) for how to configure what gets included in Exif.
## Image Processing Options ## Image Processing Options
In addition to the dimensions (e.g. `600x400`), Hugo supports a set of additional image options. In addition to the dimensions (e.g. `600x400`), Hugo supports a set of additional image options.
@ -148,6 +153,7 @@ For color codes, see https://www.google.com/search?q=color+picker
**Note** that you also set a default background color to use, see [Image Processing Config](#image-processing-config). **Note** that you also set a default background color to use, see [Image Processing Config](#image-processing-config).
### JPEG Quality ### JPEG Quality
Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75. Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Default is 75.
```go ```go
@ -155,6 +161,7 @@ Only relevant for JPEG images, values 1 to 100 inclusive, higher is better. Defa
``` ```
### Rotate ### 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. 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 ```go
@ -162,6 +169,7 @@ Rotates an image by the given angle counter-clockwise. The rotation will be perf
``` ```
### Anchor ### 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 `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`. Valid are `Center`, `TopLeft`, `Top`, `TopRight`, `Left`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`.
@ -170,6 +178,7 @@ Valid are `Center`, `TopLeft`, `Top`, `TopRight`, `Left`, `Right`, `BottomLeft`,
``` ```
### Resample Filter ### Resample Filter
Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling. Filter used in resizing. Default is `Box`, a simple and fast resampling filter appropriate for downscaling.
Examples are: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`. Examples are: `Box`, `NearestNeighbor`, `Linear`, `Gaussian`.
@ -194,7 +203,6 @@ Valid values are `jpg`, `png`, `tif`, `bmp`, and `gif`.
_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)_ _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 Resize "300x" />}}
{{< imgproc sunset Fill "90x120 left" />}} {{< imgproc sunset Fill "90x120 left" />}}
@ -205,10 +213,8 @@ _The photo of the sunset used in the examples below is Copyright [Bjørn Erik Pe
{{< imgproc sunset Resize "300x q10" />}} {{< imgproc sunset Resize "300x q10" />}}
This is the shortcode used in the examples above: This is the shortcode used in the examples above:
{{< code file="layouts/shortcodes/imgproc.html" >}} {{< code file="layouts/shortcodes/imgproc.html" >}}
{{< readfile file="layouts/shortcodes/imgproc.html" >}} {{< readfile file="layouts/shortcodes/imgproc.html" >}}
{{< /code >}} {{< /code >}}
@ -219,7 +225,6 @@ And it is used like this:
{{</* imgproc sunset Resize "300x" /*/>}} {{</* imgproc sunset Resize "300x" /*/>}}
``` ```
{{% note %}} {{% note %}}
**Tip:** Note the self-closing shortcode syntax above. The `imgproc` shortcode can be called both with and without **inner content**. **Tip:** Note the self-closing shortcode syntax above. The `imgproc` shortcode can be called both with and without **inner content**.
{{% /note %}} {{% /note %}}
@ -281,10 +286,8 @@ By default, Hugo will use the [Smartcrop](https://github.com/muesli/smartcrop),
An example using the sunset image from above: An example using the sunset image from above:
{{< imgproc sunset Fill "200x200 smart" />}} {{< imgproc sunset Fill "200x200 smart" />}}
## Image Processing Performance Consideration ## 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. 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.
@ -297,10 +300,6 @@ To clean up, run:
hugo --gc hugo --gc
``` ```
{{% note %}} {{% note %}}
**GC** is short for **Garbage Collection**. **GC** is short for **Garbage Collection**.
{{% /note %}} {{% /note %}}