📌  相关文章
📜  Grav-媒体

📅  最后修改于: 2020-10-25 05:20:08             🧑  作者: Mango

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

Grav使用智能缓存，该缓存在必要时创建缓存中生成的媒体。这样，所有人都可以使用缓存的版本，而不必一次又一次地生成媒体。

支持的媒体文件

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

  • 图像-jpg，jpeg，png

  • 动画图像-gif

  • 矢量图像-SVG

  • 视频-mp4，mov，m4v，swf

  • 数据/信息-txt，doc，pdf，html，zip，gz

显示方式

以下是Grav中的几种显示模式-

  • 源-它是图像，视频或文件的可视显示。

  • 文本-媒体文件的文本表示。

  • thumbnail-媒体文件的缩略图。

查找缩略图

您可以使用三个位置找到缩略图-

  • 在您的媒体文件所在的文件夹中– [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. Action & Description
1 url()

url() gives back raw url path to media.
2 html([title][, alt][, classes]

The output will have a valid html Tag for media.
3

display(mode)

It is used to switch between different display modes. When you switch to display mode, all the actions will be reset.
4 link()

Actions applied before link will apply to the target of the link.
5 lightbox([width, height])

Lightbox is similar to link action but has a little difference that it creates a link with some extra attributes.
6 Thumbnail

Select in between page and default for any type of media file and this can be done manually.

图片上的动作

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

Sr.No. Action & Description
1 resize(width, height, [background])

Changes the width and height of the image by resizing.
2 forceResize(width, height)

Stretches the image as required irrespect of original ratio.
3 cropResize(width, height)

Resizes the image to smaller or larger size according to its width and height.
4 crop(x, y, width, height)

Crops the image as described by width and height from the x and y location.
5 cropZoom(width, height)

Helps zoom and crop the images as per the request.
6 quality(value)

Sets value for the image quality between 0 and 100.
7 negate()

Colours get inverted in negation.
8 brightness(value)

With a value of -255 to +255, brightness filter is added to the image.
9 contrast(value)

The value from -100 to +100 is used to apply the contrast filter to the image.
10 grayscale()

he grayscale filter is used to process the image.
11 emboss()

The embossing filter is also used to process the image.
12 smooth(value)

The smoothing filter is applied to the images by setting the value from -10 to +10.
13 sharp()

The sharpening filter is added on the image.
14 edge()

The edge finding filter is added on the image.
15 colorize(red, green, blue)

Colorizes the image by adjusting red, green and blue colours.
16 sepia()

The sepia filter is added to give a vintage look.

动画和矢量化图像和视频

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

Sr.No. Action & Description
1 resize(width, height)

The resize action will set width, height, data-width and data-height attributes.

组合方式

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

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

上面的代码将生成如下所示的输出-

重力媒体

响应式图像

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

Sr.No. Action & Description
1 Higher density displays

Add a suffix to the filename and u can add higher density image to the page.
2 Sizes with media queries

Add a suffix to the filename and u can add higher density image to the page.

元文件

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