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:
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
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;">Agora vamos decompor este código por partes:
<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>
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:<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.
<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
Aê
ResponderExcluirOntem mesmo eu tava procurando, cmo postar as imagens maiores!
Vlw Compulsivo
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?
ResponderExcluirEsta dica é muito útil, pois as vezes devidos as limitações do código, a imagem fica meio ruim no post.
ResponderExcluirAbraço
Puts, estava eu atoa aqui, preparando uma postagem e você me vem com uma dessas..
ResponderExcluirEra 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!
Eu prefiro hospedar a imagem em um outro site e colocar ela no blogger,
ResponderExcluirDepois 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
@Kazuya, nunca tive problemas com imagens PNG com transparências, a não ser é claro no Internet Explorer 6...
ResponderExcluir@Zumbartes, se a pessoa quiser ver em tamanho original, acaba saindo do seu site...
[]'s
Compulsivo
@Compulsivo, Eu uso o FF3! Já faz uns 4 meses, então acho que já é problema velho.
ResponderExcluirOff-Topic:
ResponderExcluirAê Compulsivo, tá sabendo que você está no Top 100 do Ranking Alexa?
Parabéns, arrebatou a posição 68
Abçs
Valeu @Felipão! Tô sabendo sim, até dei uma twittada a respeito disso...
ResponderExcluir[]'s
Compulsivo
vlw pela dica, há algum tempo atrás, me preocupei muito com isso hehe.
ResponderExcluirValeu 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.
ResponderExcluirAlém de caipira descobri que sou burro.
Abraço e sucesso Compulsivo.
Não precisa nada disso. Basta clicar no canto da imagem onde tem as marcas para redimensionar e ir esticando. Está desaprendendo?
ResponderExcluir"Top 100 do Ranking Alexa?"
ResponderExcluirCompulsivo, começo a acreditar que você anda escrevendo seus próprios comentários... Tá ficando megalomaníaco?
@Nospheratt, sei que é possível redimensionar a imagem desse jeito e também reposicioná-la arrastando de um lado para o outro.
ResponderExcluirMas 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
Exatemente o que eu ando precisando para algumas idéias malucas de uma mente insana.
ResponderExcluirValeu Compulsivo!
Ei Compulsivo,
ResponderExcluirTudo 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.
Olá,
ResponderExcluirUltimamente 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
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.
ResponderExcluir@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
Ótima dica! Estava mesmo com dúvidas sobre isto. Ebora utilize o modelo pronto, penso em ter um modelo personalizado em breve. Valeu.
ResponderExcluirBjs
Berenice
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...
ResponderExcluir...Foi a única forma de retirar o link para imagem original...
...Mas mesmo assim valeu pela dica....
abraços!!
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ótimo post !!!!!
ResponderExcluirOlá... eu estou editando a imagem dessa forma, mas ele a imagem nao aparece no site. Olha um exemplo
ResponderExcluirhttp://www.davidarchuleta.com.br/2009/03/fotos-da-turne-por-mike-k.html
@David, onde você deixou S00-R, substitua por S800-R. Já corrigi no post, valeu!
ResponderExcluir[]'s
Compulsivo
O blogger limita o tamanho da imagem em 400px quando se usa um domínio personalizado. Existe alguma maneira de burlar isso?
ResponderExcluir@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.
ResponderExcluir[]'s
Compulsivo
exelente. fucionou e eu nem useu o Blogger Draft. usei o o normal mesmo e funcionou
ResponderExcluirAntes 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 ;)
ResponderExcluirUma outra opção é usar a url do link:
ResponderExcluir<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.
Oi...
ResponderExcluireu 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!
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