Na aula anterior da #escola612 sobre o Gutenberg, o novo editor de texto do WordPress, ensinamos como adicionar uma imagem no corpo do post. Agora preparem-se, alunos: vamos levar a composição de posts para outro patamar com as novas formas de adicionar imagens no corpo de um post ou página do WordPress.
Se você perdeu as outras aulas da nossa #escola612 Gutenberg, eis os links:
Lembrando como sempre, porque nunca custa lembrar, o editor está disponível para download neste link, que deve ser empregado em sites de teste.
Muito bem, viram as demais aulas? Então estejam prontos porque o que vem por aí você vai adorar. Principalmente você que trabalha com blogs e quer algo mais dinâmico e incrível para levar ao ar nos seus posts.
Cover Image
Para entender melhor como funciona a Cover Image (imagem de capa) e porquê ela pode ser adicionada no corpo do post, vamos à função.
A caixa de diálogo é idêntica à de imagem, como mostramos acima.
Nem precisamos explicar como adicionar a imagem; é do mesmo jeito de como adicionar imagens conforme explicamos acima.
Porém há uma diferença: o gerenciador de mídia abre direto; ele sequer aparece na primeira opção.
Porém, caros alunos, é aí que está a graça da função! Veja que eu coloquei uma imagem quadrada, e ela vai aparecer escurecida e cortada. E mais: eu posso aplicar legenda. Melhor que isso: ela vai aparecer sobre a imagem.
Preste atenção nas caixas de diálogo: acima está a caixa de diálogo do posicionamento da imagem (esquerda, centro e direita), e a de posicionamento do texto dentro da imagem (esquerda, centro e direita). O lápis é por onde você edita ou substitui a imagem.
Clicando na imagem, você encontra ao lado uma caixa de opções avançadas, onde você pode fixar a imagem de fundo, controlar a luz da imagem – mais clara ou mais escura), bem como o alinhamento do texto. Há ainda um espaço para CSS adicional.
Veja como fica no corpo do post:
Galeria
Agora vamos entender como funciona a galeria no Gutenberg. A caixa de diálogo, como sempre, é idêntica às demais já exibidas.
Assim como na função de imagem simples, o botão de “Upload” da função Galeria abre direto na caixa de diálogo do computador – e não na biblioteca de mídia. Selecionei 3 imagens para compor a galeria que quero construir – você pode selecionar quantas você quiser.
Em cada imagem você pode adicionar uma legenda. Na caixa de opções avançadas – que se abre quando você clica sobre uma das imagens da galeria – você encontra as seguintes funções: número de colunas, cortar imagens, ou determinar para onde vão os links. Selecione “None” se você não quiser linkar as imagens da galeria.
O resultado ficará assim:
Ainda tem mais recursos para serem mostrados nos próximos posts. Tem muito mais possibilidades para você arrebentar nesse novo editor de texto. Treinando, a gente ensina e compartilha.
