Add rel="fancybox" to wordpress gallery

If you need to add rel="fancybox" in the standard wordpress gallery, then this is a lesson for you.

Firstly what we need to do, its enqueue fancybox script, add image sizes for thumbnail and big picture and change implementation of gallery shortcode by default.

NOTE: My theme called 'htmlcms' so all function start with this prefix.

Let's create two image size: first for gallery thumbnail, second - fancybox full picture.
Because wordpress doesn't have restrictions for image sizes in upload form, we need to change size of full image.

/**
 * Implements after_setup_theme action.
 */
function htmlandcms_setup() {
  	add_image_size( 'gallery-small', 355, 240, TRUE );
  	add_image_size( 'gallery-big', 710, 480, TRUE );
}
add_action( 'after_setup_theme', 'htmlandcms_setup' );

Then we need to register fancybox script.

/**
 * Implements wp_head action.
 */
function htmlandcms_wp_head() {
  wp_register_script('fancybox', get_bloginfo('template_url') . '/js/fancybox/jquery.fancybox-1.3.4.js');
  wp_enqueue_script('fancybox');
}
add_action('wp_head', 'htmlandcms_wp_head');

Now when fancybox is registered, let make some changes in gallery.
I just copy default implementation (see gallery_shortcode() function), and set param 'size' as 'gallery-small' by default.
When you add gallery shortcode in post body you can add param size, by default size=thumbnail.
It need because in next step i find all link to picture with size 'gallery-small' and wrap output with link which linked to image with size gallery-big.

/**
 * Change image style for galleries added by shortcodes.
 *
 * @param string $output
 * @param array $attr
 * @return array
 *  Changed attributes
 */
function htmlandcms_gallery_shortcode($output, $attr) {
	$post = get_post();

	static $instance = 0;
	$instance++;

	if ( ! empty( $attr['ids'] ) ) {
		// 'ids' is explicitly ordered, unless you specify otherwise.
		if ( empty( $attr['orderby'] ) )
			$attr['orderby'] = 'post__in';
		$attr['include'] = $attr['ids'];
	}

	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	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'    => 'div',
		'icontag'    => 'div',
		'captiontag' => 'p',
		'columns'    => 3,
		'size'       => 'gallery-small',
		'include'    => '',
		'exclude'    => ''
	), $attr));
	/**
	 * @var $size string
	 * @var $columns int
	 * @var $icontag string
	 * @var $captiontag string
	 * @var $itemtag string
	 * @var $orderby string
	 * @var $orderby string
	 * @var $order string
	 * @var $include int
	 * @var $exclude int
	 * @var $id int
	 */

	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';

	if ( !empty($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) ) {
		$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 )
			/** @var $size string */
			$output .= wp_get_attachment_link($att_id, $size, TRUE) . "\n";
		return $output;
	}

	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$icontag = tag_escape($icontag);
	$valid_tags = wp_kses_allowed_html( 'post' );
	if ( ! isset( $valid_tags[ $itemtag ] ) )
		$itemtag = 'dl';
	if ( ! isset( $valid_tags[ $captiontag ] ) )
		$captiontag = 'dd';
	if ( ! isset( $valid_tags[ $icontag ] ) )
		$icontag = 'dt';

	$columns = intval($columns);
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
	$float = is_rtl() ? 'right' : 'left';

	$selector = "gallery-{$instance}";

	$gallery_style = $gallery_div = '';
	if ( apply_filters( 'use_default_gallery_style', TRUE ) )
		$gallery_style = "
		<style type='text/css'>
			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: {$float};
				text-align: center;
				width: {$itemwidth}%;
			}
		</style>
		<!-- see gallery_shortcode() in wp-includes/media.php -->";
	$size_class = sanitize_html_class( $size );
	$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
	$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

	$i = 0;
	foreach ( $attachments as $id => $attachment ) {
		$link = wp_get_attachment_link($id, $size, FALSE, FALSE);

		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			</{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</{$captiontag}>";
		}
		$output .= "</{$itemtag}>";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= '<br style="clear: both" />';
	}

	$output .= "
			<br style='clear: both;' />
		</div>\n";

	return $output;
}
add_filter('post_gallery', 'htmlandcms_gallery_shortcode', 10, 2);

Now implement final hook.

/**
 * Implements 'wp_get_attachment_link' filter.
 *
 * @param string $default
 * @param int $id
 * @param int $size
 * @param string $permalink
 * @param string $icon
 * @param string $text
 * @return string
 */
function htmlandcms_get_attachment_link($default, $id, $size, $permalink, $icon, $text) {
	$id = intval( $id );
	$_post = & get_post( $id );

	if ( empty( $_post ) || ( 'attachment' != $_post->post_type ) || ! $url = wp_get_attachment_url( $_post->ID ) )
		return __( 'Missing Attachment' );

	$post_title = esc_attr( $_post->post_title );

	if ( $text )
		$link_text = $text;
	elseif ( $size && 'none' != $size )
		$link_text = wp_get_attachment_image( $id, $size, $icon );
	else
		$link_text = '';

	if ( trim( $link_text ) == '' )
		$link_text = $_post->post_title;

	if($size == "gallery-small" && wp_script_is('fancybox', 'queue')) {
		$url = wp_get_attachment_image_src($id, 'gallery-big');
		return "<a href='{$url[0]}' rel='fancybox' title='$post_title'>$link_text</a>";
	}
	return $default;
}
add_filter('wp_get_attachment_link', 'htmlandcms_get_attachment_link', 10, 6);

That's all. Don't forget rate this post ;)

Rating: