Мультимедийные файлы содержат различные типы отображаемого содержимого, такие как изображения, видео и многие другие файлы. Grav автоматически находит и обрабатывает эти файлы для использования на любой странице. Используя встроенную функциональность страницы, вы можете получить доступ к метаданным и динамически изменять медиаданные.
Интеллектуальное кэширование используется Grav, который создает сгенерированные в кеше медиа при необходимости. Таким образом, все могут использовать кэшированную версию вместо того, чтобы генерировать медиа снова и снова.
Поддерживаемые медиа-файлы
Ниже приведены типы файлов мультимедиа, которые поддерживаются Grav.
-
Изображение — JPG, JPEG, PNG
-
Анимированное изображение — GIF
-
векторизованное изображение — svg
-
Видео — mp4, mov, m4v, swf
-
Данные / информация — txt, doc, pdf, html, zip, gz
Изображение — JPG, JPEG, PNG
Анимированное изображение — GIF
векторизованное изображение — svg
Видео — mp4, mov, m4v, swf
Данные / информация — txt, doc, pdf, html, zip, gz
Режимы отображения
Ниже приведены несколько типов режимов отображения в Grav —
-
Источник — это визуальное отображение изображения, видео или файла.
-
текст — текстовое представление медиафайлов.
-
thumbnail — миниатюра изображения для медиа-файла.
Источник — это визуальное отображение изображения, видео или файла.
текст — текстовое представление медиафайлов.
thumbnail — миниатюра изображения для медиа-файла.
Расположение миниатюр
Вы можете найти эскизы, используя три места —
-
В той же папке, где находятся ваши медиа-файлы — [media-name]. [Media-extension] .thumb. [Thumb-extension]; здесь media-name и media-extension являются именем и расширением фактического медиа-файла, а thumb-extension является расширением, которое поддерживается типом носителя изображения.
-
Папка пользователя — пользователь / images / media / thumb- [media-extension] .png; здесь медиа-расширение — это расширение самого медиа-файла.
-
Системная папка — system / images / media / thumb- [media-extension] .png; здесь медиа-расширение — это расширение самого медиа-файла.
В той же папке, где находятся ваши медиа-файлы — [media-name]. [Media-extension] .thumb. [Thumb-extension]; здесь media-name и media-extension являются именем и расширением фактического медиа-файла, а thumb-extension является расширением, которое поддерживается типом носителя изображения.
Папка пользователя — пользователь / images / media / thumb- [media-extension] .png; здесь медиа-расширение — это расширение самого медиа-файла.
Системная папка — system / images / media / thumb- [media-extension] .png; здесь медиа-расширение — это расширение самого медиа-файла.
Лайтбоксы и ссылки
Grav дает вывод тега привязки, который содержит некоторые элементы для плагина лайтбокса для чтения. Если вы хотите использовать библиотеку лайтбоксов, которая не включена в ваши плагины, то вы можете использовать следующие атрибуты для создания своего собственного плагина.
-
rel — указывает на ссылку лайтбокса. Значение — лайтбокс.
-
href — это URL-адрес медиа-объекта.
-
data-width — устанавливает ширину лайтбокса, выбранного пользователем.
-
data-height — устанавливает высоту лайтбокса, выбранного пользователем.
-
data-srcset — строка srcset используется в случае носителя изображения.
rel — указывает на ссылку лайтбокса. Значение — лайтбокс.
href — это URL-адрес медиа-объекта.
data-width — устанавливает ширину лайтбокса, выбранного пользователем.
data-height — устанавливает высоту лайтбокса, выбранного пользователем.
data-srcset — строка srcset используется в случае носителя изображения.
действия
Шаблон Builder в Grav используется для обработки мультимедиа, для выполнения нескольких действий. Есть некоторые виды действий, которые поддерживаются для всех носителей, в то время как есть некоторые, которые доступны только для определенного носителя.
генеральный
Для типов мультимедиа доступно 6 типов общих действий. Каждое действие объясняется ниже.
| Sr.No. | Действие и описание |
|---|---|
| 1 | URL ()
url () возвращает необработанный путь к носителю. |
| 2 | html ([title] [, alt] [, classes]
Вывод будет иметь действительный HTML-тег для медиа. |
| 3 |
режим отображения) Он используется для переключения между различными режимами отображения. При переключении в режим отображения все действия будут сброшены. |
| 4 | ссылка на сайт()
Действия, примененные до ссылки, будут применяться к цели ссылки. |
| 5 | лайтбокс ([ширина, высота])
Lightbox похож на действие ссылки, но имеет небольшое отличие в том, что он создает ссылку с некоторыми дополнительными атрибутами. |
| 6 | Thumbnail
Выберите между страницей и по умолчанию для любого типа медиа-файла, и это можно сделать вручную. |
url () возвращает необработанный путь к носителю.
Вывод будет иметь действительный HTML-тег для медиа.
режим отображения)
Он используется для переключения между различными режимами отображения. При переключении в режим отображения все действия будут сброшены.
Действия, примененные до ссылки, будут применяться к цели ссылки.
Lightbox похож на действие ссылки, но имеет небольшое отличие в том, что он создает ссылку с некоторыми дополнительными атрибутами.
Выберите между страницей и по умолчанию для любого типа медиа-файла, и это можно сделать вручную.
Действия с изображениями
В следующей таблице перечислены некоторые действия, которые применяются к изображениям.
| Sr.No. | Действие и описание |
|---|---|
| 1 | изменить размер (ширина, высота, [фон])
Изменяет ширину и высоту изображения путем изменения размера. |
| 2 | forceResize (ширина, высота)
Растягивает изображение по мере необходимости независимо от исходного соотношения. |
| 3 | cropResize (ширина, высота)
Изменяет размер изображения до меньшего или большего размера в зависимости от его ширины и высоты. |
| 4 | обрезать (x, y, ширина, высота)
Обрезает изображение, как описано шириной и высотой от местоположения x и y. |
| 5 | cropZoom (ширина, высота)
Помогает увеличить и обрезать изображения в соответствии с запросом. |
| 6 | Качество (значение)
Устанавливает значение качества изображения от 0 до 100. |
| 7 | свести на нет ()
Цвета инвертируются в отрицании. |
| 8 | яркости (значение)
При значении от -255 до +255 фильтр яркости добавляется к изображению. |
| 9 | Контраст (значение)
Значение от -100 до +100 используется для применения фильтра контрастности к изображению. |
| 10 | оттенки серого ()
Фильтр оттенков серого используется для обработки изображения. |
| 11 | Тиснение ()
Фильтр для тиснения также используется для обработки изображения. |
| 12 | гладкая (значение)
Фильтр сглаживания применяется к изображениям путем установки значения от -10 до +10. |
| 13 | Резкое ()
Фильтр резкости добавлен на изображение. |
| 14 | край ()
Фильтр поиска края добавлен на изображение. |
| 15 | раскрасить (красный, зеленый, синий)
Окрашивает изображение, регулируя красный, зеленый и синий цвета. |
| 16 | сепия()
Фильтр сепии добавлен, чтобы придать винтажный вид. |
Изменяет ширину и высоту изображения путем изменения размера.
Растягивает изображение по мере необходимости независимо от исходного соотношения.
Изменяет размер изображения до меньшего или большего размера в зависимости от его ширины и высоты.
Обрезает изображение, как описано шириной и высотой от местоположения x и y.
Помогает увеличить и обрезать изображения в соответствии с запросом.
Устанавливает значение качества изображения от 0 до 100.
Цвета инвертируются в отрицании.
При значении от -255 до +255 фильтр яркости добавляется к изображению.
Значение от -100 до +100 используется для применения фильтра контрастности к изображению.
Фильтр оттенков серого используется для обработки изображения.
Фильтр для тиснения также используется для обработки изображения.
Фильтр сглаживания применяется к изображениям путем установки значения от -10 до +10.
Фильтр резкости добавлен на изображение.
Фильтр поиска края добавлен на изображение.
Окрашивает изображение, регулируя красный, зеленый и синий цвета.
Фильтр сепии добавлен, чтобы придать винтажный вид.
Анимация и векторизация изображений и видео
Анимированные и векторизованные действия выполняются на изображениях и видео. Ниже приводится действие, которое происходит с изображениями и видео.
| Sr.No. | Действие и описание |
|---|---|
| 1 | изменить размер (ширина, высота)
Действие изменения размера установит атрибуты width, height, data-width и data-height . |
Действие изменения размера установит атрибуты width, height, data-width и data-height .
Комбинации
Grav имеет функцию управления изображениями, которая позволяет легко работать с изображениями.
Приведенный выше код сгенерирует вывод, как показано ниже —
Адаптивные изображения
В следующей таблице перечислены несколько типов адаптивных изображений.
| Sr.No. | Действие и описание |
|---|---|
| 1 | Дисплеи с более высокой плотностью
Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу. |
| 2 | Размеры с медиа-запросами
Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу. |
Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.
Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.
Метафайлы
image1.jpg, archive.zip или любая другая ссылка имеет возможность устанавливать переменные или может быть переопределена метафайлом. Эти файлы затем принимают формат <имя файла> .meta.yaml . Например, если у вас есть изображение как image2.jpg , то ваш метафайл может быть создан как image2.jpg.meta.yaml . Содержание должно быть в синтаксисе yaml. Вы можете добавить любые файлы или метаданные, которые вам нравятся, используя этот метод.