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 -