Executando verificação de segurança...
10

Como criar conteúdo no TabNews com imagens! 📸

Se você deseja criar um post aqui no TabNews, adicionar uma imagem para enriquecer seu conteúdo e exemplificar a sua lógica, você está no lugar certo! 📸


Imagem da TabNews


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:

![Texto alternativo da imagem](URL da imagem)

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.


  1. Crie sua conta, e clique em "New Post";

    New Post - Imgur
  2. Arraste as imagens que deseja hospedar;

    Fazendo upload de imagens - Imgur
  3. Volte à página inicial, clique no botão do seu perfil, e por fim, em "Images";

    Images - Imgur
  4. Selecione a foto desejada e copie o Markdown Link.

    Markdown Link - Imgur

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:

![Imagem do Imgur](https://i.imgur.com/dk2NRXM.png)

ou

<img alt="Imagem do Imgur" src="https://i.imgur.com/dk2NRXM.png">



Espero ter lhe ajudado!

Carregando publicação patrocinada...
1

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.

2

Cara, acredita que eu também passei por isso? hahahaha

Eu quebrei a cabeça durante o dia inteiro ontem, tentando resolver esse problema. A imagem sempre vinha quebrada. Foi só então que eu descobri que o link deveria ser diferente, e descobri isso entrando em outros posts aqui do TabNews e inspecionando a página, pra analisar de qual maneira a URL estava sendo declarada.

No final resolvi criar o post pra ajudar quem estivesse passando pelo mesmo empecilho, e sinceramente? para ajudar a mim mesmo principalmente hahahaha provavelmente daqui um tempo não vou mais lembrar disso tudo, e vou recorrer à este meu post pra reaprender.

1

Vim do futuro para agradeçer pelo site! Só abrir, uploadear, e usar. Se eu pudesse, eu dava um beijo no dono, até porque parece ser brasileiro! (Nos termos de serviços diz que precisa seguir todas as regras do brasil, tó deduzindo por isso). Valeu!