Slideshow in WordPress

If you’re planning to build a showcase website with WordPress you’d probably insert at least in the home page some images with a sliding effect.
By using jQuery make them slide is pretty easy, but I had some trouble to choose a way to manage the images in the cms.
My goal was to use the fewest number of plugins possible, because i want something usable on most of website I have to develop.

WordPress put at our disposal a gallery tool which is reachable by clicking on the “Add Media” button on top of the body article.

By using this we have a big pro: WordPress takes care of re-sizing and cropping the images.
The con is that by default this system will show only a list of thumbnails linking to the fullsized image.

Here’s an example with Link thumbnails to: Image File option and no js to make it open in a modal window.

To avoid those thumbs and make a real slideshow I used the thumbnail feature of WordPress combined with wp_get_attachment_image function.

Here’s the code:

<?php
function slideshow($images=null){

	if(isset($images)){
		$images = (array)get_children( 'post_type=attachment&post_mime_type=image&post_parent='.get_the_ID() );
	}
	$uid = uniqid('carousel-');
	$tpl = <<< EOF
		<div class="item%active%">
			%img%
			<div class="carousel-caption">
				<h4>%title%</h4>
				%description%
			</div>
		</div>
EOF;
	$prepend = '<div id="'.$uid.'" class="carousel slide">
	<div class="carousel-inner">';
	$append = '</div>
	<a class="carousel-control left" href="#'.$uid.'" data-slide="prev">&lsaquo;</a>
	<a class="carousel-control right" href="#'.$uid.'" data-slide="next">&rsaquo;</a>
	</div>';
	$toret = '';
	$size = 'slideshow-mini';
	$is_first = true;
	foreach($images as $img) {
		$alt = get_post_meta($img->ID, '_wp_attachment_image_alt', true);
		$toret .= str_replace(
				array('%img%','%title%','%description%', '%active%'),
				array(
						wp_get_attachment_image(
								$img->ID,
								$size,
								false,
								array(
										'class'	=> "attachment-$size",
										'alt'   => empty($alt) ? ' ' : trim(esc_attr(strip_tags($alt))),
										'title' => empty($img->post_title) ? '' : trim(esc_attr(strip_tags($img->post_title))),
								)
						),
						get_the_title($img->ID),
						apply_filters('the_content', $img->post_content),
						($is_first) ? ' active' : ''
				),
				$tpl
		);
		$is_first = false;
	}
	return $prepend.$toret.$append;
}

Please take note that if you want to have a fixed size for the images you have to add a width and height set to the thumbnail system of WordPress.
This is explained here.

This is an example of the code above:

(many thanks to Twitter for sharing Bootstap ui 🙂 )

This will produce a markup like this:

Some improvement we can take care of

Let the user choose witch images show in the slideshow

If you need to choose which images put on the slideshow i suggest to install a plugin that let you assign a semantic tag to a media element: Media Tags (at this link you can also find the documentation for get_attachments_by_media_tags function).
The you can easily retrieve only the desired image by calling:

and pass $images as first parameter to the function showed above.

update: I suggest to prepend a ‘@’ to avoid php warnings if no image can be found.

Force images dimensions

You can easily avoid image dimension error by adding a new set of width and height to the re-sizing system of WordPress.
This is done with add_image_size function.
For Example in my case: