Grav - Media

Media files contain different types of display content such as images, videos, and many other files. Grav find and processes these files automatically to be used by any page. By using the built in functionality 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 neccessary. 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

Below 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 lightbox plugin to read. If you want to use a lightbox library which is not included in your plugins then you can use the following attributes to create your own plugin.

• rel: Indicates lightbox link. The value is lightbox.
• href: It is a URL to the media object.
• data-width: Set the width of the lightbox chosen by the user.
• data-height: Set the height of the lightbox 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 a multiple actions. There are some kinds of actions which are supported for all medium or others are available only for specific medium.

General

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

S.N.	Actions & 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 use to switch between different display modes. When you switch to display mode, all the actions will be reset. Eg:In page.media['my-new-image.jpg'].sepia().display('thumbnail').html() from here thumbnail gives a result but will not contain sepia() action.
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.

Actions on Images

Given below are a few actions that are applied on images.

S.N.	Actions & Description
1	resize(width, height, [background]) You change the width and height of the image by resizing.
2	forceResize(width, height) it stretches the image as required irrespect of original ratio.
3	cropResize(width, height) Resize 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) cropZoom is used to 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() The grayscale filter is used to process the image.
11	emboss() The Embossing filter is also used to process the image.
12	smooth(value) Smoothing filter is applied to the images by setting the value from -10 to +10.
13	sharp() Sharpening fiter is added on the image.
14	edge() 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() 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 ia the action that take place on images and videos.

S.N.	Actions & Description
1	resize(width, height) The resize action will set width, height, data-width and data-height attributes.

Combinations

Grav has image manipulation functionality that is easy to work with images.

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

The code gives you the result as shown below:

Responsive images

Following are a few types of responsive images.

S.N.	Actions & 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 ability to set variables or can be overridden by a metafile. These files then take the format of <filename>.meta.yaml. 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 like using this method.