WordPress como galería de imágenes

Hacía tiempo que quería montar un blog con imágenes y fotografías, y aunque hay ejemplos de portales creados para ello, no quería dejar pasar la oportunidad de investigar un poco sobre WordPress.

La idea era que publicar las imágenes fuera lo más sencillo posible, sin tener que añadir campos a mayores en los posts. Añadir una imagen será tan sencillo como crear un post e incluir nuestra imagen como habitualmente hacemos.

La elección de wordpress fue para asegurar un gestor de contenidos que está evolucionando contínuamente y tiene una amplia cobertura y soporte en la comunidad (y además es gratis).

Podríamos dividir el problema en tres partes:

  1. Obtener el listado de imágenes.
  2. Formatear en forma de galería dichas imágenes.
  3. Crear una página en wordpress y asignarle la template

1.Obtener el listado de imágenes

WordPress dispone de un conjunto etiquetas (WordPress Tags) que nos permiten recuperar la información que buscamos de una manera realmente cómoda y evitando hacer consultas “directas” sobre la Base de Datos.

En nuestro caso queremos recuperar todos los posts y extraer de los mismos las imágenes que hayamos incluido (ya las hayamos publicado en nuestro blog o enlazado desde otro sitio o servicio como flickr).

Para ello haremos una copia de una plantilla “page.php” (que llamaremos “migaleria.php”)de nuestro tema que se encuentra en la ruta “/wp-content/themes/mi-tema”

Hecho esto, abrimos el fichero y nos disponemos a crear:

  • una lista no ordenada donde iremos añadiendo cada una de las imágenes de nuestros posts.
  • una función removeEvilAttributes($tagSource) que elimina los atributos html de las etiquetas.
  • otra función removeEvilTags($source) que elimina todas las etiquetas menos las que le indiquemos en el parámetro $allowedTags.

<!– Este código iría en migaleria.php en lugar de:
<?php the_content(__(‘<span>READ MORE</span>’));?>
–>

<!– le asignamos la class=”gallery” para poder incluir luego una galería javascript muy sencilla –>
<ul
class=”gallery”>
<?php

//Función que elimina los atributos indeseables de las etiquetas html
function removeEvilAttributes($tagSource){
$stripAttrib = “‘ (style|class|height|width|bgcolor|font|face|color|size|
cellpadding|cellspacing|border)=\”(.*?)\”‘i”;
$tagSource = stripslashes($tagSource);
$tagSource = preg_replace($stripAttrib, ”, $tagSource);
return $tagSource;
}

//Función que elimina todas las etiquetas html menos las que le indiquemos
function removeEvilTags($source){
$allowedTags='<img>’;
$source = strip_tags($source, $allowedTags);
return preg_replace(‘/<(.*?)>/ie’, “‘<‘.removeEvilAttributes(‘\\1′).’>'”, $source);
}

//Consulta mediante tags utilizando getposts
$posts = get_posts(‘numberposts=-1&post_type like \’%image%\’&orderby=DATE&order=DESC’);

foreach ($posts as $post){
start_wp();
echo ‘<li>’;
echo str_replace(‘<img ‘, ‘<img width=”150″ ‘,removeEvilTags(get_the_content()));
echo “</li>”;
}
?>
</ul>

Existen otras etiquetas interesantes como the_permalink(), que nos devuelve el enlace al post y que nos permitiría enlazar la imagen directamente al post.

Este código es una prueba y tiene varios errores:

  • Si un post tiene varias imágenes incluidas, no crea un elemento <li> por cada una de ellas.
  • Debemos tener cuidado con el número de posts que vamos a mostrar. Es MUY importante el uso del Plugin WP Super Cache.
  • Reescalamos las imágenes mediante la etiqueta width, lo que no sería correcto.
  • Aún tengo que buscar si puedo recuperar únicamente las imágenes personalizando la consulta de la siguiente manera: $posts = get_posts(‘numberposts=-1&post_type =attachment&orderby=DATE&order=DESC’);
    Así no recuperaríamos todo el contenido del post para no utilizarlo

2.Formatear en forma de galería dichas imágenes.

Ahora que ya tenemos el listado de imágenes, podemos utilizar alguna de las galerías javascript para hacer un poco más atractiva nuestra galería.

Yo me he decantado por Galleria de DevKick Lab.

Para ello tenemos que:

  1. Descargarnos la última versión de jQuery. (y la subimos a nuestro servidor)
  2. Última versión de Galleria plugin (y la subimos a nuestro servidor)
  3. Añadir un encabezado a nuestra template.
    <link href=”galleria.css” rel=”stylesheet” type=”text/css” media=”screen”> <script type=”text/javascript” src=”jquery.js”></script> <script type=”text/javascript” src=”jquery.galleria.js”></script> <script type=”text/javascript”> jQuery(function($) { $(‘ul.gallery’).galleria(); }); </script>
  4. Crear el listado de imágenes y asignarle la clase “gallery” (lo hicimos en el primer paso)
  5. Personalizar la CSS (cosa que aún no he hecho)

Para el paso 3 debemos crear una copia del fichero /wp-content/themes/header.php y ponerle un nombre como /wp-content/themes/header-migaleria.php

Editamos el fichero /wp-content/themes/header-migaleria.php y añadimos el código (ajustando la ruta a los ficheros que hemos subido en los pasos 1 y 2):

<link href=”galleria.css” rel=”stylesheet” type=”text/css” media=”screen”> <script type=”text/javascript” src=”jquery.js”></script> <script type=”text/javascript” src=”jquery.galleria.js”></script> <script type=”text/javascript”> jQuery(function($) { $(‘ul.gallery’).galleria(); }); </script>

Ahora debemos modificar el fichero migaleria.php de forma que llame a este nuevo fichero.

get_header(‘migaleria.php’);

De esa manera ya habríamos enlazado nuestro listado de imágenes con la galería.

3.Creamos una página a través de wordpress y seleccionamos la template migaleria.php

Para ello abrimos nuestra consola de administración de wordpress (http://www.miblog.es/wp-admin/), añadimos una nueva página (page) y bajo el botón “Publish” seleccionamos la plantilla (template) que creamos en el paso 1.

Resultado

Este artículo no deja de ser un esbozo desordenado, pero creo que cubre los pasos más importantes y podría servir como hilo para no perder mucho tiempo y poder empezar a aprender…

galeria de fotos e imágenes de fotoblog.librodeapuntes.es

Bruno Rico Autor

Marketing, posicionamiento, diseño,accesibilidad, fotografía, internet...y un toque de banca (por de-formación profesional)

Comentarios

    Francisco

    (diciembre 15, 2009 - 9:16 pm)

    Hola, esta interesante el tema, estoy intentando agregar una galeria de imagen a wordpress, la verdad es que no he utilizado nunca wordpress y me esta costando un poco, estoy haciendo pruebas para ver si puedo pasar una web que ya tengo montada a wordpress pero no se por donde empezar con los pasos que das, ya que no tengo creado post para sacar la lista de imagenes ni se como asiganar una galeria a esas imagenes, solo he creado un post con una imagen pero, como dije antes, no se como crear la galeria, o el listado de imagenes para asegnarle la etiqueda gallery.

    Me podrias echar una mano en eso? Me gusta esa galeria y me gustaria implementarla.

    Saludos

    Bruno Rico

    (diciembre 19, 2009 - 4:23 pm)

    Hola Francisco,
    Últimamente estoy sin tiempo, pero a ver si puedo guiarte un poco. Creo que el problema te viene porque aún no tienes muy claro como pasar los contenidos que tienes en tu web, hacia tu nueva web en wordpress… ahí poco puedo ayudarte, la migración de una “plataforma” hacia otra siempre es muy complicado, y a veces es mejor ir haciéndolo “a mano”…

    En el post lo que trato de explicar es cómo crear una template(plantilla) especial, que cargue todas las imágenes que hemos ido publicando en nuestros posts.
    Una vez creada esa template, la enlazamos con la librería javascript y ya sólo tendremos que crear una página y asignarle esa plantilla que acabamos de crear…

    Es decir, lo complicado es crear la template…

    Creo que la opción más cómoda (si lo que quieres es crear una galería de fotos) es instalar alguna de las opciones o plugins disponibles: ( http://wordpress.org/extend/plugins/search.php?q=gallery&sort=top-rated )

    Además así siempre te beneficiarías de actualizaciones y esas cosas… no sé si te he podido ayudar…

Deja un comentario

Tu dirección de correo electrónico no será publicada.