April 2012

Tutoriais

Imagem com largura total do post

Ando recebendo vários emails e comentários pedindo ajuda de como fazer uma imagem ocupar 100% do total de espaço de um post. Então resolvi fazer o tutorial explicando.

Se você não sabe como é uma imagem ocupando 100% da largura do post, dê uma olhada nesse theme exemplo para ter uma ideia.

Para fazer isso é bem simples. Basta adicionar uma class na imagem e configurar essa class para ficar na posição certa. Mas primeiro você precisa saber a largura do seu post e quanto de espaço tem nas laterais dessa largura.

Vou usar como exemplo, o esse theme.

O espaço do post do Honey Pie tem 600 pixels de largura. O espaço nas laterais, para que o texto do post não fique grudado no limite é de 15 pixels. Então o CSS é mais ou menos assim:

.entry {
  width:570px;
  padding:15px;
}

Por que está largura 570 se você disse que é 600? Por que no CSS quando você usa o padding, ele soma isso na largura. Então se você fizer as contas 570 (largura) + 15 (lateral esquerda) + 15 (lateral direita) será igual 600.

Note que no CSS acima está .entry mas no seu código pode ser outro nome. Você precisa descobrir qual class é usada para o espaço do seu post para que possa ver quais são as medidas usadas nela. Normalmente usa .post-body no Blogger e .entry ou .entry-content no WordPress. Mas é bom verificar para ter certeza, por que quem fez o theme pode ter usado outro nome.

Então, sabendo essas medidas, você monta o CSS para uma class que você usará na imagem.
No CSS a class deverá ter largura máxima de 600 pixels e adicionamos um margin-left com os 15 pixels negativo. Esse margin-left negativo vai forçar a imagem ficar 15 pixels para esquerda. Os mesmos 15 pixels do padding, que faz o conteúdo do post não ficar no limite do espaço do mesmo.

Eu costumo fazer com o nome alignnone por que é um dos padrões de alinhamento de imagem no WordPress. Mas se você quiser pode colocar outro nome, só que você precisar lembrar dele na hora que for usar na imagem.

O CSS será assim:

img.alignnone {
  max-width:600px;
  height:auto;
  margin-left:-15px;
}

Adicionei um height:auto no CSS da class para que sua imagem não fique distorcida. E note que os 15 pixels tem um sinal negativo para forçar a imagem para a esquerda.

Feito o CSS da class que quer usar, só adicionar ela sempre na imagem que quer aplicar o efeito.
Então quando adicionar a imagem no post, precisa ser assim:

<img src="http://site.com/imagem.jpg" alt="" class="alignnone"/>

Então só alterar a URL da imagem no código acima. E se você criou uma class com outro nome, altere ela no código também.

Tanto no WordPress quanto no Blogger (e acredito que em qualquer outro do tipo) não funcionará se você adicionar o código da imagem no modo visual. Use o modo HTML para inserir o código da imagem.

E nesse caso, que a largura é de 600 pixels, o ideal é que suas imagens tenha essa mesma largura. Caso no seu código seja 700 pixels, use imagens com essa medida.

Existe outra forma para chegar nesse mesmo resultado, mas essa é a que costumo usar.
Espero ter ajudado.