Galería de imágenes usando CSS

El otro día vi en CSSplay una galería de imágenes usando sólo CSS, es bastante sorprendente. Me picó la curiosidad (y eché un vistazo a su código) así que después de teclear un rato, he hecho algo parecido, aunque sin ese segundo nivel de aumento, es decir, mucho más sencillo.

El ‘truco’ está en crear una capa que se active cuando se hace mouse over, es decir, cuando pasamos el puntero del ratón sobre un elemento.

.thumb:hover span {
          background-color: #333;
          visibility: visible;
          right: 0;
          top:  150px;
          left: 0px;
          z-index: 50;
          margin: 0 auto;
          width: auto;
}

Fijaos en el atributo visibility, en la clase de arriba está como visible.

.thumb span {
          position: absolute;
          top: 150px;
          left: -1000px;
          visibility: hidden;
          color: #fc7;
          font-family: "Andale mono", "Trebuchet MS", sans-serif;
          font-size: 12px;
          border-bottom: 1px dashed #666;
}

Aquí, sin embargo, visibility está como hidden, es decir que no se muestra, está oculto. Así que dependiendo de si se pasa el puntero del ratón por encima de un elemento o no, se mostrará una capa u otra.

Podéis verla en funcionamiento aquí. Y por supuesto os podéis descargar la galería completa para investigar / romper / copiar / modificar el código :-)

PD Debería funcionar bien en todos los navegadores decentes, cumple con los estándares XHTML y CSS, pero no te me quejes si usas el Internet Explorer, eso ya no es culpa mía :-P

SPGM: una galería muy válida

Hoy en día hay un montón de generadores de galerías web. Tú sólo les das las fotos, y el script se encarga de crear la galería, sin tú tener que preocuparte de escribir código. Los hay muy buenos, pero hoy os voy a hablar de SPGM (Simple Picture Gallery Manager), por varias razones:

• Es código abierto
• No usa bases de datos
• No usa la librería GD
• Está en español
• Las galerías que genera son XHTML 1.0 Strict válidas.

Lo cierto es que la última opción fue la que me hizo decantarme por ella.

Instalación

Debemos tener instalada la versión 4 ó superior de PHP. Nos descargamos la última versión y lo descomprimimos en un directorio. Si lo subimos a nuestro espacio web, la dirección de la galería sería algo así: http://www.tuweb.com/spgm-xxx/index.php. spgm-xxx variará según la versión que te hayas descargado. Obviamente, puedes darle el nombre que quieras a ese directorio.

Pues la instalación era eso nada más. Ahora sólo queda meterle contenido :-)

Creando galerías

Por defecto, sólo tenemos que crear directorios dentro de la carpeta gal. Así que, si queremos crear una galería llamada Fotos, tendremos que crear un directorio con ese nombre en gal, de tal forma que nos quedaría gal/Fotos/. Los nombres de las galerías (los directorios) no pueden contener espacios, pero podemos escribir en su lugar un guión bajo ‘_’ y el script lo interpretará como un espacio: gal/Fotos_de_coches.

Ahora metemos las fotos en esos directorios. Y nos falta un último paso, debemos crear nosotros las miniaturas (thumbnails) de las fotos. Sí esto puede ser algo engorroso, pero es la desventaja de no usar la librería GD para la manipulación de imágenes. Sin embargo, dentro de la carpeta tools nos incluyen un script tanto para Windows (genthumb.bat) como para Linux (genthumb.sh) que nos facilitarán el proceso, haciendo automáticamente las miniaturas de las fotos. De todos modos, por si os sirve, yo hice un script bastante más sencillo (para Linux):

#!/bin/bash
for image in `ls *.jpg`
do
        convert $image -resize 150x113 _thb_$image
done

Es necesario tener instalado el paquete imagemagick. Lo que hace el script es que para todas las imágenes (en este caso, .jpg) que haya en el directorio donde se ejecute el script, las reduce a un tamaño de 150 píxels de ancho y 113 de alto, y les da un nuevo nombre (no borra las originales) de la forma _thb_nombre_de_la_imagen_original.jpg.

Para usar el script, primero copiáis las líneas de arriba en un fichero, lo llamáis como queráis (mejor algo descriptivo, claro) y le dais permisos de ejecución (en consola es tempwin@linux:~$ chmod +x nombre_script). Y lo ejecutáis tal que así: tempwin@linux:~$ ./nombre_script :-)

Venga, y ya tenéis la galería creada :-) Pongámonos ahora con la configuración/personalización.

Archivos y directorios

Así está estructurado SPGM junto con sus archivos importantes:

• contrib/ – Donde está una librería javascript que usa SPGM para mostrar información EXIF.
• css/ – La hoja de estilo del aspecto superficial de la galería.
• flavors/ – Carpeta de temas, para modificar el aspecto de la galería.
• gal/ – Por defecto es el directorio donde se almacenarán los álbumes que queramos añadir a la galería.
• gal/spgm.conf – Archivo de configuración de la galería, para editar algunos aspectos de la misma.
• lang/ – Carpeta con los archivos de lenguaje, para traducir la galería.
• tools/ – Herramientas para la creación automática de miniaturas.
• spgm.php – Es el script que se encarga de crear la galería.

Idioma

Dentro de la carpeta lang tienes bastantes idiomas para elegir. Por defecto, viene en inglés. Si queremos cambiar el idioma, tenemos que editar el archivo spgm.conf, que está dentro de la carpeta gal. Casi al final podemos ver una línea que pone $cfg['conf']['language'] = 'en';, por defecto, está comentada (con un # delante). Borramos el # y le ponemos el idioma, es para el Español.

Número de miniaturas

Otro aspecto que nos interesará, será el número de miniaturas que queremos que se muestre en cada página de nuestra galería. Lo podemos definir también en el mismo archivo que antes. En la línea $cfg['conf']['thumbnailsPerRow'] = 4;, le indicamos que queremos que aparezcan cuatro miniaturas por fila. Y en $cfg['conf']['thumbnailsPerPage'] = 12;, decimos que queremos 12 miniaturas por página.

Modificando el aspecto

Podemos cambiar la apariencia de la galería mediante unos estilos o sabores (flavors, como dicen ellos). Hay algunos disponibles en su página web. Tan sólo los descargamos, los metemos en la carpeta flavors, extramos el contenido, y en el fichero (¿a ver si lo adivinas?) spgm.conf le decimos el nombre del tema que queremos usar en la línea $cfg['conf']['theme'] = 'clean';. Para este ejemplo, es el tema clean (debes poner el nombre que tenga la carpeta del tema).

Sólo te hace falta saber algo de CSS y XHTML para hacer tus propios temas o modificar el aspecto de la galería a tu gusto.

Alternativas

• Gallery (la versión 1 no usa base de datos)
• Coppermine
• Plogger: La mejor alternativa a SPGM aunque usa base de datos

Ah, por cierto, mi galería está funcionando con SPGM ;-)

Saber hacer de todo

Un ser humano debería ser capaz de cambiar un pañal, planear una invasión, despiezar un cerdo, ensamblar una barca, diseñar un edificio, escribir un soneto, hacer un balance, levantar una pared, expresarse en otro idioma, remendar un hueso roto, confortar a un moribundo, obedecer órdenes, dar órdenes, cooperar, actuar en solitario, resolver ecuaciones, analizar un nuevo problema, esparcir estiercol, manejar un ordenador, cocinar una comida sabrosa, sufrir con entereza y luchar eficientemente. La especialización es para los insectos.

Robert A. Heinlein, escritor de ciencia ficción.

Ejecutando PHP como módulo del Apache. Así, sí.

Esto que escribo lo hago principalmente para los usuarios de DreamHost (como nuevo miembro que soy), ya que me he estado fijando en que los scripts en PHP los ejecuta como CGI por defecto y esto es algo que nunca debería permitirse, por dos razones fundamentales:

• Ejecutar PHP como CGI es muy inseguro
• Consume muchos más recursos porque se ejecuta como un programa

No es mi objetivo meterme aquí en explicaciones técnicas sobre una cosa o la otra, la idea es que PHP como CGI es malo.

Cómo saber si PHP se está ejecutando como módulo del Apache o como CGI

Si tenéis la duda, podéis crear un archivo, por ejemplo informacion.php con el siguiente contenido:

<?php phpinfo(); ?>

Lo subís a donde tengáis vuestra web y ponéis en el navegador: http://vuestraweb.com/informacion.php

En la parte que pone Server API, pondrá CGI (si PHP se ejecuta así) o Apache Handler si se ejecuta como módulo del servidor Apache.

Ejecutando PHP como módulo del Apache

Tenemos la opción de ejecutar PHP como módulo del Apache (el servidor web) que es como deberíamos tenerlo ya desde un principio. Para hacer eso, tendremos que crear (si no lo tenemos) un archivo .htaccess (nótese el punto delante del nombre, así es como en los sistemas UNIX se nombra a los archivos ocultos) con el siguiente texto:

AddHandler application/x-httpd-php .php

Y ahora lo subiremos al directorio raíz de nuestro espacio web. Podemos ejecutar otra vez el archivo informacion.php en el navegador para ver cómo se ha cambiado.

Aunque, como dije al principio, esto lo escriba para usuarios de DreamHost, vale para todos los que tengais alguna web en algún hosting o en el servidor de casa.

Por cierto, aunque no sepáis de qué va esto del PHP, seguro que sí conocéis herramientas como WordPress, phpBB, MediaWiki, Gallery… Pues usan PHP.

Sólo para usuarios de DreamHost: al activar PHP como módulo del Apache, no tendremos disponible la versión 5 del PHP, sino la 4.4.2. Si veis que usáis alguna herramienta o habéis hecho algún script que usa alguna función nueva de la versión 5 de PHP o no existía en versiones anteriores, tendréis que volver a poner PHP como CGI, y allá vosotros :-P

Haciendo limpieza

Aprovechen la pausa para revisar su agenda de amigos, encontrarán que han malgastado su preciado tiempo y paciencia en conocer a un montón de ineptos, no se corten, cojan un boli y táchenlos.

Antonio Gasset, presentador del programa ‘Días de Cine’ de La2