Devido às características da comunicação entre o Sitio web e a nuvem de Nextcloud
, as imagens e vídeos são incluídos dentro
de um diretório chamado img ao momento da construção do Sitio, por isso, para incluir imagens ou vídeos dento do texto deve ser usada a seguinte lógica:
Markdown
Renderização
# Incluindo imagens com markdown
---
Pode ser usada a lógica de markdown, incluindo o seguinte:
Após escrever o símbolo "!", incluir dentro de chaves o nome da imagem e dentro dos colchetes o caminho dentro
do diretório de conteudos do Sitio, para a imagem (a parte final deve ser o nome da imagem, incluindo a extensão).
Nesse caso, se o primeiro diretório é o "content", não é necessário incluir esse nome. Ao invés disso, o nome
deve ser sustituído pelo nome do diretório `img` que será o lugar onde estarão as imagens ao momento de construir o
Sitio.
{{</* alert type="success"*/>}}
> Em caso de dúvidas sobre como encontrar o caminho para cada sessão, pode ser visitada a página dentro do Sitio web.
{{</* /alert */>}}
Por exemplo: ao visitar a sessão "incluir conteúdo" aparece a seguinte "url" no navegador:
`https://ecovida.org.br/docs/manual_site/incluir_conteudo/`
Para localizar arquivos que estão dentro do diretório, basta copiar a parte da "url" que está depois do endereço principal do Sitio (`https://ecovida.org.br/`)
{{</* alert */>}}
Para carregar imagens usando o editor de texto da nuvem de Nextcloud pode ser usado `HTML` ou o `shortcode` de "photoswipe". A marcação realizada com Markdown (como aparece no manual do Sitio) pode ser realizada unicamente desde um editor de texto em computador local.
{{</* /alert */>}}
**Usando HTML para incluir imagens:**
`<img src="/img/nossas_acoes/certificacao/certificacao02-768x510.jpg" alt="Sou uma imagem">`
**Usando photoswipe para incluir imagens:**
{{</* load-photoswipe */>}}`
{{</* figure src="/img/nossas_acoes/agrofloresta_extrativismo/agrofloresta_lit_norte_RS_banana_e_hortalicas-thumb.jpg" */>}}
## Incluindo galeria de imagens
As imagens podem ser incluidas em formato de galeria usando [códigos curtos](https://github.com/liwenyip/hugo-easy-gallery/). Por exemplo:
Primeiro deve ser carregado o código curto "photoswipe" e depois deve ser usado o nome
"gallery"
{{</* load-photoswipe */>}}
{{</* gallery */>}}
{{</* figure src="" */>}}
{{</* figure src="img/encontro_ampliado_2023.jpg" caption="Encontro Ampliado"*/>}}
{{</* figure src="" */>}}
{{</* /gallery */>}}
Note que cada código "figure src=" permite incluir uma imagem por vez e podem ser incluidas diversas imagens na galeria.
No caso de existir um diretório completo com imagens, pode ser usado o seguinte dentro da página:
{{</* load-photoswipe */>}}
{{</* gallery dir="img/encontro_ampliado/2017/" */>}}
**Nota:** para ver a renderização dessa galeria, veja as imagens do [EARE 2017](encontro_ampliado/2017/imagens/) no Sitio
Pode ser usada a lógica de markdown, incluindo o seguinte:
Após escrever o símbolo “!”, incluir dentro de chaves o nome da imagem e dentro dos colchetes o caminho dentro
do diretório de conteúdos do Sitio, para a imagem (a parte final deve ser o nome da imagem, incluindo a extensão).
Nesse caso, se o primeiro diretório é o “content”, não é necessário incluir esse nome. Ao invés disso, o nome
deve ser sustituído pelo nome do diretório img que será o lugar onde estarão as imagens ao momento de construir o
Sitio.
Em caso de dúvidas sobre como encontrar o caminho para cada sessão, pode ser visitada a página dentro do Sitio web.
Por exemplo: ao visitar a sessão “incluir conteúdo” aparece a seguinte “url” no navegador:
Para localizar arquivos que estão dentro do diretório, basta copiar a parte da “url” que está depois do
endereço principal do Sitio (https://ecovida.org.br/)
Para carregar imagens usando o editor de texto da nuvem de Nextcloud pode ser usado HTML ou o shortcode de “photoswipe”. A marcação realizada com Markdown (como aparece no manual do Sitio) pode ser realizada unicamente desde um editor de texto em computador local.
Para incluir vídeos que estão dentro de Nextcloud se usa a mesma lógica usada com as imagens e para incluir vídeos que estão salvos em Vimeo ou Youtube se utilizam códigos curtos (“shortcodes”):
Markdown
Renderização
# Incluindo vídeos
---
## Vídeos que estão na nuvem de Nextcloud
Pode ser usado HTML, incluindo o seguinte:
<video width="320" height="240" controls>
<source src="/img/docs/manual_speco/sistema_opac.mp4" type="video/mp4">
</video>
> Note que o caminho utilizado para chegar ao vídeo
> inicia em `/img`, de maneira similar ao que é feito com as imagens
## Vídeos de outros repositórios
**Vídeos de Youtube:**
Usar o seguinte "shorcode", utilizando a palavra "youtube"
seguida da parte final do link do vídeo.
Para incluir o seguinte vídeo:
`https://youtu.be/vJHpBKI2egY`
Utilizar:
{{</* youtube vJHpBKI2egY */>}}
**Vídeos de Vimeo:**
Para incluir o seguinte video:
`https://vimeo.com/92963842`
Utilizar:
{{</* vimeo 92963842 */>}}
