”;
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 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 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 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 the 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 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 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. |
Actions on Images
The following table lists out a few actions that are applied 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 | 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. |
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 functionality that makes it easy to work with images.
The above code will generate an output as shown below −
Responsive images
Following table lists 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 ability 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 like using this method.
”;