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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s100-c/garfield_gets_real.jpg" /></a></div>

- s300-c

300 X 300

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s300-c/garfield_gets_real.jpg" /></a></div>

- s450-c

450 X 450

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s450-c/garfield_gets_real.jpg" /></a></div>

- s523-c

523 X 523

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/s1600/garfield_gets_real.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb0Npobgk7qJe4xiZ1sQdTZ2LN-jJxhMnl4TBuTeXL2BtYpMQMPMe9j85NMECyHZjYWNunlRaceG8o4uFK1RV0M6CyFkFlNnM9lPzEiZIJuLXwvKCAA5qXrmOTAp605T75AEvo/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.