Hoy hemos necesitado incluir directamente una imagen compartida por un cliente en Google Plus pero necesitábamos ajustar sus dimensiones. Dado que no hemos encontrado mucha documentación, nos hemos animado a estudiar un poco como re-dimensionar imágenes que se comparten desde los servidores de Google, como sería el caso de fotos publicadas en Google+ y otros servicios de Google.

Contamos con un desarrollo PHP propio de publicación de fotos sobre picasa web albums y que usamos en varios proyectos con miles de imágenes, por lo que conocemos el uso de esa API y el re-dimensionado de imágenes desde servidor y deducíamos que era cuestión de averiguar los parámetros para que Google hiciera el trabajo por nosotros. Como hemos dicho, nos ha extrañado no encontrar documentación específica al respecto por lo que esta entrada está hecho por deducción y sin garantía alguna de su funcionamiento futuro.

Al tema. La clave está en la URL de la que se sirve la imagen. Partiendo de cualquier imagen de google plus por ejemplo, si cogemos la imagen original nos encontraremos con algo como:

//lh4.googleusercontent.com/-qMBc8M5jvGw/UvtTupyWiQI/AAAAAAAAAE8/GyNEZoa6zAw/w576-h500/lachapaCD_898.jpg

Fíjate en la parte que hemos marcado en negrita de sencilla deducción. w corresponde al ancho (WIDTH) y h al alto (HEIGHT). La lógica es similar a la de otras librerías, se determina el lado más grande y se encaja a las dimensiones solicitadas. Es decir algo como “que quepa en” las dimensiones que proporcionas sin distorsión ni recorte.

Haciendo pruebas y siguiendo la lógica de otras APIs asumimos que también puedes usar un solo parámetro para determinar el lado más grande que quieres (según sea la foto original) por ejemplo “s200” que determina el lado más grande.

Usando “s200”

Es decir, “w512-h300” sería igual que usar “s512” en una imagen horizontal, pero no en vertical.

Pero el parámetro “-no” de la URL original nos daba pie a buscar como hacer el crop y acabamos descubriendo que un guión “-c” en lugar del “-no” cumple esta función. Ahora las dimensiones corresponden al área que queremos “rellenar” haciendo el recorte desde el centro de la imagen.

Recortamos añadiendo un “-c”: w576-h100-c

Y claro “perder el tiempo” así,  algunas vences, no siempre, proporciona alguna que otra “recompensa”. Si añades otra c más “-cc” el recorte será redondeado sobre esas dimensiones, al estilo de los círculos de personas de Google+

/w512-h100-cc/

Se ve mejor si lo hacemos sobre dimensiones cuadradas que correspondan al círculo que queremos:

Usando “/w200-h200-cc/”

Y otra “curiosidad” descubierta “dando palos de ciego”, añade una “b” + 1 número y tendrás un bonito marco para tu imagen:

Usando: w512-h300-b10

Nos queda la espinita de averiguar como hacer recortes orientados. En otras librerías se usan parámetros “t,b,l,r” para top, bottom, left, right o cardinales tipo SW para determinar desde donde se recorta la imagen. Si sabes donde localizar documentación extra o averiguas algo más, no dejes de contárnoslo.