CONTENT MANAGEMENT

Обработка изображений

Ресурс страницы изображения

image это ресурс страницы, и методы обработки, перечисленные ниже, не работают с изображениями внутри Вашей папки /static.

Чтобы напечатать все пути к изображениям в пакете страниц:

{{ with .Resources.ByType "image" }}
{{ range . }}
{{ .RelPermalink }}
{{ end }}
{{ end }}

Ресурс изображения

Ресурс image также может быть получен из глобального ресурса

{{- $image := resources.Get “images/logo.jpg” -}}

Методы обработки изображений

Ресурс image реализует методы Resize, Fit и Fill, каждый из которых возвращает преобразованное изображение с использованием указанных размеров и параметров обработки. Ресурс image также, начиная с Hugo 0.58, реализует методы Exif и Filter.

Изменение размера

Изменяет размер изображения до указанной ширины и высоты.

// Измените размер до 600 пикселей и сохраните пропорции
{{ $image := $resource.Resize "600x" }}

// Измените размер до 400 пикселей и сохраните пропорции
{{ $image := $resource.Resize "x400" }}

// Измените размер до ширины 600 пикселей и высоты 400 пикселей
{{ $image := $resource.Resize "600x400" }}

Соответствие

Уменьшите масштаб изображения до заданных размеров, сохранив соотношение сторон. Требуются как высота, так и ширина.

{{ $image := $resource.Fit "600x400" }}

Заполнение

Измените размер и обрежьте изображение, чтобы оно соответствовало заданным размерам. Требуются как высота, так и ширина.

{{ $image := $resource.Fill "600x400" }}

Фильтр

Примените к изображению один или несколько фильтров. Смотрите полный список фильтров изображений.

{{ $img = $img.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

Вышеупомянутое также можно написать в более функциональном стиле с помощью каналов:

{{ $img = $img | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

Фильтры будут применяться в указанном порядке.

Иногда бывает полезно создать цепочку фильтров один раз, а затем использовать ее повторно:

{{ $filters := slice  (images.GaussianBlur 6) (images.Pixelate 8) }}
{{ $img1 = $img1.Filter $filters }}
{{ $img2 = $img2.Filter $filters }}

Exif

Предоставляет объект Exif с метаданными об изображении.

Обратите внимание, что это поддерживается только для изображений JPEG и TIFF, поэтому рекомендуется заключить доступ с помощью with, например:

{{ with $img.Exif }}
Date: {{ .Date }}
Lat/Long: {{ .Lat}}/{{ .Long }}
Tags:
{{ range $k, $v := .Tags }}
TAG: {{ $k }}: {{ $v }}
{{ end }}
{{ end }}

Или индивидуальный доступ к данным EXIF с помощью точки, например:

{{ with $src.Exif }}
  <ul>
      {{ with .Date }}<li>Date: {{ .Format "January 02, 2006" }}</li>{{ end }}
      {{ with .Tags.ApertureValue }}<li>Aperture: {{ lang.NumFmt 2 . }}</li>{{ end }}
      {{ 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 }}

Некоторые поля, возможно, потребуется отформатировать с помощью функции lang.NumFmt, чтобы предотвратить отображение типа Aperture: 2.278934289 вместо Aperture: 2.28.

Поля Exif

Date
“фото принято” дата/время
Lat
“фото принято где”, широта GPS
Long
“фото принято где”, долгота GPS

Смотрите конфигурацию обработки изображений, чтобы узнать, как настроить то, что включается в Exif.

Параметры обработки изображений

Помимо размеров (например, 600x400), Hugo поддерживает набор дополнительных параметров изображения.

Фоновый цвет

Цвет фона для заливки слоя прозрачности. Это в основном полезно при преобразовании в формат, который не поддерживает прозрачность, например JPEG.

Вы можете установить цвет фона для использования с 3- или 6-значным шестнадцатеричным кодом, начинающимся с #.

{{ $image.Resize "600x jpg #b31280" }}

Цветовые коды смотрите на странице https://www.google.com/search?q=color+picker

Обратите внимание, что для использования также задан цвет фона по умолчанию, смотрите Конфигурацию обработки изображений.

Качество JPEG

Актуально только для изображений JPEG, значения от 1 до 100 включительно, чем выше, тем лучше. По умолчанию 75.

{{ $image.Resize "600x q50" }}

Поворот

Поворачивает изображение на заданный угол против часовой стрелки. Сначала будет выполнено вращение, чтобы получить правильные размеры. Основное использование этого - возможность вручную корректировать ориентацию EXIF изображений JPEG.

{{ $image.Resize "600x r90" }}

Якорь

Актуально только для метода Fill. Это полезно для создания миниатюр, когда основной мотив расположен, скажем, в левом углу.

Допустимые значения: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.

Значение по умолчанию - Smart, которое использует Smartcrop для определения наилучшей обрезки.

{{ $image.Fill "300x200 BottomLeft" }}

Фильтр передискретизации

Фильтр, используемый при изменении размера. По умолчанию используется Box, простой и быстрый фильтр передискретизации, подходящий для уменьшения масштаба.

Примеры: Box, NearestNeighbor, Linear, Gaussian.

Смотрите https://github.com/disintegration/imaging для получения дополнительной информации. Если Вы хотите обменять качество на более быструю обработку, это может быть вариантом для тестирования.

{{ $image.Resize "600x400 Gaussian" }}

Целевой формат

По умолчанию изображения кодируются в исходном формате, но Вы можете установить целевой формат в качестве опции.

Допустимые значения: jpg, png, tif, bmp и gif.

{{ $image.Resize "600x jpg" }}

Примеры обработки изображений

Фотография заката, используемая в приведенных ниже примерах, принадлежит авторскому праву Bjørn Erik Pedersen (Creative Commons Attribution-Share Alike 4.0 Международная лицензия)

.Resize "300x"
.Fill "90x120 left"
.Fill "90x120 right"
.Fit "90x90"
.Resize "300x q10"

Это шорткод, использованный в приведенных выше примерах:

layouts/shortcodes/imgproc.html

{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 }}
{{ $options := .Get 2 }}
{{ if eq $command "Fit"}}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ else if eq $command "Resize"}}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
{{ .Scratch.Set "image" ($original.Fill $options) }}
{{ else }}
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
	<img style="max-width: 100%; width: auto; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
	<figcaption>
	<small>
	{{ with .Inner }}
	{{ . }}
	{{ else }}
	.{{ $command }} "{{ $options }}"
	{{ end }}
	</small>
	</figcaption>
</figure>

И используется он так:

{{< imgproc sunset Resize "300x" />}}

Конфигурация обработки изображений

Вы можете настроить раздел imaging в config.toml с параметрами обработки изображений по умолчанию:

[imaging]
# Фильтр передискретизации по умолчанию, используемый для изменения размера.
# По умолчанию это Box, простой и быстрый фильтр усреднения, подходящий для уменьшения масштаба.
# Смотрите https://github.com/disintegration/imaging
resampleFilter = "box"

# Настройка качества JPEG по умолчанию. По умолчанию 75.
quality = 75

# Якорь, используемый при обрезке изображений.
# По умолчанию - "smart", который выполняет Smart Cropping, используя https://github.com/muesli/smartcrop
# Smart Cropping учитывает контент и пытается найти лучший урожай для каждого изображения.
# Допустимые значения: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"

# Цвет фона по умолчанию.
# Hugo сохранит прозрачность для целевых форматов, которые ее поддерживают,
# но вернется к этому цвету для JPEG.
# Ожидает стандартную цветовую строку HEX из 3 или 6 цифр.
# Смотрите https://www.google.com/search?q=color+picker
bgColor = "#ffffff"

[imaging.exif]
# Регулярное выражение, соответствующее полям, которые Вы хотите исключить из
# (огромного) набора доступной информации Exif. Поскольку мы кэшируем эту информацию
# на диск, это больше всего связано с производительностью и дисковым пространством.
# Если Вы хотите все это, поместите ".*" В эту настройку конфигурации.
# Обратите внимание, что если ни this, ни ExcludeFields не установлены,
# Hugo вернет небольшой набор по умолчанию.
includeFields = ""

# Регулярное выражение, соответствующее полям Exif, которые Вы хотите исключить.
# Это может быть проще использовать, чем Включить поля выше, в зависимости от того, что Вы хотите.
excludeFields = ""

# Hugo по умолчанию извлекает дату/время "сделанной фотографии" в .Date.
# Установите значение true, чтобы выключить его.
disableDate = false

# Hugo извлекает "фото, где было сделано" (широта и долгота GPS)
# в .Long и .Lat. Установите значение true, чтобы выключить его.
disableLatLong = false

Умная обрезка изображений

По умолчанию Хьюго будет использовать Smartcrop, библиотеку, созданную muesli, при кадрировании изображений с помощью .Fill. Вы можете установить точку привязки вручную, но в большинстве случаев разумный вариант будет хорошим выбором. И мы будем работать с автором библиотеки, чтобы улучшить это в будущем.

Пример использования изображения заката сверху:

.Fill "200x200 smart"

Рассмотрение производительности обработки изображений

Обработанные изображения хранятся в каталоге <project-dir>/resources (можно установить с помощью параметра конфигурации resourceDir). Эта папка намеренно помещена в проект, так как рекомендуется регистрировать их в системе управления версиями как часть проекта. Эти изображения не создаются “очень быстро”, но после создания их можно использовать повторно.

Если Вы измените настройки изображения (например, размер), удалите или переименуете изображения и т.д., Вы получите неиспользуемые изображения, занимающие место и загромождающие Ваш проект.

Чтобы очистить, запустите:

hugo --gc

Смотрите также

“Обработка изображений” последнее обновление: December 26, 2020: Перевод части content-management (38cdf5e5e)
Улучшить эту страницу