0

Cómo implementar una galería de imágenes para el sidebar

Por Antonio Cambronero el 29/05/08, a las 10:05:57 pm, en Herramientas, Wordpress, tips

Esta es la segunda parte del post Cómo publicar fotos desde un teléfono móvil.

Para publicar fotos en el blog utilizamos el servicio de Flickr Carga por correo electrónico, donde asignaremos la categoría con la que se creará el post. Y para mostrar una galería de imágenes como la que pueden ver en mi sidebar “in situ”, sólamente hay que cocinar un poquito de CSS y un poquito de PHP.

En el e-mail que enviamos desde el teléfono móvil, sólo pondremos el título. En la configuración de Flickr, ajustaremos uno de los tres tamaños, eliminaremos la posibilidad de incluir el cuerpo del e-mail y, por supuesto, diremos en qué blog queremos publicar.

Una galería como la de blogpocket, se puede realizar simplemente con un CSS parecido al siguiente:

.insitu {
margin: 0px;
padding: 10px 5px 5px 10px;
float: left;
width: 220px;
list-style-type: none;
}

.insitu img {
border-width: 0px;
margin: 0px 5px 5px 0px;
padding: 0px;
float: left;
}

Pero el pequeño problema de este sistema es que Flickr genera el post con un código HTML determinado que puede que no se adapte exactamente a nuestras necesidades. Por ejemplo, se incluye un salto de línea al final: <br />. Eso desajustará un poco la galería con el CSS visto anteriormente. Para eliminarlo, en el archivo sidebar.php, podemos utilizar la función preg_replace, de la siguiente forma:

$contenido_post = preg_replace (’/<br \/>/’,”,$contenido_post);

Esta misma función nos servirá para modificar aquella parte del código, generado por Flickr, que no nos guste. Si queremos mostrar las imágenes, en la galería, con un determinado tamaño, podemos añadir las cláusulas width y height. Por ejemplo:

$contenido_post = preg_replace (’/alt/’,'width=”100″ height=”75″ alt’,$contenido_post);

El código que genera Flickr, incluye una sentencia img del estilo:

<a href=”http://www.flickr.com/photos/blogpocket/2531882362/” title=”photo sharing”><img src=”http://farm4.static.flickr.com/3196/2531882362_39a253f82e.jpg” alt=”" style=”border: solid 2px #000000;” /></a>

Y lo que se puede hacer es sustituir, con la función preg_replace anterior, la cláusula ‘alt‘ por ‘width=”100″ height=”75″ alt‘. Con ello, la imagen puede salir con un tamaño en el post y con otro en la galería del sidebar.

Finalmente, se puede utilizar el siguiente bucle para obtener las 4 anotaciones más recientes correspondientes a la categoría asignada a los posts publicados, mediante el envío del e-mail desde el teléfono móvil. Suponiendo que el número ID de esa categoría es n:

<?php query_posts(’cat=n&showposts=4′); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $contenido_post = wptexturize($post->post_content);
$contenido_post = preg_replace (’/<br \/>/’,”,$contenido_post);
$contenido_post = preg_replace (’/alt/’,'width=”100″ height=”75″ alt’,$contenido_post);
echo $contenido_post; ?>
<?php endwhile; endif; ?>

Posts relacionados

Si te ha gustado el post, no olvides suscribirte a nuestro feed RSS





Sin comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Dejar un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tanto el autor de este blog, Antonio Cambronero, como sus cobloguers, hacen devolución expresa del contenido de sus posts al Dominio Público
CMS: WordPress - Tema basado en GimpStyle diseñado por Horacio Bella - Hosting: Ferca Network
Recibir las actualizaciones por correo-e
Feeds de Entradas y Comentarios
Política de privacidad