CÓMO CREAR UNA GALERÍA DE FOTOS (TABLA DE IMAGENES) EN EL BLOG

    En realidad el título de esta entrada debería ser mucho más largo porque sirve para mucho más que para hacer una galería de fotos o una tabla de imágenes.  

    Sirve por ejemplo para alinear fotos en una entrada como esta de aquí. ¿Veis la foto de la planta y el pollo? Pues loca me volví intentando colocarlas centradas, a la misma altura y con una separación adecuada, hasta que se me ocurrió el primer truco: usar un editor fotográfico para unirlas con un espacio transparente en el centro y convertirlas en una sola foto. Y me quedé más ancha que larga. Pero claro, después se me ocurrió que podía hacer un menú en  imágenes de mi blog y llamarlo "Galería de la fama".

    Y aquí la cosa se complicaba... ¿Hacía una foto gigante compuesta de todas las fotos de mi blog? ¿Hacía varias fotos con media docena en cada una? Hmm no era mala opción pero yo quería que mis fotos fueran el enlace a la entrada, así que el editor fotográfico esta vez no era solución. Y buscando buscando encontré la solución: hacer una tabla donde puedes añadir fotos, texto, botones... de forma ordenada y sobre todo fácil. Vamos allá:

    Supongamos que lo que queremos hacer es una galería como la mía, la tengo en una página así que iremos a CREAR UNA PÁGINA NUEVA>>HTML y ahí pegaremos el siguiente código:

<table><tbody> <tr> <td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO" border="0" src=" URL FOTO " width="120" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr> </tbody></table> </td> <td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO" border="0" src=" URL FOTO " width="120" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr> </tbody></table> </td> <td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="URL" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="TITULO FOTO" border="0" src=" URL FOTO " width="120" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"> TEXTO1 <br/>TEXTO2</td></tr> </tbody></table> </td> </tr> </tbody></table>

    Cada bloque de texto azul es una celda de nuestra tabla (marca el número de columnas), y el código completo es una fila (en este caso tendríamos una fila de tres columnas). En la foto de mi galería he repetido una vez más el bloque azul para poner cuatro columnas, (siempre entre  <table><tbody><tr> y  </table></tbody></tr> ) y he repetido el código completo tres veces para tener tres filas. Lo que está marcado en rosa debemos modificarlo con nuestros datos:

URL: Dirección a la que enlazará nuestra foto al pinchar en ella (opcional).

TÍTULO  FOTO: Título o descripción de la foto (opcional, es el título que se ve si el navegador no carga la imagen)

URL FOTO: Dirección de nuestra imagen.

TEXTO: Escribe aquí lo que quieras (opcional). 

* width="120" :Corresponde a la anchura y también puedes variar su valor.

    Como siempre, modificando un poco aquí y otro poco allá, podemos hacer infinidad de cosas, como por ejemplo un catálogo de venta con precios y botón de paypal:

    Podemos crear tablas en una entrada, en una página, en la sidebar (mis iconos de redes sociales están puestos como tabla)... Podemos variar el número de filas o columnas en función del tamaño de nuestras fotos como en esta otra parte de mi galería:

    Ya puedes crear tu propia galería de fotos, ahora usa tu imaginación (y un poco de CCS) y cambia el tamaño de celda formando un collage, añade o quita el enlace a cada foto, haz que cada imagen cambie al pasar el raton encima....

    Eso si, RECOMENDACIÓN MUY IMPORTANTE: Escribe todo tu código en un documento de word y haz ahí las modificaciones y añadidos, después puedes copiarlo y pegarlo en tu blog (HTML). Será mucho más fácil.

    

Sígueme en:

   ❤ Pinterest   ❤ Facebook    ❤ Google+    ❤ Twitter   ❤ Youtube