Galería de imágenes sencillísima y a prueba de torpes

Hace un tiempo alguien me pidió que le montara una página a modo de galería de imágenes o portfolio, en la que mostrar a tamaño reducido determinada colección de fotografías para después poderlas ampliar a demanda.

Existen multitud de plugins JavaScript para esto (1)(2), pero evidentemente requieren de un extra de código con este lenguaje que normalmente no es corto y que incrementará el peso de nuestra plantilla a medida que lo compliquemos para incorporar efectos. También requieren de un tiempo de procesado que además de volver a sumar para el tiempo de carga, provoca que en conexiones lentas a veces se vea un pequeño desbarajuste antes de que se compongan todas las imágenes adecuadamente.

Galería de imágenes para Blogger a prueba de torpes

Otro sistema alternativo sería usar exclusivamente CSS (1)(2), que es mucho más liviano tanto en carga como en procesado. El problema en este caso es que que casi siempre hay que delimitar a priori la cantidad de imágenes a mostrar y en función de ese número ir reconstruyendo las reglas, algo que no está al alcance de todos.

Para ese caso que comento en el que sobre todo necesitábamos hacer algo sencillo, se me ocurrió aprovechar las características de Blogger para que sólo fuera cuestión de subir imágenes. Va a dar igual la proporción o tamaño que tengan, funcionará independientemte del posicionamiento que marqueis (centrado, flotado...) e incluso si llevan espaciados o saltos de líneas entre ellas; con sólo añadir un CSS a la página la galería saldrá siempre con el mismo formato y ellightbox propio de Blogger hará el resto ¿lo vemos?

Y si dije en el título de esta entrada que era sencillísimo, así va a ser. Sólo tenemos que seguir tres pasos, a cual más fácil:

1. Crear una página estática

Vamos alEscritorio de Blogger y accedemos a la opción del menú denominadaPáginas. Una vez allí pinchamos en el botónPágina nueva.

2. Añadir el CSS directamente en la página

Para que el nuevo estilo no afecte a las entradas normales y sobre todo, para no complicarnos, pegamos este CSS directamente en la página.

La única precaución que tenemos que tener aquí es que enConfiguración de la página tengamos seleccionada la opciónInterpretar HTML escrito, aunque tampoco es imprescindible... creo.

Este código llama a los selectores que habitualmente usa Blogger para el cuerpo de entradas y las imágenes que en él podemos subir, así que si tu plantilla usa selectores distintos (no es muy habitual que cambien precisamente estos), puede que tengas que cambiarlos.

!-- SIEMPRE MANTENER ESTAS LINEAS A PARTIR DE AQUÍ ** NO BORRAR --
!-- ESTILO PARA GALERIA. SUBIR IMAGENES DESDE EL EDITOR, DE CUALQUIER MANERA Y DEJAR HACER A ESTO --
style.post-body * {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;} .post-body {text-align: center !important;font-size:0 !important;line-height:0 !important;} .post-body br {height:0;width:0;display:none;} .post-body a, .post-body img, .post-body .separator, .post-body .separator a {clear:none !important; float: none !important; display: inline-block !important;*display: inline !important; zoom:1 !important; max-width: 100% !important;padding: 0 !important; margin:0 !important; border: 0 !important; font-size:0 !important;} .post-body img {width: 200px !important;max-width: 100% !important;height: auto !important;margin: 10px !important;background: white !important;padding: 10px !important;vertical-align: middle !important;-moz-box-shadow: 1px 1px 3px #999;-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;} /style

3. Subir imágenes con el editor al libre albedrío

Ahora, una vez el CSS está en la página, ya sólo tenemos que añadir imágenes a discreción usando el correspondiente botón del editor.

Como decía al principio, dará igual que las alineemos a la derecha, a la izquierda, que las centremos, que le demos un tamaño u otro. Ese CSS que pusimos anulará todos los estilos que se pudieran insertar intencionada o accidentalmente y las imágenes se mostrarán con un ancho de 200px, centradas en el cuerpo de las entradas y centradas también en vertical con respecto a cada línea o fila.

Cierto es que no todas tendrán la misma forma si son distintas, pero para que fuera de otra manera tendríamos que deformarlas forzando su redimensión (.post-body img {height: 200px;}) y me pareció más elegante dejarlas sin distorsión aún a pesar de lo antes comentado.

Si posteriormente queremos añadir más imágenes sólo tenemos que editar la página y hacerlo. Lo único que habrá que tener en cuenta es que se puede eliminar todo lo que hayamos añadido, excepto el CSS. Una vez guardada o publicada la página, esas líneas sólo son visibles si usamos el editor desde la pestañaHTML. Desde la deRedactar serán invisibles.

Si queréis que os quepan más imágenes por línea sólo habría que modificar el valor200px del CSS a otro menor (180px por ejemplo para cuerpos de entradas de unos 800px de ancho). Y no hay que preocuparse por otra cosa porque estas imágenes así montadas funcionan bien hasta en plantillas adaptables (RWD), ni siquiera porque en el editor las imágenes no se vean bien.

Y bien ¿qué os parece? ¿Es sencillo o no tener algo como lo siguiente?