Imagens grandes no editor do Blogger

Se você usa o editor do Blogger para redigir e publicar suas postagens, já deve ter reparado que há uma limitação no tamanho das imagens dentro dos posts, de apenas 400 pixels de largura para imagens em formato paisagem (horizontal), ou 400 pixels de altura no formato retrato (vertical).

Creio que esta limitação tem como base o layout padrão dos templates oferecidos pela plataforma, onde a coluna dos posts não tem mais que 470 pixels de largura, portanto imagens de até 400 pixels "encaixariam" perfeitamente.

Mas como muita gente utiliza templates personalizados, com a coluna dos posts mais larga que 470 pixels, esta limitação acaba atrapalhando bastante quando é necessário postar imagens maiores do que este padrão de publicação permite.

Para contornar esta limitação e exibir as imagens publicadas através do editor do Blogger no seu tamanho original é necessário editar o código HTML dos artigos, alterando os parametros incluídos automaticamente nas imagens.

Ao incluir uma nova imagem, usando o editor do Blogger Draft o código gerado é o seguinte:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_mUT2piLt5H0/SOYecgfwhBI/AAAAAAAAHr0/_yPuTJ4K1u8/s1600-h/sunset-por-do-sol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_mUT2piLt5H0/SOYecgfwhBI/AAAAAAAAHr0/SeyL5Cqwqw4/s320-R/sunset-por-do-sol.jpg" /></a></div>
Agora vamos decompor este código por partes:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_mUT2piLt5H0/SOYecgfwhBI/AAAAAAAAHr0/_yPuTJ4K1u8/s1600-h/sunset-por-do-sol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://3.bp.blogspot.com/_mUT2piLt5H0/SOYecgfwhBI/AAAAAAAAHr0/SeyL5Cqwqw4/s320-R/sunset-por-do-sol.jpg" />
</a>
</div>

Verde: Divisor usado para centralização da imagem;
Azul: Link para imagem tamanho original;
Vermelho: Código da imagem exibida no post.
Os trechos em verde e azul podem ser totalmente eliminados e no trecho em vermelho, substitua onde consta "S320-R" por "S800-R", conforme o exemplo abaixo:
<img border="0" src="http://3.bp.blogspot.com/_mUT2piLt5H0/SOYecgfwhBI/AAAAAAAAHr0/SeyL5Cqwqw4/s800-R/sunset-por-do-sol.jpg" />
Retorne ao editor visual, posicione o cursor na mesma linha da imagem e clique no ícone para centralizar o texto, assim a imagem será centralizada novamente.

Se você quiser também pode usar a URL da imagem alterada acima nos códigos do seu template para evitar hospedagem externa de imagens em outros serviços.

Leia também:
Imagem: Kamoteus

Comentários




  1. Ontem mesmo eu tava procurando, cmo postar as imagens maiores!


    Vlw Compulsivo

    ResponderExcluir
  2. Ultimamente publicava imagens usando o Tinypic por causa que o Blogger redimensionava as imagens, o que atrapalhava se fosse um printscreen, por exemplo. Agora vou ver se isso funciona e publicar imagens no Blogger. Só uma dúvida: quando publico uma PNG com transparência, o Blogger não aceita a transparência, deixa o fundo preto mesmo. Ou já resolveram isso?

    ResponderExcluir
  3. Esta dica é muito útil, pois as vezes devidos as limitações do código, a imagem fica meio ruim no post.

    Abraço

    ResponderExcluir
  4. Puts, estava eu atoa aqui, preparando uma postagem e você me vem com uma dessas..

    Era o que eu precisava, eu estava pasmo por ter que fazer umas gambiarras para aumentar o tamanho da imagem do editor. Agora o Compulsivo veio com a salvação!

    Usuáriocompulsivo para presidente!

    OBS: quase não consegui comentar. a frequênte msg aparece "Your OpenID credentials could not be verified."

    abçs!

    ResponderExcluir
  5. Eu prefiro hospedar a imagem em um outro site e colocar ela no blogger,

    Depois eu vou no html da postagem e edito o tamanho da imagem por ali (width e heidth).

    Se a pessoa quiser ver a imagem no tamanho original é só clicar nela. ;-)

    Abraçxxx

    ResponderExcluir
  6. @Kazuya, nunca tive problemas com imagens PNG com transparências, a não ser é claro no Internet Explorer 6...

    @Zumbartes, se a pessoa quiser ver em tamanho original, acaba saindo do seu site...

    []'s
    Compulsivo

    ResponderExcluir
  7. @Compulsivo, Eu uso o FF3! Já faz uns 4 meses, então acho que já é problema velho.

    ResponderExcluir
  8. Off-Topic:

    Aê Compulsivo, tá sabendo que você está no Top 100 do Ranking Alexa?
    Parabéns, arrebatou a posição 68

    Abçs

    ResponderExcluir
  9. Valeu @Felipão! Tô sabendo sim, até dei uma twittada a respeito disso...

    []'s
    Compulsivo

    ResponderExcluir
  10. vlw pela dica, há algum tempo atrás, me preocupei muito com isso hehe.

    ResponderExcluir
  11. Valeu mesmo pela dica, eu não tinha a menor idéia de como fazer esse trem, e você com esta simplicidade (pra nós) matou a charada.
    Além de caipira descobri que sou burro.

    Abraço e sucesso Compulsivo.

    ResponderExcluir
  12. Não precisa nada disso. Basta clicar no canto da imagem onde tem as marcas para redimensionar e ir esticando. Está desaprendendo?

    ResponderExcluir
  13. "Top 100 do Ranking Alexa?"
    Compulsivo, começo a acreditar que você anda escrevendo seus próprios comentários... Tá ficando megalomaníaco?

    ResponderExcluir
  14. @Nospheratt, sei que é possível redimensionar a imagem desse jeito e também reposicioná-la arrastando de um lado para o outro.

    Mas assim permanece aquele link para a imagem original, que eu detesto!


    @Juliana, entre os brasileiros sim, confira:
    Top 100 do Alexa Rank dos blogs brasileiros

    []'s
    Compulsivo

    ResponderExcluir
  15. Exatemente o que eu ando precisando para algumas idéias malucas de uma mente insana.

    Valeu Compulsivo!

    ResponderExcluir
  16. Ei Compulsivo,

    Tudo bem?
    Ficou muito legal a nova estrutura do blog com as janelinhas por categorias abaixo do post.
    Posso dar uma sugestão? Se não quiser não faça.
    Você poderia colocar links nos títulos das janelas, aí se o leitor quiser acessar todos os posts sobre humor é só clicar no título onde se encontram os 2 últimos. O que acha?

    Também gostaria de perguntar se você se incomoda se eu utilizar uma estrutura semelhante em meu blog. Já tem algum tempo que queria algo assim, mas me faltou idéias e tempo para desenvolver. Posso?

    Um grande abraço.

    ResponderExcluir
  17. Olá,
    Ultimamente eu estou publicando com o Windows live writer, acho ele melhor...
    Achei ele com uma dica da Juliana do Dicas Blogger....
    Quando eu postavacom o editor do blogger e colocava alguma imagem ela ficava sem nitidez,ficava embaçada sei lá uma coisa estranha.
    Por essas e outras que eu uso o Writer.
    Abraços

    ResponderExcluir
  18. Oi Áurea, obrigado pelo elogios, gostei muito da sua sugestão e pretendo implementar sim. E claro que você pode usar a mesma estrutura, sem problema nenhum. Inclusive pretendo publicar em breve os tutoriais para obter este layout.

    @DicsCs, creio que o problema que você relatou, das imagens ficarem foscas é porque o que o Picasa publica é uma cópia da imagem que você hospeda. Mas com essa dica a imagem original é que será exibida. Infelizmente não existe um Mac Live Writer :-(

    []'s
    Compulsivo

    ResponderExcluir
  19. Ótima dica! Estava mesmo com dúvidas sobre isto. Ebora utilize o modelo pronto, penso em ter um modelo personalizado em breve. Valeu.

    Bjs
    Berenice

    ResponderExcluir
  20. Compulsivo quando acontece de ficar o link para imagem original,geralmente eu seleciono ela e clico no icone de inserir link, daí eu simplesmente não coloco url nenhuma e dou ok...
    ...Foi a única forma de retirar o link para imagem original...
    ...Mas mesmo assim valeu pela dica....
    abraços!!

    ResponderExcluir
  21. Nossa! Faço diferente! Primeiro você edita a imagem do tamanho que deseja, faz o upload pelo blogger, coloca em visualizar e copia o endereço da imagem. Simples assim!! Beijus

    ResponderExcluir
  22. Olá... eu estou editando a imagem dessa forma, mas ele a imagem nao aparece no site. Olha um exemplo
    http://www.davidarchuleta.com.br/2009/03/fotos-da-turne-por-mike-k.html

    ResponderExcluir
  23. @David, onde você deixou S00-R, substitua por S800-R. Já corrigi no post, valeu!

    []'s
    Compulsivo

    ResponderExcluir
  24. O blogger limita o tamanho da imagem em 400px quando se usa um domínio personalizado. Existe alguma maneira de burlar isso?

    ResponderExcluir
  25. @Nash este post é justamente sobre isso... Esta limitação de 400px de largura não é exclusiva de blogs com domínio próprio, mas de todos no Blogger.

    []'s
    Compulsivo

    ResponderExcluir
  26. exelente. fucionou e eu nem useu o Blogger Draft. usei o o normal mesmo e funcionou

    ResponderExcluir
  27. Antes de pesquisar no Google, parei e pensei,"Acho que ninguém fez um post explicando sobre isto". Bom... Pesquisei, cai no Dihitt e parei aqui! Ótima dica!Lembrando que não é sempre que caio aqui de para-quedas, sou assinante via Feed ;)

    ResponderExcluir
  28. Uma outra opção é usar a url do link:

    <a href="[b]http://blablabla/imagem.jpg[/b]">
    <img src="[i]http://blablabla/imagem.jpg[/i]" />
    </a>

    Troque a url que esta em [b]negrito[/b] pela que esta em [i]italico[/i]

    A url que está no link não é redimencionada.

    ResponderExcluir
  29. Oi...

    eu fiz isso, o problema é que a qualidade da imagem fica ruim. Dá pra ver que foi "esticada"...

    Gostaria que não perdesse qualidade. E não fica ruim por ter baixa resolução, pois uso fotos cm resolução grande.

    Existe alguma outra solução? Será que fiz algo errado?

    Obrigada!

    ResponderExcluir
  30. para resolver esse problema eu hospedo ela diretamente no picasa, abro ela e arrasto para o post assim ela fica em seu tamanho original sem perder qualidade e sem precisar editar nada. E se quiser aumentar a largura ou altura e so clicar em editar html e modificar os valores de largura e altura da imagem

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

URLs personalizadas para páginas no Blogger