Grav - Link de imagem
Neste capítulo, vamos entender a vinculação de imagens em Grav. Grav permite vincular imagens de uma página a outra e até mesmo a páginas remotas. Se você vinculou os arquivos usando HTML, seria muito fácil entender o link de imagens no Grav.
Usando essa estrutura, veremos como exibir arquivos de mídia na página usando diferentes tipos de links. Cada pasta nesta estrutura contém imagens e há um diretório especial sob/02.green/img01 que atua como uma página, mas contém apenas arquivos de mídia.
Vamos dar uma olhada em alguns dos elementos comuns da tag de imagem baseada em markdown do Grav.
![Alt Text](../path/image.ext)
! - Indica uma tag de imagem quando você a coloca no início da tag de link de marcação.
[] - Especifica o texto alternativo opcional para a imagem.
() - Ele é colocado diretamente após o colchete que contém o caminho do arquivo.
../ - Indica uma subida de diretório.
Grav usa cinco tipos de links de imagens listados abaixo -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Slug Relativo
Ele define links de imagem relativos à página atual e vincula outro arquivo no mesmo diretório. Ao usar links relativos, a localização do arquivo de origem é tão importante quanto a do destino. Se você alterar o caminho no arquivo enquanto o move, o link pode ser quebrado. A vantagem de usar essa estrutura de vinculação de imagens é que você pode alternar entre o servidor de desenvolvimento local e um servidor ativo com um nome de domínio diferente, desde que a estrutura do arquivo permaneça constante.
Exemplo
![link](../water/img01/img.jpg)
Aqui ../ indica que seu link sobe uma pasta e depois desce uma pasta e img.jpg é o destino.
Ao usar o caminho acima, você receberá a seguinte saída -
Grav suporta slugs no cabeçalho do arquivo markdown principal da página e este slug toma o lugar do nome da pasta para a página dada.
E se 01.sky pasta tem um slug definido através de seu .md arquivo, ou seja, /pages/01.blue/01.sky/text.md, então o cabeçalho do arquivo seria como -
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---
No código acima, definimos o slug test-slugque é opcional. Depois de definir o slug, você pode vincular ao arquivo de mídia que teráSlug Relative ou Absolute URL definido para o link.
Relativo ao Diretório
Nesse tipo de link, você pode definir links de imagem relativos ao diretório para a página atual. Em vez de usar slugs de URL, você pode consultar o caminho completo com seus nomes de pasta em links de imagem relativos ao diretório.
Exemplo
![My image](../../blue/img01/img.jpg)
Quando você usa o caminho acima, ele exibirá a saída conforme mostrado abaixo -
Absoluto
Links absolutos são iguais aos links relativos, mas a única diferença é que eles são relativos à raiz do site e estão presentes no /user/pages/ diretório.
Você pode usar links absolutos de duas maneiras diferentes -
Você pode usar Slug Relative estilo que inclui slug ou nomes de diretório no caminho e comumente usado em links absolutos.
Você pode usar Absolute Link que abre o link com a/.
![My image](/blue/img01/img.jpg)
Ao usar o caminho acima, você receberá a seguinte saída -
Controlo remoto
Os links de imagens remotas permitem exibir qualquer arquivo de mídia diretamente por meio de seu URL. Esses links não incluem o conteúdo do seu próprio site. O exemplo a seguir mostra como exibir imagem usando URL remoto -
![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)
Ao clicar no link, conforme mostrado na imagem abaixo, ele exibirá a imagem do URL fornecido.
Ações de mídia em imagens
As imagens associadas às páginas nos permitem usar as vantagens das ações de mídia da Grav . Você pode exibir alguns arquivos de mídia como imagens, vídeos e outros arquivos ao criar conteúdo no Grav.
Exemplo
Você pode carregar uma imagem usando o formato fornecido abaixo -
![Styling Example](../img01/img.jpg?cropResize = 400, 200)
Ao usar o caminho acima, você receberá uma saída conforme mostrado abaixo -