Медиа⚓︎

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

Grav использует систему интеллектуального кэширования, которая при необходимости автоматически создает в кэше копии динамически генерируемых носителей. Таким образом, все последующие запросы могут использовать кэшированную версию вместо того, чтобы создавать мультимедиа заново.

Поддерживаемые медиафайлы⚓︎

Следующие типы медиафайлов изначально поддерживаются Grav. Дополнительная поддержка мультимедийных файлов и потоковых вставок может быть добавлена ​​через плагины.

Полный список поддерживаемых типов MimeType можно найти в файле system/config/media.yaml. Если есть тип mime, который в настоящее время не поддерживается, вы можете просто создать свой собственный user/config/media.yaml и добавить его туда. Просто убедитесь, что вы используете тот же формат, что и исходный файл system. Самый простой подход — скопировать весь исходный файл и внести необходимые изменения.

Месторасположение медиафайлов⚓︎

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

![my image](image.jpg)

Если вы хотите поместить все изображения в одну папку, вы можете поместить их в папку user/pages/images. Таким образом, в Twig вы сможете связаться с ними через:

{% set my_image = page.find('/images').media['my-image.jpg'] %}

а также вы можете легко найти их с помощью Markdown и выполнить с ними операции:

![my image](/images/my-image.jpg?cropResize=300,300)

В качестве альтернативы вы можете поместить их в свою тему, так как это легко доступно через ссылки CSS или из файла разметки с помощью потока theme://:

![my image](theme://images/theme-image.jpg)

Другой вариант - user/images, где вы можете использовать поток image:// для доступа к ним:

![my image](image://my-image.jpg)

Фактически вы можете использовать любой поток, включая любую папку внутри user/ через поток user://:

![my image](user://themes/mytheme/images/my-image.jpg)

Вы также можете делать то же самое с помощью объекта Twig Media:

{{ media['user://themes/mytheme/images/my-image.jpg'].html()|raw }}

Вы также можете поместить все медиафайлы в отдельную папку, чтобы все они были доступны за один раз. Например, вы можете захотеть сохранить все свои MP3-файлы в папке user/pages/mp3s (не отображается) и поместить имя MP3-файла, связанного с определенной страницей, в поле заголовка, называемое thistrack. Если вы затем захотите получить доступ к файлу для определенной страницы и воспроизвести его с помощью аудиоэлемента HTML5, вам понадобится следующий код:

<audio controls>
  <source src="{{ page.find('/mp3s').media[page.header.thistrack~'.mp3']|e }}">
</audio>

Режимы отображения⚓︎

Grav предоставляет несколько различных режимов отображения для каждого типа медиа-объекта.

Расположение эскиза⚓︎

Grav будет искать ваши эскизы в трех местах.

1. В той же папке, что и мультимедийный файл: [media-name].[media-extension].thumb.[thumb-extension] где media-name и media-extension - это соответственно имя и расширение исходного медиафайла, а thumb-extension - это любое расширение, поддерживаемое типом медиафайла image. Примеры: my_video.mp4.thumb.jpg и my-image.jpg.thumb.png. Только для изображений! Сама картинка будет использована в качестве эскиза.
2. Ваша пользовательская папка: user/images/media/thumb-[media-extension].png, где media-extension - это расширение исходного медиафайла. Примеры: thumb-mp4.png и thumb-jpg.jpg.
3. Системная папка: system/images/media/thumb-[media-extension].png, где media-extension - это расширение исходного медиафайла. Эскизы в системных папках предоставлены Grav заранее.

Ссылки и лайтбоксы⚓︎

Вышеупомянутые режимы отображения также можно использовать в сочетании со ссылками и лайтбоксов, которые будут объяснены более подробно позже. Однако важно отметить следующее:

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

Общие действия⚓︎

Grav использует паттерн Строитель при работе с медиа, поэтому вы можете выполнять несколько действий с определённым медиа. Некоторые действия доступны для каждого вида среды, в то время как другие зависят от конкретной среды.

Эти действия доступны для всех типов медиа.

url⚓︎

Это возвращает необработанный URL-путь к медиа.

{{ page.media['sample-image.jpg'].url|e }}

/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg

html⚓︎

Действие html выведет действительный HTML-тег для мультимедиа в зависимости от текущего режима отображения.

![Some ALT text](sample-image.jpg?classes=myclass "My title")

{{ page.media['sample-image.jpg'].html('My title', 'Some ALT text', 'myclass')|raw }}

<img title="My title" alt="Some ALT text" class="myclass" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" />

display⚓︎

Используйте это действие для переключения между различными режимами отображения, которые предоставляет Grav. Как только вы переключите режим отображения, все предыдущие действия будут сброшены. Исключениями из этого правила являются действия lightbox и link, а также любые действия, которые использовались до этих двух.

Например, эскиз, полученный в результате вызова page.media['sample-image.jpg'].sepia().display('thumbnail').html(), не будет иметь примененного действия sepia(), но page.media['sample-image.jpg'].display('thumbnail').sepia().html() будет применено действие sepia().

link⚓︎

Превратите свой медиа-объект в ссылку. Все действия, которые вы вызываете до link(), будут применены к цели ссылки, в то время как любые действия, вызываемые после, будут применены к тому, что отображается на вашей странице.

В следующем примере будет отображена текстовая ссылка (display('text')) на версию файла sample-image.jpg сепии:

![Image link](sample-image.jpg?sepia&link&display=text)

{{ page.media['sample-image.jpg'].sepia().link().display('text').html('Image link')|raw }}

<a href="/images/3/7/7/1/c/3771c3fabb6d7bc0035dd119281718f9143c4653-sample-image.jpg"><img title="Image link" alt="" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" /></a>

Только Cache⚓︎

Grav можно настроить на кэширование всех файлов изображений, это может увеличить скорость обслуживания файлов. Тем не менее, изображения будут проходить через систему манипулирования изображениями Grav, что может привести к значительно большему размеру файла для изображений, которые уже были оптимизированы до Grav. Манипуляции с изображениями можно обойти.

Включите cache_all в system/config/system.yaml

images:
  default_image_quality: 85
  cache_all: false

Отключите манипуляцию с изображениями с помощью параметра cache.

![](sample-image.jpg?cache)

{{ page.media['sample-image.jpg'].cache.html()|raw }}

<img alt="" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" />

lightbox⚓︎

Действие лайтбокса по сути такое же, как действие ссылки, но с некоторыми дополнениями. Как объяснялось выше (Ссылки и лайтбоксы), действие лайтбокса не будет делать ничего, кроме создания ссылки с некоторыми дополнительными атрибутами. Он отличается от действия ссылки тем, что добавляет атрибут rel="lightbox" и принимает атрибуты width и height.

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

![Sample Image](sample-image.jpg?lightbox=600,400&resize=200,200)

{{ page.media['sample-image.jpg'].lightbox(600,400).resize(200,200).html('Sample Image')|raw }}

<a rel="lightbox" data-width="600" data-height="400" href="/images/b/5/e/b/3/b5eb31744b96349b1a711697692b897624202cb1-sample-image.jpg"><img title="Sample Image" alt="" src="/images/4/5/5/e/4/455e41587c2cd25f34cfdccd8ab5078707aabe6b-sample-image.jpg" /></a>

thumbnail⚓︎

Вручную выберите миниатюру, которую должен использовать Grav. Вы можете выбрать между page и default для любого типа медиа, а также media для графических медиа, если вы хотите использовать сам медиаобъект в качестве миниатюры.

![Sample Image](sample-image.jpg?thumbnail=default&display=thumbnail)

{{ page.media['sample-image.jpg'].thumbnail('default').display('thumbnail').html('Sample Image')|raw }}

<img title="Sample Image" alt="" src="/system/images/media/thumb-jpg.png" />

attribute⚓︎

Это добавляет дополнительный атрибут HTML к выходным данным.

![Sample Image](sample-image.jpg?attribute=myattribute,myvalue)

{{ page.media['sample-image.jpg'].attribute('myattribute', 'myvalue').html('Sample Image')|raw }}

<img myattribute="myvalue" title="Sample Image" alt="" src="/images/a/f/2/8/f/af28f2ad724f1e05248ac8dd518b2a5789c6cd41-sample-image.jpg" />

watermark⚓︎

Действие watermark объединяет два изображения, изображение с водяным знаком и исходное изображение, в конечное изображение с водяным знаком. Это очень специфическое действие, которое требует более подробного описания, чем другие действия или фильтры. В частности, необходимо учитывать особенности поведения при объединении фильтров. Для тех, кому интересно, есть очень подробная запись в блоге о действии watermark, написанная Витом Петиром, но только на чешском языке. Однако инструкции легко понять.

![Sample Image](sample-image.jpg?watermark=user://pages/02.content/07.media/sample-watermark.png,top-left,50)

{{ page.media['sample-image.jpg'].watermark('user://pages/02.content/07.media/sample-watermark.png','top-left',50).html()|raw }}

decoding⚓︎

Атрибуция декодирования изображений дает авторам возможность контролировать, когда браузер должен начать декодирование ресурса. Значением атрибута декодирования может быть одно из следующих значений: auto (по умолчанию), sync, async. Значение может быть установлено в system.images.defaults.decoding как значение по умолчанию или для каждого изображения md с ?decoding=async Если выбрано значение auto, атрибут decoding не добавляется, и браузер сам определит, какую стратегию использовать.

Использование значения по умолчанию, как определено в config.system.images.defaults.decoding⚓︎

{{ page.media['sample-image.jpg'].decoding.html('Sample Image')|raw }}

Использование явного значения⚓︎

![Sample Image](sample-image.jpg?decoding=async)

{{ page.media['sample-image.jpg'].decoding('async').html('Sample Image')|raw }}

<img decoding="async" title="Sample Image" alt="" src="/images/e/f/1/0/5/ef10554cd3a99f2e65136e79dce170d4f8a7a1b9-sample-image.jpg" />

Действия с изображениями⚓︎

resize⚓︎

Изменение размера делает именно то, что вы ожидаете. resize позволяет вам создать новое изображение на основе «ширины» и «высоты». Соотношение сторон сохраняется, и новое изображение будет содержать пустые области необязательного цвета фона, представленного как «шестнадцатеричное значение», например 0xffffff. Параметр фона является необязательным, и, если он не указан, по умолчанию будет установлено значение прозрачное, если изображение в формате PNG, или белое, если оно в формате JPEG.

![Sample Image](sample-image.jpg?resize=400,200)

{{ page.media['sample-image.jpg'].resize(400, 200).html()|raw }}

forceResize⚓︎

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

![Sample Image](sample-image.jpg?forceResize=200,300)

{{ page.media['sample-image.jpg'].forceResize(200, 300).html()|raw }}

cropResize⚓︎

cropResize изменяет размер изображения до меньшего или большего размера в зависимости от ширины и высоты. Соотношение сторон сохраняется, и размер нового изображения будет изменен, чтобы поместиться в ограничивающей рамке, как описано с помощью предоставленных width и height. Другими словами, любая область фона, которую вы видите при обычном изменении размера, обрезается.

Например, если у вас есть изображение размером 640 x 480 и вы выполняете над ним действие cropResize(100, 100), вы получите изображение размером 100 x75.

![Sample Image](sample-image.jpg?cropResize=300,300)

{{ page.media['sample-image.jpg'].cropResize(300, 300).html()|raw }}

crop⚓︎

crop не изменит размер изображения вообще, он просто обрежет исходное изображение так, чтобы только часть ограничивающего прямоугольника, описываемая значениями width и height, происходила из местоположений x и y и использовалась для создания нового изображения.

Например, изображение размером 640 x 480 с crop(0, 0, 400, 100) создаст изображение шириной 400 и высотой 100, исходящее из левого верхнего угла (0, 0).

![Sample Image](sample-image.jpg?crop=100,100,300,200)

{{ page.media['sample-image.jpg'].crop(100,100,300,200).html()|raw }}

cropZoom⚓︎

Подобно обычному cropResize, cropZoom также принимает значения width и height, но изменяет размер и обрезает изображение, чтобы в результате был получен именно тот размер, который вы запрашивали. Соотношение сторон сохраняется, но части изображения могут быть обрезаны, однако результирующее изображение будет центрировано.

При использовании cropZoom размер изображения изменяется так, что фон не виден, а дополнительная область изображения за пределами нового размера изображения обрезается.

Например, если у вас есть изображение размером 640 x480 и вы выполняете действие cropZoom(400, 100), результирующее изображение будет изменено до 400 x 300, а затем будет обрезана высота. В результате получается изображение 400 x 100.

![Sample Image](sample-image.jpg?cropZoom=600,200)

{{ page.media['sample-image.jpg'].cropZoom(600,200).html()|raw }}

quality⚓︎

Динамически позволяет установить значение процента сжатия для изображения от 0 до 100. Меньшее число означает меньшее качество, где 100 означает максимальное качество.

![Sample Image](sample-image.jpg?cropZoom=300,200&quality=25)

{{ page.media['sample-image.jpg'].cropZoom(300,200).quality(25).html()|raw }}

negate⚓︎

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

![Sample Image](sample-image.jpg?cropZoom=300,200&negate)

{{ page.media['sample-image.jpg'].cropZoom(300,200).negate.html()|raw }}

brightness⚓︎

Применяет фильтр яркости к изображению со значением от -255 до +255. Большие отрицательные числа сделают изображение темнее, а большие положительные числа сделают изображение ярче.

![Sample Image](sample-image.jpg?cropZoom=300,200&brightness=-100)

{{ page.media['sample-image.jpg'].cropZoom(300,200).brightness(-100).html()|raw }}

contrast⚓︎

Это применяет фильтр контраста к изображению со значением от -100 до +100. Большие отрицательные числа увеличивают контраст, а большие положительные числа уменьшают контраст.

![Sample Image](sample-image.jpg?cropZoom=300,200&contrast=-50)

{{ page.media['sample-image.jpg'].cropZoom(300,200).contrast(-50).html()|raw }}

grayscale⚓︎

Это обрабатывает изображение с помощью фильтра оттенков серого.

![Sample Image](sample-image.jpg?cropZoom=300,200&grayscale)

{{ page.media['sample-image.jpg'].cropZoom(300,200).grayscale.html()|raw }}

emboss⚓︎

Это обрабатывает изображение с помощью фильтра тиснения.

![Sample Image](sample-image.jpg?cropZoom=300,200&emboss)

{{ page.media['sample-image.jpg'].cropZoom(300,200).emboss.html()|raw }}

smooth⚓︎

Это применяет фильтр сглаживания к изображению на основе параметра сглаживания value от -10 до 10.

![Sample Image](sample-image.jpg?cropZoom=300,200&smooth=5)

{{ page.media['sample-image.jpg'].cropZoom(300,200).smooth(5).html()|raw }}

sharp⚓︎

Это применяет фильтр повышения резкости к изображению.

![Sample Image](sample-image.jpg?cropZoom=300,200&sharp)

{{ page.media['sample-image.jpg'].cropZoom(300,200).sharp.html()|raw }}

edge⚓︎

Это применяет фильтр обнаружения краев к изображению.

![Sample Image](sample-image.jpg?cropZoom=300,200&edge)

{{ page.media['sample-image.jpg'].cropZoom(300,200).edge.html()|raw }}

colorize⚓︎

Вы можете раскрасить изображение на основе настройки значений red, green и blue для изображения от -255 до +255 для каждого цвета.

![Sample Image](sample-image.jpg?cropZoom=300,200&colorize=100,-100,40)

{{ page.media['sample-image.jpg'].cropZoom(300,200).colorize(100,-100,40).html()|raw }}

sepia⚓︎

Это применяет фильтр сепии к изображению для создания винтажного вида.

![Sample Image](sample-image.jpg?cropZoom=300,200&sepia)

{{ page.media['sample-image.jpg'].cropZoom(300,200).sepia.html()|raw }}

gaussianBlur⚓︎

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

![Sample Image](sample-image.jpg?gaussianBlur=3)

{{ page.media['sample-image.jpg'].gaussianBlur(3).html()|raw }}

rotate⚓︎

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

![Sample Image](sample-image.jpg?cropZoom=300,200&rotate=-90)

{{ page.media['sample-image.jpg'].cropZoom(300,200).rotate(-90).html()|raw }}

flip⚓︎

Переворачивает изображение в заданном направлении. Оба параметра могут иметь значение 0|1. Оба значения 0 эквивалентны отсутствию переворачивания в любом направлении.

![Sample Image](sample-image.jpg?cropZoom=300,200&flip=0,1)

{{ page.media['sample-image.jpg'].cropZoom(300,200).flip(0,1).html()|raw }}

fixOrientation⚓︎

Исправляет ориентацию изображения при повороте через данные EXIF ​​(применимо к изображениям jpeg, снятым с помощью телефонов и камер).

![Sample Image](sample-image.jpg?fixOrientation)

{{ page.media['sample-image.jpg'].fixOrientation().html()|raw }}

loading⚓︎

Атрибут loading на изображениях дает авторам контроль над тем, когда браузер должен начать загрузку ресурса. Значение этого атрибута может быть одним из следующих auto (по умолчанию), lazy, eager. Значение может быть установлено в system.images.defaults.load в качестве значения по умолчанию, или в качестве значения для изображения в разметке Markdown с помощью параметра ?loading=lazy Когда выбрано значение auto, атрибут loading не добавляется и браузер определит, какую стратегию использовать.

![Sample Image](sample-image.jpg?loading=lazy)

{# Использование значения по умолчанию, как определено в 'config.system.images.defaults.loading' #}
{{ page.media['sample-image.jpg'].loading.html('Sample Image')|raw }}

{# Использование явного значения #}
{{ page.media['sample-image.jpg'].loading('lazy').html('Sample Image')|raw }}

<img loading="lazy" title="Sample Image"  src="/images/e/f/1/0/5/ef10554cd3a99f2e65136e79dce170d4f8a7a1b9-sample-image.jpg" />

Действия с объектами⚓︎

resize⚓︎

Поскольку PHP не может обрабатывать динамическое изменение размера этих типов носителей, действие resize будет только гарантировать, что атрибут width и height или data-width и data-height установлены в вашем теге <img>/<video> или <a> соответственно. Это означает, что ваше изображение или видео будет отображаться в требуемом размере, но фактическое изображение или видеофайл не будут преобразованы каким-либо образом.

![Sample Trailer](sample-trailer.mov?resize=400,200)

{{ page.media['sample-trailer.mov'].resize(400, 200).html('Sample Trailer') }}

<video controls="1" style="width: 400px;height: 200px;" title="Sample Trailer" alt=""><source src="/user/pages/02.content/07.media/sample-trailer.mov?loading=auto">Your browser does not support the video tag.</video>

Примеры⚓︎

Некоторые примеры этого:

![Sample Vector](sample-vector.svg?resize=300,300)

![Animated Gif](sample-animated.gif?resize=300,300)

![Sample Trailer](sample-trailer.mov?resize=400,200)

Действия с аудио⚓︎

Аудио медиа будет отображать аудио ссылку HTML5:

![Hal 9000: I'm Sorry Dave](hal9000.mp3)

{{ page.media['hal9000.mp3'].html()|raw }}

controls⚓︎

Позволяет явно устанавливать или удалять элементы управления HTML5 по умолчанию. Передача 0 скрывает элементы управления браузером для воспроизведения, громкости и т. д.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?controls=0)

{{ page.media['hal9000.mp3'].controls(0)|raw }}

<audio controls="0" title="Hal 9000: I'm Sorry Dave"><source src="pages/02.content/07.media/hal9000.mp3">Your browser does not support the audio tag.</audio>

preload⚓︎

Отвечает за предварительную загрузку контента, по умолчанию auto. Допустимые параметры: auto, metadata и none.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?preload=metadata)

{{ page.media['hal9000.mp3'].preload('metadata')|raw }}

autoplay⚓︎

Позволяет установить, будет ли аудио воспроизводиться автоматически при загрузке страницы. Если не задано, по умолчанию используется false.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?autoplay=1)

{{ page.media['hal9000.mp3'].autoplay(1)|raw }}

controlsList⚓︎

Позволяет установить свойство controlsList, которое принимает одно или несколько из трех возможных значений: nodownload, nofullscreen и noremoteplayback.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?controlsList=nodownload-nofullscreen-noremoteplayback)

{{ page.media['hal9000.mp3'].controlsList('nodownload nofullscreen noremoteplayback')|raw }}

muted⚓︎

Позволяет установить, будет ли звук отключен при загрузке. Если не задано, по умолчанию используется false.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?muted=1)

{{ page.media['hal9000.mp3'].muted(1)|raw }}

loop⚓︎

Позволяет установить, будет ли звук зацикливаться после завершения воспроизведения. Если не задано, по умолчанию используется false.

![Hal 9000: I'm Sorry Dave](hal9000.mp3?loop=1)

{{ page.media['hal9000.mp3'].loop(1)|raw }}

Действия с файлами⚓︎

На данный момент Grav не предоставляет никаких настраиваемых действий с файлами, и мы не планируем их добавлять. Если вы что-то придумаете, свяжитесь с нами.

[Текстовый файл](acronyms.txt)

<a href="{{ page.media['acronyms.txt'].url()|raw }}">Текстовый файл</a>

Текстовый файл

Комбинации⚓︎

Как видите: Grav предоставляет несколько мощных функций для работы с изображениями, которые упрощают работу с изображениями! Настоящая сила приходит, когда вы комбинируете несколько эффектов и производите очень сложные динамические манипуляции с изображениями. Например, это абсолютно верно:

![Sample Image](sample-image.jpg?negate&lightbox&cropZoom=200,200)

{{ page.media['sample-image.jpg'].negate.lightbox.cropZoom(200,200)|raw }}

Сброс нескольких вызовов на одно и то же изображение⚓︎

Когда вы обращаетесь к одному и тому же изображению несколько раз на одной странице, действия, которые вы предоставили для изображения, не сбрасываются по умолчанию. Поэтому, если вы измените размер изображения и выведите HTML-код, а затем на той же странице просто выведите URL-адрес изображения, вы также получите URL-адрес измененного изображения. Вы, вероятно, ожидали URL-адрес исходного изображения.

Чтобы бороться с этим, вы можете сбросить действия с изображениями, передав false методу url():

{% for item in page.header.gallery %}
    {% set image = page.media[item.src].cropZoom(800, 600).quality(70) %}
    <a href="{{ image.url(false) }}">
      <img src="{{ image.url }}" alt="{{ item.alt }}" title="{{ item.title }}" />
    </a>
{% endfor %}

Адаптивные изображения⚓︎

Дисплеи с более высокой плотностью⚓︎

Grav имеет встроенную поддержку отзывчивых изображений для дисплеев с более высокой плотностью (например, экранов Retina). Grav выполняет это с помощью атрибута srcset в HTML элементе изображения. Хорошая статья для чтения, если вы хотите лучше понять это, - сообщение в блоге Эрика Портиса.

Чтобы начать использовать адаптивные изображения, всё, что вам нужно сделать, это добавить на свои страницы изображения с более высокой плотностью, добавив суффикс к имени файла. Если вы предоставляете только изображения с более высокой плотностью, Grav автоматически сгенерирует для вас версии более низкого качества. Именование работает следующим образом: [image-name]@[density-ratio]x.[Image-extension], поэтому, например, добавление sample-image@3x.jpg на вашу страницу приведет к тому, что Grav создаст 2x и версию 1x (обычного размера) по умолчанию.

Предположим, у вас есть файл с именем retina@2x.jpg, вы на самом деле укажете его в своих ссылках как retina.jpg, и тогда Grav не найдет это изображение и начнет искать размеры изображения. Он найдет retina@2x.jpg, а затем поймет, что ему нужно создать вариант @1x и отобразить соответствующий вывод srcset:

![Retina Image](retina.jpg?sizes=80vw)

{{ page.media['retina.jpg'].sizes('80vw').html()|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564-retina2x.jpg 2880w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg 1440w" sizes="80vw">

Размеры с медиа-запросами⚓︎

Grav также поддерживает медиа-запросы внутри атрибута sizes, что позволяет использовать разную ширину в зависимости от размера экрана устройства. В отличие от первого метода, вам не нужно создавать несколько изображений; они будут созданы автоматически. Резервное изображение - это текущее изображение, поэтому браузер без поддержки srcset будет отображать исходное изображение.

![Retina Image](retina.jpg?sizes=%28max-width%3A26em%29+100vw%2C+50vw)

{{ page.media['retina.jpg'].sizes('(max-width:26em) 100vw, 50vw').html('Retina Image')|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564-retina2x.jpg 2880w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg 1440w" sizes="(max-width:26em)+100vw">

Размеры с медиа-запросами с использованием производных⚓︎

Если вы хотите настроить размеры автоматически созданных файлов, вы можете использовать метод derivatives() (как показано ниже). Первый параметр — это ширина наименьшего из сгенерированных изображений. Второй — это максимальная ширина (эксклюзивная) генерируемых изображений. Третий и единственный необязательный параметр определяет интервалы, с которыми будут создаваться фотографии (по умолчанию-200). Например, если вы установите первый параметр равным 320, а третий — 100, Grav будет генерировать изображение для 320, 420, 520, 620 и так далее, пока не достигнет установленного максимума.

В нашем примере мы установили максимум в 1600. В результате будет достигнуто увеличение на 300 с 320 до 1520, так как 1620 будет выше порога.

![Retina Image](retina.jpg?derivatives=320,1600,300&sizes=%28max-width%3A26em%29+100vw%2C+50vw)

{{ page.media['retina.jpg'].derivatives(320,1600,300).sizes('(max-width:26em) 100vw, 50vw').html()|raw }}

<img alt="Retina Image" src="/images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg" srcset="/images/b/a/c/1/9/bac199ed46f9188dafad759760afd27da935e564-retina2x.jpg 2880w, /images/d/c/e/f/7/dcef77ec0cc8efd0a66851a7750b530d8bfe093a-retina320w.jpg 320w, /images/1/5/d/a/1/15da17d9989ac18738474b1fab5ff6104b96be41-retina620w.jpg 620w, /images/e/c/e/3/f/ece3fa30474b851808a485197b481d202d8f3811-retina920w.jpg 920w, /images/3/8/8/2/4/3882463d358fc22a189380da7b7d14db2a5b260a-retina1220w.jpg 1220w, /images/6/0/5/0/e/6050e7409d6040b3737b6562cdec89854cac3f9a-retina1520w.jpg 1520w, /images/3/7/f/0/c/37f0ca845b3eb054374d6a1ac2e36e13c59e14f8-retina1x.jpg 1440w" sizes="(max-width:26em)+100vw">

Ручное определение размера⚓︎

Вместо того чтобы позволить Grav генерировать размеры в четных шагах между заданными границами, вы можете вручную определить, какие размеры Grav должен генерировать:

![Retina Image](retina.jpg?derivatives=[360,720,1200])

Это сгенерирует уменьшенные версии изображения retina.jpg с разной шириной: 360, 720 и 1200px.

Метафайлы⚓︎

Каждый файл, на который вы ссылаетесь в Grav, например image1.jpg, sample-trailer.mov, или даже archive.zip имеет возможность устанавливать переменные или даже переопределять их с помощью мета-файла. Эти файлы принимают формат <filename>.meta.yaml. Например, для изображения с именем файла image1.jpg можно создать метафайл image1.jpg.meta.yaml.

С помощью этого метода вы можете добавить практически любой параметр или кусочек метаданных.

Содержимое этого файла должно быть в синтаксисе YAML, примером может быть:

image:
  filters:
    default:
      - [cropResize, 300, 300]
      - sharp
alt_text: My Alt Text

Если вы используете этот метод для добавления стиля для конкретного файла или мета-тегов для одного файла, вы захотите поместить YAML-файл в ту же папку, что и файл, на который делается ссылка. Это гарантирует, что файл будет вытянут вместе с данными YAML. Это удобный способ даже задать метаданные для конкретного файла, так как вы не можете этого сделать с самой страницы.

Допустим, вы хотели просто вытащить значение alt_text, указанное для файла изображения sample-image.jpg. Затем вы создаете файл под названием sample-image.jpg.meta.yaml и помещаете его в папку с файлом изображения, на который есть ссылка. Затем вставьте данные, использованные в примере выше, и сохраните этот YAML-файл. В файле Markdown для страницы эти данные можно отобразить, используя следующую строку:

{{ page.media['sample-image.jpg'].meta.alt_text }}

При этом вместо изображения будет вытаскиваться пример фразы My Alt Text. Это всего лишь простой пример. Вы можете использовать этот метод для ряда вещей, включая создание галереи с несколькими уникальными точками данных, на которые вы хотите ссылаться для каждого изображения. Ваши изображения, по сути, имеют набор уникальных для них данных, на которые можно легко ссылаться и вытягивать по мере необходимости.

Параметры видео⚓︎

Встроенные опции управления видео — это ещё одна из имеющихся возможностей Grav. Эти опции, добавленные в строку с именем файла, дают вам возможность определить настройки autoplay, controls и loop.

Вот пример:

![video.mov](video.mov?loop=1&controls=0&autoplay=1&muted)

Опции следующие: