Grav - Vinculación de imágenes

En este capítulo, entenderemos la vinculación de imágenes en Grav. Grav le permite vincular imágenes de una página a otra e incluso a páginas remotas. Si ha vinculado los archivos utilizando HTML, sería muy fácil de entender la vinculación de imágenes en Grav.

Usando esta estructura, veremos cómo mostrar archivos multimedia en la página usando diferentes tipos de enlaces. Cada carpeta bajo esta estructura contiene imágenes y hay un directorio especial bajo/02.green/img01 que actúa como una página pero contiene solo archivos multimedia.

Veamos algunos de los elementos comunes de la etiqueta de imagen basada en rebajas de Grav.

![Alt Text](../path/image.ext)
  • ! - Indica una etiqueta de imagen cuando la coloca al comienzo de la etiqueta de enlace de rebaja.

  • [] - Especifica texto alternativo opcional para la imagen.

  • () - Se coloca directamente después del corchete que contiene la ruta del archivo.

  • ../ - Indica un movimiento hacia arriba en un directorio.

Grav utiliza cinco tipos de enlaces de imágenes que se enumeran a continuación:

  • Slug Relative

  • Directory Relative

  • Absolute

  • Remote

  • Media Actions on Images

Pariente babosa

Establece vínculos de imágenes relativos a la página actual y vincula otro archivo en el mismo directorio. Al usar enlaces relativos, la ubicación del archivo de origen es tan importante como la del destino. Si cambia la ruta en el archivo mientras se mueve, entonces el vínculo puede romperse. La ventaja de utilizar esta estructura de enlace de imágenes es que puede cambiar entre el servidor de desarrollo local y un servidor en vivo con un nombre de dominio diferente, siempre que la estructura del archivo se mantenga constante.

Ejemplo

![link](../water/img01/img.jpg)

aquí ../ indica que su enlace sube una carpeta y luego baja una carpeta e img.jpg es el destino.

Cuando utilice la ruta anterior, recibirá el siguiente resultado:

Grav admite slugs en el encabezado del archivo de rebajas principal de la página y este slug toma el lugar del nombre de la carpeta de la página dada.

Si 01.sky carpeta tiene un slug en su .md archivo, es decir, /pages/01.blue/01.sky/text.md, entonces el encabezado del archivo sería como -

---
title: Sky
slug: test-slug
taxonomy:
   category: blog
---

En el código anterior, hemos configurado el slug test-slugque es opcional. Una vez que configure el slug, puede vincular al archivo multimedia que tendráSlug Relative o Absolute URL configurada para el enlace.

Relativo al directorio

En este tipo de enlace, puede establecer enlaces de imágenes relativas al directorio a la página actual. En lugar de usar los slugs de URL, puede hacer referencia a través de la ruta completa con sus nombres de carpeta en enlaces de imágenes relativas al directorio.

Ejemplo

![My image](../../blue/img01/img.jpg)

Cuando use la ruta anterior, mostrará la salida como se muestra a continuación:

Absoluto

Los enlaces absolutos son los mismos que los enlaces relativos, pero la única diferencia es que son relativos a la raíz del sitio y están presentes en el /user/pages/ directorio.

Puede utilizar enlaces absolutos de dos formas diferentes:

  • Puedes usar Slug Relative estilo que incluye nombres de slug o directorio en la ruta y se usa comúnmente en enlaces absolutos.

  • Puedes usar Absolute Link que abre el enlace con a/.

![My image](/blue/img01/img.jpg)

Cuando utilice la ruta anterior, recibirá el siguiente resultado:

Remoto

Los enlaces de imágenes remotas permiten mostrar cualquier archivo multimedia directamente a través de su URL. Estos enlaces no incluyen el contenido de su propio sitio. El siguiente ejemplo muestra cómo mostrar una imagen usando una URL remota:

![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)

Cuando haga clic en el enlace como se muestra en la imagen a continuación, mostrará la imagen de la URL dada.

Acciones de medios sobre imágenes

Las imágenes asociadas con las páginas nos permiten aprovechar las ventajas de las acciones de medios de Grav . Puede mostrar algunos archivos multimedia como imágenes, videos y otros archivos al crear contenido en Grav.

Ejemplo

Puede cargar una imagen utilizando el formato que se indica a continuación:

![Styling Example](../img01/img.jpg?cropResize = 400, 200)

Cuando use la ruta anterior, recibirá un resultado como se muestra a continuación: