|
|
|
[Página Inicial](Home)
|
|
|
|
|
|
|
|
|
|
|
|
# Como adicionar imagens no Gitlab
|
|
|
|
|
|
|
|
---
|
|
|
|
**Acesso Rápido**
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
* [Adicionando por um Editor de Texto](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#vscode)
|
|
|
|
* [Formas de Adicionar imagens em Markdown](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#adding)
|
|
|
|
* [Visualizacão das Imagens](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#organize)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
<a name="vscode"></a>
|
|
|
|
|
|
|
|
## Adicionando por um Editor de Texto:
|
|
|
|
|
|
|
|
* Em [editores](Utilizando-a-wiki/wiki-no-editor-de-texto), 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**
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
<img src="../tutorial-imagens/gitlab.png">
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
* 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a name="adding"></a>
|
|
|
|
## Formas de Adicionar imagens em Markdown
|
|
|
|
|
|
|
|
* Existem algumas formas de adicionar imagens no Markdown:
|
|
|
|
* [Por link externo](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#extern)
|
|
|
|
* [Por link interno](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#oculto)
|
|
|
|
* [por html interno](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#html)
|
|
|
|
|
|
|
|
<a name="extern"></a>
|
|
|
|
|
|
|
|
## Por link Externo
|
|
|
|
|
|
|
|
iremos usar a seguine estrutura para trazer imagens externa ao Markdown:
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
* vai aparecer como abaixo:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a name="oculto"></a>
|
|
|
|
|
|
|
|
## Por link interno
|
|
|
|
|
|
|
|
### Deve se adicionar a imagem através do repositório da wiki seguindo os seguintes [passos!](Utilizando-a-wiki/wiki-no-editor-de-texto)!
|
|
|
|
|
|
|
|
* Se você estiver trabalhando com diretórios 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
|
|
|
|
```
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Exemplo:
|
|
|
|
|
|
|
|
* Descobrimos onde esta a nossa imagem:
|
|
|
|
|
|
|
|
* Colocamos o caminho para a imagem como abaixo
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Obs: Restante do path é o caminho até a sua imagem
|
|
|
|
```
|
|
|
|
|
|
|
|
* Abaixo fica a imagem em si
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a name="html"></a>
|
|
|
|
|
|
|
|
## 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](../Utilizando-a-wiki/../Utilizando-a-wiki/adicionando-imagens#organize)
|
|
|
|
|
|
|
|
`EXEMPLO:`
|
|
|
|
|
|
|
|
* Descobrimos onde esta a nossa imagem:
|
|
|
|
|
|
|
|
<img src="../tutorial-imagens/ocult-folder.png">
|
|
|
|
|
|
|
|
* Colocamos o caminho para a imagem do diretorio como abaixo
|
|
|
|
|
|
|
|
```
|
|
|
|
<img src="../tutorial-imagens/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
|
|
|
|
|
|
|
|
<img src="../tutorial-imagens/gitlab.png">
|
|
|
|
|
|
|
|
<a name="organize"></a>
|
|
|
|
|
|
|
|
## 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="../tutorial-imagens/gitlab.png" height="100">
|
|
|
|
</p>
|
|
|
|
```
|
|
|
|
<p align="center">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="100">
|
|
|
|
</p>
|
|
|
|
|
|
|
|
* **Diversos tamanhos**
|
|
|
|
|
|
|
|
```
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="20">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="50">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="100">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="200">
|
|
|
|
```
|
|
|
|
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="20">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="50">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="100">
|
|
|
|
<img src="../tutorial-imagens/gitlab.png" height="200"> |
|
|
|
\ No newline at end of file |
