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 种类型的常规操作可用于媒体类型。每个操作如下所述。

Sr.No. 动作 &描述
1 url()

url() 返回媒体的原始 url 路径

2 html([title][, alt][, classes]

输出将具有媒体的有效 html 标签。

3

display(mode)

用于在不同的显示模式之间切换。切换到显示模式时,所有操作都将被重置。

4 link()

在链接之前应用的操作将应用于链接的目标。

5 lightbox([width, height])

Lightbox 与链接操作类似,但有一点不同,它创建了一个带有一些额外属性的链接。

6 Thumbnail

在页面和默认之间选择任何类型的媒体文件,这可以手动完成。

操作图片

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

Sr.No. 操作 &描述
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 对比度(值)

-100 至 +100 之间的值用于将对比度滤镜应用于图像。

10 灰度()

灰度滤镜用于处理图像。

11 emboss()

浮雕滤镜也用于处理图像。

12 smooth(value)

通过将值设置为 -10 到 +10,将平滑滤镜应用于图像。

13 sharp()

在图像上添加锐化滤镜。

14 edge()

边缘查找滤镜添加到图像上。

15 colorize(red, green, blue)

通过调整红色、绿色和蓝色来为图像着色。

16 sepia()

添加棕褐色滤镜以呈现复古外观。

动画和矢量化图像和视频

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

Sr.No. 操作和说明
1 调整大小(宽度、高度)

调整大小操作将设置 width、height、data-widthdata-height 属性。

组合

Grav 具有图像处理功能,可以轻松处理图像。

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

上述代码将生成如下所示的输出 −

Grav Media

响应式图像

下表列出了几种类型的响应式图像。

Sr.No. Action &描述
1 更高密度显示

在文件名中添加后缀,即可将更高密度的图像添加到页面中。

2 使用媒体查询的大小

在文件名中添加后缀,即可将更高密度的图像添加到页面中。

元文件

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