Como criar conteúdo no TabNews com imagens! 📸
Como todos sabemos, a criação de conteúdo no TabNews é feita por meio da estilização de arquivos markdown. Se você já teve algum contato com GitHub, deve se lembrar dos arquivos README.md, que são escritos em cima desta mesma extensão.
Além disso, também é consenso que, um conteúdo com imagens e exemplos acerca do que está sendo explicado se torna um conteúdo muito mais rico e didático. As imagens trazem dinâmica ao leitor do post, seja para exemplificar trechos que seriam mais difíceis de abstrair sem uma representação visual ou apenas para apresentar um resultado ao usuário.
Agora que você já entendeu a importância de usar imagens para se comunicar melhor com quem vai ler o seu conteúdo, vamos aprender de qual forma iremos adicioná-las à pagina. Para tal, resolvi separar a lógica em dois pontos: Declaração no markdown e Hospedagem da imagem.
1. Declaração no markdown
A primeira tarefa é declarar, dentro do arquivo, a sintaxe para adicionar uma imagem. Isto pode ser feito de duas maneiras: Via linguagem markdown:
Via linguagem HTML:
<img tab="Texto alternativo da imagem" src="URL da imagem">
2. Hospedagem da imagem
A segunda tarefa é um pouco mais complicada. Devemos hospedar de forma online a imagem que desejamos utilizar em nossos posts, para ser possível acessá-las no momento de informar a URL da imagem (Passo 1).
Para tal fim, devemos criar uma conta em algum hospedador de imagens na internet para fazer upload das nossas mídias. Particularmente, eu utilizo e prefiro a plataforma Imgur. O passo a passo é bem simples.
-
Crie sua conta, e clique em "New Post";
-
Arraste as imagens que deseja hospedar;
-
Volte à página inicial, clique no botão do seu perfil, e por fim, em "Images";
-
Selecione a foto desejada e copie o Markdown Link.
E pronto! Agora você já tem a sua imagem disponível de forma online para incluir na URL de chamada dentro do seu post.
O final ficará mais ou menos assim:
ou
<img alt="Imagem do Imgur" src="https://i.imgur.com/dk2NRXM.png">
Tava precisando disso hoje haha, eu tava pegando o link gerado na hora que faz o upload, que seria esse mesmo q ta no Image Link, ai a imagem tava ficando quebrada. Acabei usando o imagem.app, que é uma dica que dou também pra quem quiser testar.