Enlaces de imágenes
Grav ofrece diversas opciones flexibles de enlace que te permiten vincular imágenes desde una página a otra, e incluso desde fuentes remotas. Si alguna vez has enlazado archivos usando HTML o trabajado con un sistema de archivos mediante línea de comandos, mucho de esto debería ser elemental de comprender.
Veremos algunos ejemplos sencillos usando este modelo básico y simplificado de cómo podría verse el directorio Pages de un sitio Grav.
Usando esta estructura de directorios como ejemplo, examinaremos los diferentes tipos de enlaces que puedes usar para mostrar archivos multimedia en tu contenido. Tenemos archivos de imagen en cada carpeta, incluyendo una imagen para cada entrada de blog, y tres imágenes en un directorio especial /images que actúa como página pero contiene solo archivos multimedia.
El uso de la carpeta /images sirve como ejemplo de cómo puedes mantener un directorio de imágenes centralizado y simple para almacenar archivos que son usados frecuentemente por múltiples páginas. Esto simplifica el proceso de enlace en estos casos.
Si decides usar un directorio de imágenes centralizado, ten en cuenta que este directorio debe existir dentro de la carpeta /pages, ya que esta carpeta está destinada a contenido de front-end.
Para comenzar, aquí hay un vistazo rápido a algunos de los componentes estándar de una etiqueta de imagen en markdown para Grav.
| Cadena | Descripción |
|---|---|
! | Cuando se coloca al inicio de una etiqueta de enlace markdown tradicional, indica que es una etiqueta de imagen. |
[] | Los corchetes se usan para envolver el texto alternativo opcional para la imagen. |
() | Los paréntesis se usan para rodear la referencia a la imagen misma. Se colocan directamente después de los corchetes. |
../ | Cuando se usa en el enlace, indica subir un nivel en el directorio. |
Puedes combinar un enlace de página normal y un enlace de imagen para envolver una imagen en un enlace: [](http://ejemplo.net/)
Relativo por Slug
Los enlaces de imagen relativos usan destinos establecidos en relación a la página actual. Esto puede ser tan simple como enlazar a otro archivo en el directorio actual, como un archivo de imagen asociado con la página actual, o tan complejo como subir varios niveles de directorio y luego bajar a la carpeta/archivo específico donde reside una imagen.
Con enlaces relativos, la ubicación del archivo fuente es tan importante como la del destino. Si alguno de los archivos involucrados se mueve, cambiando la ruta entre ellos, el enlace puede romperse.
La ventaja de este tipo de estructura de enlaces es que puedes cambiar rápidamente entre un servidor de desarrollo local y un servidor en vivo con un nombre de dominio diferente y, mientras la estructura de archivos permanezca consistente, los enlaces deberían funcionar sin problemas.
Un enlace de archivo apunta a un archivo particular por nombre, en lugar de su directorio o slug. Si estuvieras creando un enlace de imagen en pages/01.blog/test-post-1/item.md a /pages/01.blog/test-post-3/test-image-3.jpg, usarías el siguiente comando.
Este enlace sube una carpeta, como indica ../, y luego baja una carpeta, apuntando directamente a test-image-3.jpg como destino.
Si queremos cargar blog-header.jpg desde el directorio 01.blog, haríamos lo siguiente:
No necesitas incluir números de ordenación (01.) para enlaces relativos por slug.
Grav tiene soporte integrado para slugs en la cabecera del archivo markdown principal de la página. Este slug reemplaza el nombre de la carpeta para la página y cualquier archivo multimedia contenido dentro.
Por ejemplo, Test Post 2 tiene un slug establecido a través de su archivo markdown (/pages/01.blog/test-post-2/item.md). La cabecera de este archivo contiene lo siguiente:
---
title: Test Post 2
slug: test-slug
taxonomy:
category: blog
---Notarás que se ha establecido el slug test-slug. Los slugs establecidos de esta manera son completamente opcionales y no tienen que estar presentes. Como se mencionó en el último capítulo, proporcionan una manera fácil de enlazar. Si se establece un slug, entonces cualquier enlace que hagas a un archivo multimedia dentro de esa carpeta tendrá que ser Relativo por Slug o Absoluto con una URL completa establecida para el enlace.
Si queremos enlazar test-image-2.jpg desde Test Post 2, ingresaríamos lo siguiente:
Notarás que navegamos un directorio arriba usando (../) y luego entramos a la carpeta de página test-slug usando el slug que se estableció en el archivo /pages/01.blog/test-post-2/item.md.
Relativo por Directorio
Los enlaces de imagen Relativos por Directorio usan destinos establecidos en relación a la página actual. La principal diferencia entre un enlace relativo por slug y uno relativo por directorio es que en lugar de usar los slugs de URL, haces referencia mediante la ruta completa con nombres de carpetas.
Un ejemplo de esto sería algo como:
El principal beneficio de esto es que puedes mantener la integridad del enlace en otros sistemas fuera de Grav, como GitHub.
Absoluto
Los enlaces absolutos son similares a los relativos, pero son relativos a la raíz del sitio. En Grav, esto normalmente se basa en tu directorio /user/pages/. Este tipo de enlace se puede hacer de dos maneras diferentes.
Puedes hacerlo de manera similar al estilo Relativo por Slug que usa el slug o nombre de directorio en la ruta para simplificar. Este método elimina problemas potenciales de que cambios de orden posteriores (cambiando el número al principio del nombre de la carpeta) rompan el enlace. Este sería el método más comúnmente usado para enlaces absolutos.
En un enlace absoluto, el enlace comienza con una /. Aquí hay un ejemplo de un enlace absoluto hecho a pages/01.blog/test-post-2/test-image-2.jpg en el estilo Slug desde pages/01.blog/blog.md.
Una técnica poderosa es crear una carpeta user/pages/images/ en tu sitio Grav y colocar tus imágenes allí. Luego puedes referenciarlas fácilmente con una URL absoluta desde cualquier página Grav: /images/test-image-4.jpg y aún poder realizar acciones multimedia sobre ellas.
Streams PHP
Grav también tiene la capacidad de referenciar y enlazar imágenes mediante streams PHP. Hay varios streams PHP incorporados disponibles que son útiles, incluyendo:
user://- carpeta user. ej.user/page://- carpeta pages. ej.user/pages/image://- carpeta images. ej.user/images/plugins://- carpeta plugins. ej.user/plugins/theme://- tema actual. ej.user/themes/antimatter/
Estos te permiten acceder fácilmente a imágenes que tradicionalmente están fuera de la jerarquía de Pages (user/pages/).
o:
Para una lista completa de ubicaciones de streams predeterminadas, consulta Configuración Multisitio - Streams.
Remoto
Los enlaces de imagen remotos te permiten mostrar directamente casi cualquier archivo multimedia a través de su URL. Esto no tiene que incluir el contenido de tu propio sitio, pero puede. Aquí hay un ejemplo de cómo mostrarías un archivo de imagen remoto.
Puedes enlazar a casi cualquier URL directa, incluyendo enlaces HTTPS seguros.
Acciones Multimedia en Imágenes
Uno de los principales beneficios de usar imágenes asociadas con páginas es que te permite aprovechar las potentes acciones multimedia de Grav. Por ejemplo, aquí hay una línea que usarías para cargar una imagen desde otra página:
o aprovechando streams para acceder a una imagen en tu tema actual:
Encontrarás más información sobre acciones y otra funcionalidad de archivos multimedia en el próximo capítulo.
Atributos de Imagen
Una gran nueva característica que puedes aprovechar es proporcionar atributos de imagen directamente mediante la sintaxis markdown. Esto te permite agregar fácilmente atributos HTML como classes e id sin necesidad de Markdown Extra.
Algunos ejemplos de esto son:
Atributo de Clase Única
lo que resultará en HTML similar a:
<img src="/tus/paginas/alguna-pagina/mi-imagen.jpg" class="float-left" />Atributos de Múltiples Clases
lo que resultará en HTML similar a:
<img src="/tus/paginas/alguna-pagina/mi-imagen.jpg" class="float-left sombra" />Atributo ID
lo que resultará en HTML similar a:
<img src="/tus/paginas/alguna-pagina/mi-imagen.jpg" id="id-especial" />