Grav - Medios

Los archivos multimedia contienen diferentes tipos de contenido de visualización, como imágenes, videos y muchos otros archivos. Grav encuentra y procesa estos archivos automáticamente para ser utilizados por cualquier página. Al utilizar la funcionalidad integrada de la página, puede acceder a los metadatos y modificar los medios de forma dinámica.

Smart-cachinges utilizado por Grav que crea medios generados en caché cuando es necesario. De esta manera, todos pueden usar la versión en caché en lugar de generar medios una y otra vez.

Archivos multimedia compatibles

A continuación, se muestran los tipos de archivos multimedia que admite Grav:

  • Image - jpg, jpeg, png

  • Animated Image - gif

  • vectorized Image - svg

  • Video - mp4, mov, m4v, swf

  • Data/information - txt, doc, pdf, html, zip, gz

Modos de visualización

A continuación se muestran algunos tipos de modos de visualización en Grav:

  • Source - Es la presentación visual de la imagen, video o archivo.

  • text - Presentación textual de archivos multimedia.

  • thumbnail - Imagen en miniatura del archivo multimedia.

Localización de miniaturas

Puede localizar las miniaturas usando tres ubicaciones:

  • In the same folder where your media files exists- [media-name]. [Media-extension] .thumb. [Thumb-extension]; aquí, media-name y media-extension son el nombre y la extensión del archivo de medios real y thumb-extension es la extensión que es compatible con el tipo de medio de imagen.

  • User Folder − usuario / images / media / thumb- [media-extension] .png; aquí, media-extension es la extensión del archivo multimedia real.

  • System folder- sistema / imágenes / medios / pulgar- [extensión-medios] .png; aquí, media-extension es la extensión del archivo multimedia real.

Lightboxes y enlaces

Grav proporciona una salida de una etiqueta de anclaje que contiene algunos de los elementos para que los lea el complemento lightbox. Si desea utilizar una biblioteca de caja de luz que no está incluida en sus complementos, puede usar los siguientes atributos para crear su propio complemento.

  • rel- Indica el enlace de la caja de luz. El valor es lightbox.

  • href - Es una URL del objeto multimedia.

  • data-width - Establecer el ancho de la caja de luz elegido por el usuario.

  • data-height - Establecer la altura de la caja de luz elegida por el usuario.

  • data-srcset - La cadena srcset se usa en el caso de medios de imagen.

Comportamiento

El patrón de construcción en Grav se usa para manejar medios, para realizar múltiples acciones. Hay algunos tipos de acciones que son compatibles con todos los medios, mientras que hay algunos que están disponibles solo para un medio específico.

General

Hay 6 tipos de acciones generales que están disponibles para los tipos de medios. Cada acción se explica a continuación.

No Señor. Acción Descripción
1 url ()

url () devuelve raw url path a los medios.

2 html ([título] [, alt] [, clases]

La salida tendrá una etiqueta html válida para los medios.

3

display(mode)

Se utiliza para cambiar entre diferentes modos de visualización. Cuando cambie al modo de visualización, todas las acciones se restablecerán.

4 enlace()

Las acciones aplicadas antes del enlace se aplicarán al destino del enlace.

5 caja de luz ([ancho, alto])

Lightbox es similar a la acción de enlace, pero tiene una pequeña diferencia en que crea un enlace con algunos atributos adicionales.

6 Miniatura

Seleccione entre la página y el valor predeterminado para cualquier tipo de archivo multimedia y esto se puede hacer manualmente.

Acciones sobre imágenes

La siguiente tabla enumera algunas acciones que se aplican a las imágenes.

No Señor. Acción Descripción
1 cambiar el tamaño (ancho, alto, [fondo])

Cambia el ancho y alto de la imagen cambiando el tamaño.

2 forceResize (ancho, alto)

Estira la imagen según sea necesario independientemente de la proporción original.

3 cropResize (ancho, alto)

Cambia el tamaño de la imagen a un tamaño menor o mayor según su ancho y alto.

4 recortar (x, y, ancho, alto)

Recorta la imagen como se describe en ancho y alto desde la ubicación xey.

5 cropZoom (ancho, alto)

Ayuda a ampliar y recortar las imágenes según la solicitud.

6 calidad (valor)

Establece el valor de la calidad de imagen entre 0 y 100.

7 negar()

Los colores se invierten en negación.

8 brillo (valor)

Con un value de -255 a +255, se agrega un filtro de brillo a la imagen.

9 contraste (valor)

El valor de -100 a +100 se utiliza para aplicar el filtro de contraste a la imagen.

10 escala de grises ()

El filtro de escala de grises se utiliza para procesar la imagen.

11 realzar()

El filtro de relieve también se utiliza para procesar la imagen.

12 suave (valor)

El filtro de suavizado se aplica a las imágenes estableciendo el valor de -10 a +10.

13 agudo()

El filtro de nitidez se agrega a la imagen.

14 borde()

El filtro de búsqueda de bordes se agrega a la imagen.

15 colorear (rojo, verde, azul)

Colorea la imagen ajustando los colores rojo, verde y azul.

dieciséis sepia()

El filtro sepia se agrega para darle un aspecto vintage.

Animación y vectorización de imágenes y videos

Se realizan acciones animadas y vectorizadas sobre imágenes y videos. A continuación se muestra la acción que tiene lugar en imágenes y videos.

No Señor. Acción Descripción
1 redimensionar (ancho, alto)

La acción de cambio de tamaño se establecerá width, height, data-width y data-height atributos.

Combinaciones

Grav tiene una funcionalidad de manipulación de imágenes que facilita el trabajo con imágenes.

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

El código anterior generará una salida como se muestra a continuación:

Imágenes receptivas

La siguiente tabla enumera algunos tipos de imágenes receptivas.

No Señor. Acción Descripción
1 Pantallas de mayor densidad

Agregue un sufijo al nombre del archivo y podrá agregar una imagen de mayor densidad a la página.

2 Tamaños con consultas de medios

Agregue un sufijo al nombre del archivo y podrá agregar una imagen de mayor densidad a la página.

Metarchivos

image1.jpg, archive.zipo cualquier otra referencia tiene la capacidad de establecer variables o puede ser reemplazada por un metarchivo. Estos archivos luego toman el formato de<filename>.meta.yaml. Por ejemplo, si tiene una imagen comoimage2.jpg, entonces su metarchivo se puede crear como image2.jpg.meta.yaml. El contenido debe estar en sintaxis yaml. Puede agregar cualquier archivo o metadato que desee utilizando este método.