Pesquisa personalizada

terça-feira, 18 de janeiro de 2011

Como colocar uma imagem quadrada do Picasa no Blogger





No post da semana passada, onde ensinei a redimensionar as imagens do Picasa no Blogger (Leia o post "linkado" para entender este tutorial.), coloquei um conselho no final, sobre a qual prometi falar em um outro post ou seja, este:

Agora um conselho, nunca force uma imagem para ficar quadrada (lados iguais) usando os parâmetros width e height, ela ficará distorcida e não agradável ao olhos de quem a vê.
Para quem não entendeu, eis o que eu quis dizer:

Fonte: Aldeia da Serra
A imagem acima tem dimensões 700 x 500, que foi redimensionada no post para ficar com 400 x 285, como podem ver no código dela abaixo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s400/garfield_gets_real.jpg" width="400" /></a></div>

Digamos que você queira obter uma imagem quadrada 500 x 500, então você altera os parâmetros width e height para esses valores no código, e apaga o s400:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="500" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/garfield_gets_real.jpg" width="500" /></a></div>

Olhe o que se obtém:

HORRÍVEL!!!

Uma imagem distorcida, forçada e não agradável para quem a olha.

Para obter uma imagem quadrada, sem distorção, devemos apenas acrescentar no 2º link do código da imagem, em [s+número] a terminação -c, podendo apagar os parâmetros width e height tranquilamente do mesmo. Eis como:

- s100-c

100 X 100
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s100-c/garfield_gets_real.jpg" /></a></div>

- s300-c

300 X 300
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s300-c/garfield_gets_real.jpg" /></a></div>

- s450-c

450 X 450
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s450-c/garfield_gets_real.jpg" /></a></div>

- s523-c

523 X 523
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_okYQdwGKpvE/TTS099m3qWI/AAAAAAAAHfM/vLYrfq_70zY/s523-c/garfield_gets_real.jpg" /></a></div>

Na prática, o código [s+numero]-c faz com que a imagem seja recortada automaticamente com lados iguais, mantendo-a proporcional. Sempre lembrando que o comprimeto (width) máximo das imagens hospedadas no Picasa é sempre 1600px.

Obs.: Nos códigos acima, coloquei somente a parte principal, sem as legendas, para não poluir os mesmos.


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



2 comentários :

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.