Учебники

Грав – Медиа

Мультимедийные файлы содержат различные типы отображаемого содержимого, такие как изображения, видео и многие другие файлы. 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 имеет функцию управления изображениями, которая позволяет легко работать с изображениями.

![My New Image](/images/maxresdefault.jpg?negate&cropZoom = 500, 500&lightbox & cropZoom = 600,
200&contrast = -100&sharp&sepia)

Приведенный выше код сгенерирует вывод, как показано ниже –

Грав Медиа

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

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

Sr.No. Действие и описание
1 Дисплеи с более высокой плотностью

Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.

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

Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.

Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.

Добавьте суффикс к имени файла, и вы можете добавить изображение более высокой плотности на страницу.

Метафайлы

image1.jpg, archive.zip или любая другая ссылка имеет возможность устанавливать переменные или может быть переопределена метафайлом. Эти файлы затем принимают формат <имя файла> .meta.yaml . Например, если у вас есть изображение как image2.jpg , то ваш метафайл может быть создан как image2.jpg.meta.yaml . Содержание должно быть в синтаксисе yaml. Вы можете добавить любые файлы или метаданные, которые вам нравятся, используя этот метод.