Mostrando entradas con la etiqueta fotos. Mostrar todas las entradas
Mostrando entradas con la etiqueta fotos. Mostrar todas las entradas

lunes, 3 de mayo de 2010

Imágenes Picasa y sus thumbnails


POST OBSOLETO. El 11 de diciembre de 2011, Google modificó el funcionamiento de descarga de las imagenes en Picassa Web. Ahora se puede descargar un thumbnail en cualquier tamaño hasta un máximo de 1600px.

Una imágen subida a Picasa se reducirá a 1600px en su lado de mayor longitud, el lado más corto se reduce proporcionalmente. Si la imágen es GIF y mide más de 1600px, además se convertirá a PNG.

Picasa puede presentar 22 thumbnails que tienen el lado mayor en estos tamaños N:
32, 48, 64, 72, 94, 104, 110, 128, 144, 150, 160, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800 y 1600 pixels.

Según mi criterio una foto se vería adecuadamente presentada en un tamaño máximo 800x600px. Los tamaños resultantes de los thumbnails en este caso serían:
32x24, 48x36, 64x48, 72x54, 94x70, 104x78, 110x82, 128x96, 144x108, 150x112, 160x120, 200x150, 220x165, 288x216, 320x240, 400x300, 512x348, 576x432, 640x480, 720x540 y 800x600 pixels.

En cualquier caso y siempre según mi criterio, la imágen no debería medir más de 600px de alto, a menos que tengamos un sistema de ajuste a la ventana del navegador (ver por ejemplo Zoom de las imágenes)

El path absoluto a cada thumbnail lo podemos obtener del path absoluto a la imágen, insertando sN/, justo antes del nombre de la imágen, donde N es uno de los valores indicados anteriormente:

Path absoluto a una imágen 800x600px subida a Picasa:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/
Path absoluto a los thumbnails:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s32/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s48/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s64/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s72/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s94/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s104/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s110/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s128/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s144/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s150/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s160/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s200/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s220/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s288/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s320/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s400/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s512/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s576/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s640/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s720/800x600.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s800/800x600.gif

El tamaño máximo que podríamos indicar será s1600:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqUeHD6N7heqNe0i3pWznAv8P6jlMXm-JA_ttU1IuqVhR6Cy9oKGbrm6CY4wToqEVX-T9uedWSoecAX8Ay6Ggv3mRRJJ4NbQAyiI9kSyqas3z8hFaFTAs8zJUPottQI02j-RtERmuH6Q/s1600/800x600.gif

Si indicamos un tamaño s1600, la imágen será presentada en su tamaño máximo con el zoom de ajustar al tamaño de la ventana del navegador desactivado:
Publicado por BikerTB a las 20:35
Etiquetas: , ,

viernes, 23 de abril de 2010

Zoom de las imágenes


El zoom al hacer click sobre las imágenes se consigue con el JavaScript BrighBox que hay que poner en la plantilla justo antes de la etiqueta de fin de cabecera.
<script src='http://sites.google.com/site/bikertb/ficheros-para-el-blog/BrightBox_v2.0_compressed2.js' type='text/javascript'></script>
</head>
El thumbnail (img) de la imagen debe estar encerrado en un ancla (a) con la propiedad onblur definida con el valor que aparece a continuación. El ancla debe apuntar a la imagen ampliada.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://lh5.ggpht.com/_5SvLLd6obBo/ESRrptIEHNI/s0/Picos_de_Europa-DSC0574.JPG"><img src="http://lh5.ggpht.com/_5SvLLd6obBo/ESRrptIEHNI/s220/Picos_de_Europa-DSC0574.JPG" /></a>
Algunos editores blogger wysiwyg introducen el parámetro onblur con el valor adecuado de forma autómatica, si no ocurre esto, hay que ponerlo a mano.

Este es un pequeño hack que modifica el JavaScript, para que el caption de la imágen ampliada tenga 12pt y una fuente Verdana, Arial o Sans-serif (buscar el código en azul y sustituirlo por el rojo):
imageText.style.fontSize = parseInt(bottomBuffer * 0.3) + "px";

imageText.style.fontSize = parseInt(bottomBuffer * 0.2) + "px";imageText.style.fontFamily = "Verdana, Arial, Sans-serif";
Ejemplo de imagen ampliable:
Zoom

Puedes encontrar BrightBox en AI projects o coger el mío. No olvides abrir el código y customizarlo.


NOTA: Para las imágenes de los post posteriores a julio de 2011 se empezó a usar Shadowbox.

Publicado por BikerTB a las 22:42
Etiquetas: , , ,

miércoles, 24 de marzo de 2010

Fotos enmarcadas automáticamente




Agregar el siguiente código CSS a la plantilla del blog:
/* Recuadros de las fotos */
.post .img-BTB {
   margin:0 0 5px 0;
   padding:4px;
   border:1px solid #de7008;
   background:#f5e39e;
}
Y la correspondiente clase al código de la imágen:
<img class="img-BTB" WIDTH: 230px; FLOAT: left; HEIGHT: 175px;
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNms2kqLdOb97fJSXSQgZJnTh9yPQswsYx_1VVy8lqRhUfnvQ7-Qgs1ptK3b08rVI_OWWk6MMtf8uVA_pFMcEAyuVVGGNlfbspNooeOIIEpgs3BFp-mSqwSPEKMLlj4Peuyh6Q1HubGs/" />
Publicado por BikerTB a las 19:03
Etiquetas: , ,
Suscribirse a: Entradas (Atom)