Lightbox2 - Custom integration with CCK Imagefield and Imagecache

Imagecache/Imagefield basics

If you examine imagecache.module, you will find the theme_imagecache function:
theme_imagecache($namespace, $path, $alt = '', $title = '', $attributes = null)

Here is the basic, minimum, formatting required to print out a single imagefield image with an imagecache preset in your .tpl file:

print theme('imagecache', 'name_of_your_imagecache_preset', $field_name_of_your_cck_imagefield_field[0]['filepath']);

Wrapping the basics in Lightbox2

To display a single image in a lightbox, you can just wrap the image in an a tag with a rel="lightbox[photo_gallery]" attribute in it. The tricky part is writing out the link to the path to the imagecache preset for the image you want displayed in the lightbox. Here is the basic pattern to do this manually:

$lightbox_path = imagecache_create_url($lightbox_preset, $item['filepath'] );
$imagecache_image = theme('imagecache', 'name_of_your_thumbnail_imagecache_preset', $field_name_of_your_cck_imagefield_field[0]['filepath']);
print '<a rel="lightbox[my_gallery]" alt=" " title=" " href="'.$lightbox_path.'">'. $imagecache_image .'</a>';

However, Lightbox2 now comes with the following function:
function theme_imagefield_image_imagecache_lightbox2($view_preset, $field, $item, $node, $rel = 'lightbox')

Here is how you would call your image using this function:

$field_name_of_your_cck_imagefield_field[0]['lightbox_preset'] = 'name_of_your_imagecache_preset_for_lightbox';
print theme('imagefield_image_imagecache_lightbox2', 'name_of_your_thumbnail_imagecache_preset', $field_name_of_your_cck_imagefield_field[0]['filepath'], $field_name_of_your_cck_imagefield_field[0], $node, $rel = 'lightbox');

Multi-value Imagefields + Imagecache + Lightbox2

What if you want to display a bunch of images in multiple value imagefield to create a spiffy little photo gallery for your Content Type? While there is Imagefield Gallery module, it doesn't work if, like me, you have multiple imagefields in your Content Type.

To accomplish this task. We'll need to loop through each of the objects in our imagefield array. We are going to force the imagecache preset here, as the Lightbox2 function behaves strangely in this regards. Here is how we do it.

	foreach((array)$node->field_photo_gallery as $item) {
		$args['lightbox_preset'] = 'name_of_your_lightbox_imagecache_preset';
		print theme('imagefield_image_imagecache_lightbox2', 'name_of_your_thumbnail_imagecache_preset', 'field_name_of_your_cck_imagefield_field', $item, $node, $rel = 'lightbox', $args);
	}

Practical example

OK, let's get practical. In this example, I am wanting to display the image from my CCK imagefield field_photo_gallery using the imagecache preset square_thumb for my thumbnails and lightbox for the larger images to display in the slideshow. This code resides in my node-my_node_type.tpl file in my theme directory. I've broken out the variables outside the print statement for better code reuse and am using the longhand version instead of the lightbox2 function in order to control the formatting a bit more:

<?php if ($field_photo_gallery[0] != '' && ($teaser != 1) ): ?>
<div id="photo-gallery">	
<h3>PHOTO GALLERY</h3>
	<?php
		 // the class is the same for all img tags, so we can declare it out of the loop
    $thumbs_class['attributes']['class'] = 'gallery-thumbs';
		foreach((array)$node->field_photo_gallery as $item) {
			// construct the path to the lightbox image using a function from the imagecache module
			// this creates valid URLs dynamically, so your code will still work if you move your files directory
			$lightbox_preset = 'lightbox'; //the name of the imagecache preset to display in the lightbox
			$lightbox_path = imagecache_create_url($lightbox_preset, $item['filepath'] );
			$imagecache_image = theme('imagecache', 'square_thumb', $item['filepath'], $alt = 'gallery item', $title, $thumbs_class['attributes']);
			// Creating a custom title on hover and caption in the lightbox. Create some custom alt tags too if you like
			// Use check_plain to avoid XSS.
			$caption = check_plain($item['title']).' <br /> '. check_plain($node->title) .' PHOTO GALLERY. <br /> Use right and left arrows or the mouse to navigate';
			$title = check_plain($item['title']);
			// finally, let's put it all together
			print '<a class="gallery-thumbs" title="'.$caption.'" rel="lightbox[photo_gallery]" alt=" " href="'.$lightbox_path.'">'. $imagecache_image .'</a>';
		}
	?>
	<div class="clear-block"></div>
</div> <!-- #/photo-gallery -->
<?php endif; ?>

then you can add some nice css like so:

a.gallery-thumbs, #photo-gallery a {
	display:block;
	float: left;
	margin: 5px 5px 5px 0;
	padding:5px;
	border:1px solid #ccc;
	line-height:1em;
}

a.gallery-thumbs:hover, #photo-gallery a:hover {
	background:#CCEE00;
}