Como adicionar imagens no Gitlab

Acesso Rápido

• Adicionando por um Editor de Texto
• Formas de Adicionar imagens em Markdown
• Visualizacão das Imagens

Adicionando por um Editor de Texto:

• Em editores, podemos colocar imagens em diretórios que ficarão ocultos para as pessoas que irão ler mas podemos manipular as imagens que estarão armazenadas

• Isso serve para quando trocarmos o local dos arquivos da Wiki para outro Repositório não sejam perdido as imagens.

Como funciona:

• Primeiro criamos um Diretorio na nossa Wiki e Adicionamos uma imagem nele, no exemplo o Diretório tutorial-imagens

• Agora essa imagem esta dentro de um Diretorio Oculto que so em um editor de texto como o VScode voce consegue ver, onde a unica coisa que devemos fazer agora e referenciar no Markdown a imagem que se encontra nesse Repositorio, que nos leva ao proximo topico abaixo

Formas de Adicionar imagens em Markdown

• Existem algumas formas de adicionar imagens no Markdown:
  • Por link externo
  • Por link interno
  • por html interno

Por link Externo

iremos usar a seguine estrutura para trazer imagens externa ao Markdown:

![nome desejado da imagem](link da imagem)

Com essa estruturação podemos pegar um link qualquer de uma imagem e adicionar, colocando um nome para a imagem em si

EXEMPLO:

• Em uma imagem na internet selecione copiar o endereço da imagem

• Coloque o link e o nome da imagem como abaixo

![Terminal](https://cdn3.iconfinder.com/data/icons/logos-and-brands-adobe/512/144_Gitlab-512.png)

• vai aparecer como abaixo:

Por link interno

• Se voce estiver trabalhando com diretorios de imagens em um editor de texto como o vscode, podemos simplesmente chamar o arquivo de seu diretorio

• por link se usa uma estrutura como abaixo para chamar a imagem

![nome da imagem](caminho/para/imagem)

Exemplo:

• Descobrimos onde esta a nossa imagem:

• Colocamos o caminho para a imagem do diretorio como abaixo

![](../resources/images/tutorial/gitlab.png)

• Colocamos .. em todo diretorio que nao for interno do Reposiorio, entao como o diretorio imagens e interno, devemos dizer todos os diretorio ate a imagem e a extensao dela

• Abaixo fica a imagem em si

Por html interno

• por html usamos a tag epecial do html para exportar imagem, dizendo como fonte o local da imagem e o titulo dela

<img src="caminho/para/imagem" tittle="nome da imagem">

• se desejamos Transformar markdown em PDF, devemos sempre chamar as imagens como tag
• se desejamos Fazer resize de imagens, devemos usar também as tags, porque fica mais facil de usar, foi explicado mais a fundo Aqui

EXEMPLO:

• Descobrimos onde esta a nossa imagem:

• Colocamos o caminho para a imagem do diretorio como abaixo

<img src="../resources/images/tutorial/gitlab.png">

• Colocamos .. em todo diretorio que nao for interno do Reposiorio, entao como o diretorio imagens e interno, devemos dizer todos os diretorio ate a imagem e a extensao dela

• Abaixo fica a imagem em si

Visualização das Imagens

• Podemos redefinir o tamanho e centralizar as imagens usando tags

<p align="center">
    <img src="imagem" height="300" tittle="nome imagem">
</p>

• align="" : e uma forma de orientar aonde a imagem vai ficar
• height="" : define o tamanho que a imagem vai ficar na wiki

Exemplo:

• CENTRALIZANDO

<p align="center">
    <img src="../resources/images/tutorial/gitlab.png" height="100">
</p>

• Diversos tamanhos

<img src="../resources/images/tutorial/gitlab.png" height="20">
<img src="../resources/images/tutorial/gitlab.png" height="50">
<img src="../resources/images/tutorial/gitlab.png" height="100">
<img src="../resources/images/tutorial/gitlab.png" height="200">