Imagem da capa

Imagem da capa

Escolhendo a imagem de miniatura (Thumbnail) no resumo automático da postagem.


Essa é uma dica simples que eu sempre uso nos meus post. Consiste em escolher a imagem que aparecerá nas miniaturas da sua postagem, se você usa resumo automático. A imagem aparece somente na página inicial e fica oculta dentro da postagem, isso graças a propriedade displa:none; que oculta qualquer elemento.



Como usar?
Depois que você terminar de escrever sua postagem selecione a opção HTML e no inicio da postagem adicione o seguinte código:

<img src="url-da-imagem" style="display:none;"/>

Substitua o trecho url-da-imagem pelo url da imagem escolhida. Lembre-se, o código deve sempre ser o primeiro elemento da postagem. Para ficar mais claro:


3 Comentários

  1. Oi Thicoos! Muito obrigada pelo tutorial, salvou minha vida porque a imagem inicial do meu blog sempre ficava bugada, agora tá perfeita.
    Beijo

    ResponderExcluir
  2. Oi Thicoss
    O layout que eu estou usando agora fica deixando a imagem escolhida acima do post na área da postagem, tem algum código que arrume isso?

    ResponderExcluir
    Respostas
    1. Oi Miriã desculpa a demora em responder... Tem sim como resolver isso e é bem simples.
      Como você pode ver nesse código usamos a variável:
      [code]style="display:none;"[/code]
      Então é só ir no código do seu tema e pesquisar o seletor das imagens no post, geralmente é esse:
      [code].post-body img, .post-body a img[/code]
      Depois, identifique se dentro desse seletor possui alguma variável Display ex:
      [pre]
      display: flow-root;
      display: block;
      display: inline;
      display: grid;
      etc
      [/pre]
      É só apagar essa linha ou desativar a linha (o que eu recomendo caso vc queira recuperar a configuração padrão). Para desativar a linha é só por um - (tracinho) à frente do valor da propriedade, assim:
      [code]
      display: -flow-root;
      [/code]

      Excluir

Ativador Formulário de Contato