SummArg | Cursos y recursos para webmasters

09/03/2012

Modificar el HTML que genera por defecto el shortcode [ gallery ] en WordPress

Hace unos días vimos como crear una página con una galería que obtiene todas las imágenes subidas a nuestro WordPress. Además personalizamos la salida HTML de dicha galería para poder insertar un plugin jQuery para dar un efecto lightbox a toda nuestra galería. Ahora para que queden las galerías de nuestro sitio hecho con WordPress bien parejo, debemos modificar el output HTML del shortcode [ gallery ], de modo de lograr que quede igual a la galería que ya construimos.

Vamos a tener que crear un hook (gancho) a la función que pueden observar aquí

http://core.trac.wordpress.org/browser/tags/3.0.1/wp-includes/media.php#L745

En nuestro archivo functions.php colocamos el siguiente código:

<?
 add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
 function my_post_gallery( $output, $attr) {
 global $post, $wp_locale;
static $instance = 0;
 $instance++;
 if ( isset( $attr['orderby'] ) ) {
 $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
 if ( !$attr['orderby'] )
 unset( $attr['orderby'] );
 }
extract(shortcode_atts(array(
 'order' => 'ASC',
 'orderby' => 'menu_order ID',
 'id' => $post->ID,
 'itemtag' => 'dl',
 'icontag' => 'dt',
 'captiontag' => 'dd',
 'columns' => 3,
 'size' => 'thumbnail',
 'include' => '',
 'exclude' => ''
 ), $attr));
$id = intval($id);
 if ( 'RAND' == $order )
 $orderby = 'none';
if ( !empty($include) ) {
 $include = preg_replace( '/[^0-9,]+/', '', $include );
 $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
 foreach ( $_attachments as $key => $val ) {
 $attachments[$val->ID] = $_attachments[$key];
 }
 } elseif ( !empty($exclude) ) {
 $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
 $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
 } else {
 $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
 }
if ( empty($attachments) )
 return '';
if ( is_feed() ) {
 $output = "n";
 foreach ( $attachments as $att_id => $attachment )
 $output .= wp_get_attachment_link($att_id, $size, true) . "n";
 return $output;
 }
$itemtag = tag_escape($itemtag);
 $captiontag = tag_escape($captiontag);
 $columns = intval($columns);
 $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
 $float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$output = apply_filters('gallery_style', "<ul class='galeria'>");
$i = 0;
 foreach ( $attachments as $id => $attachment ) {
 $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 $output .= '<li><a href="'.wp_get_attachment_url( $id ).'" class="lightbox" rel="group" title=""><img src="'.wp_get_attachment_thumb_url($id).'"></a></li>';
 }
$output .= "
 <br style='clear: both;' />
 </ul>n";
return $output;
 }
 ?>

Como verán el output se construye en las últimas líneas, en donde construimos un código HTML idéntico al que utilizamos en el artículo anterior (allí encontrarán el CSS también):

<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>

Esperamos que les resulte útil!

Dejar un comentario

  1. Isabel

    Me ha sido de gran utilidad para el blog que estoy diseñando, lo único que me gustaría saber es cómo incluir en el código que muestras la “leyenda” de la imagen, es decir, lo que por defecto WP asigna a “caption”. Saludos!

Dejar un comentario