SummArg | Cursos y recursos para webmasters

05/03/2012

Mostrar todas las imágenes de nuestro sitio WordPress en una galería

El shortcode [ gallery] nos ofrece la posibilidad de insertar todas las imágenes vinculadas a una entrada, pero no tenemos ningún método sencillo para insertar todas las imágenes de otras entradas en una misma galería. Así que veremos como crear una consulta personalizada en una nueva página.

Además, en esta oportunidad, aprovecharemos a insertar la galería de un modo totalmente personalizado, para que pueda funcionar con algún plugin de galería Lightbox (nosotros elegimos Lightbox Evolution, también tienen una versión para WordPress). Como sabrán, se necesita construir el código HTML de dicha galería de un modo diferente al que WordPress nos ofrece.

En el archivo header.php del theme vinculamos los archivos necesarios para que funcione el script elegido, generalmente compuesto de un archivo CSS y otro JS.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/lightbox/themes/default/jquery.lightbox.css" />
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/lightbox/jquery.lightbox.js"></script>
 <script type="text/javascript">
 jQuery(document).ready(function(){
 jQuery('.lightbox').lightbox();
 });
 </script>

Luego en una plantilla de página, insertamos la consulta personalizada. Noten que dentro de los argumentos definimos que el mime_type (tipo de archivo) sea ‘image’ para evitar que la consulta nos traiga algún archivo que no pueda mostrarse en la galería. El post_status y el post_parent quedan en null para mostrar todas las imágenes posibles, incluso aquellas que no están vinculadas a ninguna entrada o están vinculadas a entradas aún sin publicar (en borrador o programadas).

<?php
 $args = array( 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => -1, 'post_status' => null, 'post_parent' => null );
 $attachments = get_posts( $args );
 echo '<ul class="galeria">';
 if ($attachments) {
 foreach ( $attachments as $post ) {
 setup_postdata($post);
 echo '<li><a href="'.wp_get_attachment_url( $id ).'" class="lightbox" rel="group"><img src="'.wp_get_attachment_thumb_url($id).'" /></a></li>';
 }
 }
 echo '</ul>';
 ?>

Esto arrojará una estructura de HTML similar a esta:

<ul class="galeria">
 <li><a href="ruta_a_imagen_grande" class="lightbox" rel="group"><img src="ruta_a_miniatura" /></a></li>
 <li><a href="ruta_a_imagen_grande" class="lightbox" rel="group"><img src="ruta_a_miniatura" /></a></li>
 <li><a href="ruta_a_imagen_grande" class="lightbox" rel="group"><img src="ruta_a_miniatura" /></a></li>
 </ul>

Para finalizar pueden utilizar el siguiente CSS adaptándolo a sus diseños.

ul.galeria {
list-style-type:none;
}
ul.galeria li {
width:140px;
height:140px;
float:left;
margin: 0 5px 5px 0;
}
ul.galeria li a img{
border:0;
width:140px;
height:140px;
}

Desde este punto de partida les resultará sencillo hacer sus propias adaptaciones para que funcionen otros scripts de galería.

 

Dejar un comentario

  1. hola Nekko

    cómo hago para que me muestre en cada imagen el titulo del post al que corresponde.. el autor.. fecha y el numero de comentarios? (y que el titulo este enlazado al post)

    le agradecería su ayuda

  2. Nekko

    Hola! En el segundo echo (en donde imprime la imagen dentro de tags li) deberás llamar a the_title(), the_author(), the_time() y comments_popup_link() dandoles el formato que desees dentro de tu maquetación.

  3. ayer ensaye con esos pero surgieron problemas:

    the_title() sale el nombre de la foto y no el nombre del post
    $permalink = get_permalink( $postID ) ó the_permalink() o get_permalink() sale la dirección de la pagina del adjunto y no la dirección del post que es lo que quiero
    comments_popup_link() sale en todas que no hay comentarios cuando si los hay
    the_author() sale solo admin y estoy ensayando en multiusuario

    alguna solucion?

  4. Nekko
  5. quede igual(no entiendo ingles y poco codigo)… alguna solucion?

Dejar un comentario