Grav - Media-alljchome-开发者的教程家园

Grav Basics Tutorial

Grav Content

Grav Themes

Grav Plugins

Grav Administration Panel

Grav Advanced

Grav Hosting

Grav - Web Hostings

Grav Troubleshooting

Grav Useful Resources

Selected Reading

Grav - Media

Media files contain different types of display content such as images, videos, and many other files. Grav finds and processes these files automatically to be used by any page. By using the built in functionapty of the page, you can access metadata and modify the media dynamically.

Smart-caching is used by Grav that creates in-cache generated media when necessary. This way all can use the cached version instead of generating media again and again.

Supported Media Files

Following are the media file types that are supported by Grav −

Image − jpg, jpeg, png

Animated Image − gif

vectorized Image − svg

Video − mp4, mov, m4v, swf

Data/information − txt, doc, pdf, html, zip, gz

Display Modes

Following are a few types of display modes in Grav −

Source − It is the visual display of the image, video or a file.

text − Textual presentation of media files.

thumbnail − Thumbnail image for the media file.

Locating Thumbnails

You can locate the thumbnails using three locations −

In the same folder where your media files exists − [media-name].[media-extension].thumb.[thumb-extension]; here, media-name and media-extension are name and extension of the actual media file and thumb-extension is extension that is supported by the image media type.

User Folder − user/images/media/thumb-[media-extension].png; here, media-extension is extension of the actual media file.

System folder − system/images/media/thumb-[media-extension].png; here, media-extension is the extension of the actual media file.

Lightboxes and Links

Grav gives an output of an anchor tag that contains some of the elements for the pghtbox plugin to read. If you want to use a pghtbox pbrary which is not included in your plugins, then you can use the following attributes to create your own plugin.

rel − Indicates the pghtbox pnk. The value is pghtbox.

href − It is a URL to the media object.

data-width − Set the width of the pghtbox chosen by the user.

data-height − Set the height of the pghtbox chosen by the user.

data-srcset − srcset string is used in case of image media.

Actions

Builder pattern in Grav is used to handle media, to perform multiple actions. There are some kinds of actions which are supported for all medium while there are some that are available only for specific medium.

General

There are 6 types of general actions that are available for the media types. Each action is explained below.

Sr.No.	Action & Description
1	url() url() gives back raw url path to media.
2	html([title][, alt][, classes] The output will have a vapd 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	pnk() Actions appped before pnk will apply to the target of the pnk.
5	pghtbox([width, height]) Lightbox is similar to pnk action but has a pttle difference that it creates a pnk with some extra attributes.
6	Thumbnail Select in between page and default for any type of media file and this can be done manually.

Actions on Images

The following table psts out a few actions that are appped on images.

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	quapty(value) Sets value for the image quapty 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 appped 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.

Animation and Vectorizing images and videos

Animated and vectorized actions are done on images and videos. Following is the action that takes place on images and videos.

Sr.No.	Action & Description
1	resize(width, height) The resize action will set width, height, data-width and data-height attributes.

Combinations

Grav has image manipulation functionapty that makes it easy to work with images.

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

The above code will generate an output as shown below −

Responsive images

Following table psts out a few types of responsive images.

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.

Metafiles

image1.jpg, archive.zip or any other reference has the abipty to set variables or can be overridden by a metafile. These files then take the format of <filename>.meta.yaml. For example, if you have an image as image2.jpg, then your metafile can be created as image2.jpg.meta.yaml. The content must be in yaml syntax. You can add any files or metadata you pke using this method.