Grav - 媒体

媒体文件包含不同类型的显示内容，例如图像、视频和许多其他文件。Grav 自动查找和处理这些文件，以便任何页面都可以使用。通过使用页面的内置功能，您可以访问元数据并动态修改媒体。

Grav 使用智能缓存，在必要时创建缓存生成的媒体。这样，所有用户都可以使用缓存版本，而不是反复生成媒体。

支持的媒体文件

以下是 Grav 支持的媒体文件类型：

图像 - jpg, jpeg, png
动画图像 - gif
矢量图像 - svg
视频 - mp4, mov, m4v, swf
数据/信息 - txt, doc, pdf, html, zip, gz

显示模式

以下是 Grav 中几种类型的显示模式：

源文件 - 图像、视频或文件的可视化显示。
文本 - 媒体文件的文本表示。
缩略图 - 媒体文件的缩略图。

查找缩略图

您可以从三个位置查找缩略图：

与媒体文件位于同一文件夹中 - `[media-name].[media-extension].thumb.[thumb-extension]`；其中，`media-name` 和 `media-extension` 是实际媒体文件的名称和扩展名，`thumb-extension` 是图像媒体类型支持的扩展名。
用户文件夹 - `user/images/media/thumb-[media-extension].png`；其中，`media-extension` 是实际媒体文件的扩展名。
系统文件夹 - `system/images/media/thumb-[media-extension].png`；其中，`media-extension` 是实际媒体文件的扩展名。

灯箱和链接

Grav 输出一个锚标签，其中包含灯箱插件读取的一些元素。如果您想使用插件中未包含的灯箱库，则可以使用以下属性创建自己的插件。

rel - 指示灯箱链接。值为 lightbox。
href - 媒体对象的 URL。
data-width - 设置用户选择的灯箱宽度。
data-height - 设置用户选择的灯箱高度。
data-srcset - 在图像媒体情况下使用 srcset 字符串。

操作

Grav 中的构建器模式用于处理媒体，执行多个操作。某些操作适用于所有媒体，而某些操作仅适用于特定媒体。

常规

有 6 种类型的常规操作可用于媒体类型。下面解释每个操作。

序号	操作和描述
1	url() url() 返回媒体的原始 url 路径。
2	html([title][, alt][, classes] 输出将包含媒体的有效 html 标签。
3	display(mode) 用于在不同的显示模式之间切换。当您切换到显示模式时，所有操作都将重置。
4	link() 在链接之前应用的操作将应用于链接的目标。
5	lightbox([width, height]) Lightbox 类似于 link 操作，但略有不同，因为它创建的链接有一些额外的属性。
6	缩略图为任何类型的媒体文件选择页面和默认值之间的值，这可以手动完成。

图像操作

下表列出了应用于图像的一些操作。

序号	操作和描述
1	resize(width, height, [background]) 通过调整大小更改图像的宽度和高度。
2	forceResize(width, height) 无论原始比例如何，都根据需要拉伸图像。
3	cropResize(width, height) 根据其宽度和高度将图像调整为较小或较大的尺寸。
4	crop(x, y, width, height) 根据 x 和 y 位置的宽度和高度裁剪图像。
5	cropZoom(width, height) 帮助根据请求缩放和裁剪图像。
6	quality(value) 设置图像质量的值，范围为 0 到 100。
7	negate() 颜色在反转中反转。
8	brightness(value) 使用值从-255到+255，将亮度过滤器添加到图像。
9	contrast(value) 使用 -100 到 +100 的值将对比度过滤器应用于图像。
10	grayscale() 使用灰度过滤器处理图像。
11	emboss() 还使用浮雕过滤器来处理图像。
12	smooth(value) 通过设置 -10 到 +10 的值将平滑滤镜应用于图像。
13	sharp() 将锐化滤镜添加到图像。
14	edge() 将边缘查找滤镜添加到图像。
15	colorize(red, green, blue) 通过调整红色、绿色和蓝色颜色来给图像着色。
16	sepia() 添加棕褐色滤镜以提供复古外观。

动画和矢量化图像和视频

对图像和视频执行动画和矢量化操作。以下是对图像和视频进行的操作。

序号	操作和描述
1	resize(width, height) resize 操作将设置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)

以上代码将生成如下所示的输出：

自适应图像

下表列出了几种类型的自适应图像。

序号	操作和描述
1	更高密度的显示向文件名添加后缀，您可以向页面添加更高密度的图像。
2	使用媒体查询的尺寸向文件名添加后缀，您可以向页面添加更高密度的图像。

元文件

image1.jpg、archive.zip或任何其他引用都能够设置变量或被元文件覆盖。这些文件采用<filename>.meta.yaml的格式。例如，如果您有一个名为image2.jpg的图像，则可以创建名为image2.jpg.meta.yaml的元文件。内容必须采用 yaml 语法。您可以使用此方法添加任何文件或元数据。

打印页面