Para ampliar esta entrada sobre Picasa, vamos a tunear un poco el código para enlazar un album que nos ofrecen en la web. Me refiero al código HTML que nos da cuando le damos a “enlazar este album”.

 

 

Unos bonitos paisajes

 

Como podeis ver, nos sale algo muy canijo, muy soso y no se ve nada. Analicemos un poco el código:

 

<table style=”width:194px;”><tr><td align=”center” style=”height:194px;background:url(https://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite”><img src=”https://lh3.googleusercontent.com/–dUPTazVzZ4/Tlx6jtOt-zE/AAAAAAAAOTQ/7ZOzPT-gzJA/s160-c/PaisajesSueltos.jpg” width=”160″ height=”160″ style=”margin:1px 0 0 4px;”></a></td></tr><tr><td style=”text-align:center;font-family:arial,sans-serif;font-size:11px”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite” style=”color:#4D4D4D;font-weight:bold;text-decoration:none;”>Paisajes sueltos</a></td></tr></table>

Lo primero que haremos será cambiar el tamaño:

<table style=”width:194px;”><tr><td align=”center” style=”height:194px;background:url(https://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite”><img src=”https://lh3.googleusercontent.com/–dUPTazVzZ4/Tlx6jtOt-zE/AAAAAAAAOTQ/7ZOzPT-gzJA/s160-c/PaisajesSueltos.jpg” width=”160″ height=”160″ style=”margin:1px 0 0 4px;”></a></td></tr><tr><td style=”text-align:center;font-family:arial,sans-serif;font-size:11px”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite” style=”color:#4D4D4D;font-weight:bold;text-decoration:none;”>Paisajes sueltos</a></td></tr></table>

Tenemos dos valores: 194 y 160. El primero define el tamaño del marco, y el segundo el tamaño de la imagen. Uno de los valores que vemos, s160-c, es el que nos da el tamaño de imagen que google nos va a poner, si nos olvidamos de cambiarlo nos saldrá la imagen pixelada, la c significa crop, o recortada para ajsutarse al cuadrado que tenemos. Los cambiamos (yo he puesto 520 y 500), con eso conseguimos que se vea mucho más grande. Si en vez de eso queremos mostrar la foto entera y sin deformar, tendremos que cambiar los valores por los correspondientes para altura y anchura. Para una imagen 3X2 de 500 píxeles de lado largo la proporción es 500 de ancho por 350 de alto. Recordar que el tamaño del marco tiene que ser ligeramente superior. Si lo hacemos de esta manera, al tamaño de la foto, s500-c, le quitaríamos el -c para que no recortase.

 

En algunos casos querremos cambiar el título que nos aparece al pie de foto:

<table style=”width:194px;”><tr><td align=”center” style=”height:194px;background:url(https://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite”><img src=”https://lh3.googleusercontent.com/–dUPTazVzZ4/Tlx6jtOt-zE/AAAAAAAAOTQ/7ZOzPT-gzJA/s160-c/PaisajesSueltos.jpg” width=”160″ height=”160″ style=”margin:1px 0 0 4px;”></a></td></tr><tr><td style=”text-align:center;font-family:arial,sans-serif;font-size:11px”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite” style=”color:#4D4D4D;font-weight:bold;text-decoration:none;”>Unos bonitos paisajes</a></td></tr></table>

 

Si cambiamos ese valor nos saldrá el título que nosotros queramos, yo lo he cambiado a “Unos bonitos paisajes”.

El siguiente paso es cambiar el enlace. No le veo utilidad a tener dos veces el mismo enlace, por lo que podemos cambiar el enlace de la imagen para que nos muestre una presentación en grande de las imágenes en vez de llevarnos al album. Para eso, lo primero es localizar la parte que tenemos que cambiar:

 

<table style=”width:194px;”><tr><td align=”center” style=”height:194px;background:url(https://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite“><img src=”https://lh3.googleusercontent.com/–dUPTazVzZ4/Tlx6jtOt-zE/AAAAAAAAOTQ/7ZOzPT-gzJA/s160-c/PaisajesSueltos.jpg” width=”160″ height=”160″ style=”margin:1px 0 0 4px;”></a></td></tr><tr><td style=”text-align:center;font-family:arial,sans-serif;font-size:11px”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite” style=”color:#4D4D4D;font-weight:bold;text-decoration:none;”>Paisajes sueltos</a></td></tr></table>

Y la sustituimos por la URL de la presentación. Para conseguir esta URL abrimos el album,  nos vamos a la esquina superior izquierda y le damos a slideshow o presentación:

Y al darle nos abrirá la presentación y en la barra del navegador nos saldrá algo como esto:

https://picasaweb.google.com/101627247683677781970/PaisajesSueltos#slideshow/5650375344954064690

Borramos todos los números del final y lo ponemos en vez de la URL original. Si tras las comillas ponemos target=”_blank” nos abrirá la presentación en una nueva pestaña.

 

Por laguna razón puede que la imagen que Picasa nos resalta no sea la preferida en el album, pero que las fotos tengan cierto orden y lo queramos mantener, y al mismo tiempo que por alguna extraña razón no queramos convertir nuestra preferida en la portada del album en Picasa, pero si queremos que aparezca en como imagen de cabecera en el artículo. Para eso solo cambiamos la URL de la imagen:

<table style=”width:194px;”><tr><td align=”center” style=”height:194px;background:url(https://picasaweb.google.com/s/c/transparent_album_background.gif) no-repeat left”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite”><img src=”https://lh3.googleusercontent.com/–dUPTazVzZ4/Tlx6jtOt-zE/AAAAAAAAOTQ/7ZOzPT-gzJA/s160-c/PaisajesSueltos.jpg” width=”160″ height=”160″ style=”margin:1px 0 0 4px;”></a></td></tr><tr><td style=”text-align:center;font-family:arial,sans-serif;font-size:11px”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&feat=embedwebsite” style=”color:#4D4D4D;font-weight:bold;text-decoration:none;”>Paisajes sueltos</a></td></tr></table>

Nos vamos a la imagen que queremos, y con botón derecho seleccionamos copiar la URL, y nos da algo parecido a esto:

https://lh6.googleusercontent.com/-jqV1YKsPuEo/TmoqfSCmAnI/AAAAAAAACCU/VmTkmQG5QPo/s720/181702_660480000954_33307899_37235489_4651585_n.jpg

 

Sustituimos uno por otro y tenemos cuidado con el tamaño (que modificamos para la anterior URL pero no para esta. Los números que he marcado en rojo, s720, los cambiamos por s500, para que nos ponga la imagen que queremos al tamaño que queremos y recortada (si no lo ponemos nos deformará la imagen para encajarla en el cuadrado).

El código nos quedaría más o menos como esta:

<table style=”width: 520px;”>
<tbody>
<tr>
<td style=”height: 370px; background: url(‘https://picasaweb.google.com/s/c/transparent_album_background.gif’) no-repeat left;” align=”center”><a href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos#slideshow/” target=”_blank”><img style=”margin: 1px 0 0 4px;” src=”https://lh6.googleusercontent.com/-jqV1YKsPuEo/TmoqfSCmAnI/AAAAAAAACCU/VmTkmQG5QPo/s500/181702_660480000954_33307899_37235489_4651585_n.jpg” alt=”” width=”500″ height=”350″ /></a></td>
</tr>
<tr>
<td style=”text-align: center; font-family: arial,sans-serif; font-size: 11px;”><a style=”color: #4d4d4d; font-weight: bold; text-decoration: none;” href=”https://picasaweb.google.com/101627247683677781970/PaisajesSueltos?authuser=0&amp;feat=embedwebsite”>Unos bonitos paisajes</a></td>
</tr>
</tbody>
</table>

 

Unos bonitos paisajes

Si lo comparamos con el original:

Paisajes sueltos

La cosa mejora bastante.

http://www.apratizando.com/wp-content/plugins/dn_iSocial/images/facebook_48.png http://www.apratizando.com/wp-content/plugins/dn_iSocial/images/linkedin_48.png http://www.apratizando.com/wp-content/plugins/dn_iSocial/images/twitter_48.png http://www.apratizando.com/wp-content/plugins/dn_iSocial/images/meneame_48.png http://www.apratizando.com/wp-content/plugins/dn_iSocial/images/barrapunto_48.png