Visualización de Imágenes

Para visualizar archivos formato imagen como GIF, JPG, JPEG, PNG, etc., se puede usar la típica notación markdown:

    ![<Nombre imagen>](<url/ruta>)

Pero para configurar la ubicación y tamaño de la imagen se debe usar una función, cuya estructura se muestra a continuación:

    {{ < img alt="<nombre>" url="<ruta>" > }}

Se aclara que los símbolos {{, <, >, }} no deben tener espacios entre sí, es decir, se debe escribir: {{< … >}}

Donde por defecto ubica la imagen en la parte central del contenido. Para ajustar el tamaño, se debe cofigurar manualmente en el archivo de tipo CSS llamado “shortcodes.css”, cuya ruta es “themes/static/css/template-coolibri/shortcodes.css”, en el cual se debe llamar el nombre de la imagen, tal como se muestra a continuación:

    #Se llama la clase de la función:
    .shortcode_img [alt="<nombre>"] {
        max-width: <valor>%;
    }

Parametros

alt: Corresponde a una palabra o frase a la cual irá ligada el archivo, puede ser el nombre del mismo.

url: Corresponde a la ruta relativa donde se ubica el archivo que se quiere visualizar.

Para ubicar correctamente las rutas, se tomará como ejemplo el siguiente directorio:

|--pagos
    |--contratos
        _index.md
    |--ecs
        |--mapeos
            |--index.md
            |--productos.md
            |--producto.png
        |--img
            |--plantilla.png
            |--logo.jpeg
            |--logoblack.jpg
    |--_index.md

Si nos encontramos ubicados en el archivo “_index.md” del directorio “mapeos” y queremos visualizar la imagen “producto.png” ubicado en el mismo directorio, basta con citar el archivo indicando la ruta:

    {{ < img alt="producto" url="producto.png" >}}

Por otro lado, si nos encontramos en el archivo “_index.md” del directorio “mapeos” y queremos visualizar la imagen “plantilla.png” ubicado en el directorio “img”, se debe poner “../” ó “/” antes de la ruta para que la función pueda hacer la busqueda en directorios de más alto nivel. Si se desea retroceder más de un nivel, se debe poner “../” el número de niveles a retornar.

    {{ < img alt="plantilla" url="../img/plantilla.png" > }}