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-width 和 data-height 属性。 |
组合
Grav 具有图像处理功能,可以轻松处理图像。
![My New Image](/images/maxresdefault.jpg?negate&cropZoom = 500, 500&lightbox & cropZoom = 600, 200&contrast = -100&sharp&sepia)
上述代码将生成如下所示的输出 −
响应式图像
下表列出了几种类型的响应式图像。
元文件
image1.jpg、archive.zip 或任何其他引用都可以设置变量或被元文件覆盖。这些文件随后采用 <filename>.meta.yaml 格式。例如,如果您有 image2.jpg 图像,则可以将元文件创建为 image2.jpg.meta.yaml。内容必须采用 yaml 语法。您可以使用此方法添加任何您喜欢的文件或元数据。