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 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 full-size image.

Here’s an example with Link thumbnails to: Image File option and no js to make it open in a modal window. [gallery link=“file”]

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:

function slideshow($images=null){

		$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%">
			<div class="carousel-caption">
	$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>
	$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%'),
										'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))),
						apply_filters('the_content', $img->post_content),
						($is_first) ? ' active' : ''
		$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:

[slideshow] (many thanks to Twitter for sharing Bootstap ui :) ) This will produce a markup like this:

<div id="carousel-4fbea6cb57c5b" class="carousel slide">

	<div class="carousel-inner">
		<div class="item active">

			<img width="870" height="500"
				alt="Third Thumbnail alternate text" title="Third Thumbnail label" />

			<div class="carousel-caption">

				<h4>Third Thumbnail label</h4>

				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
					Donec id elit non mi porta gravida at eget metus. Nullam id dolor
					id nibh ultricies vehicula ut id elit.</p>


		<div class="item">

			<!-- second item here -->

		<div class="item">

			<!-- third item here -->


	<a class="carousel-control left" href="#carousel-4fbea6cb57c5b"
		data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
		href="#carousel-4fbea6cb57c5b" data-slide="next">&rsaquo;</a>


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

Then you can easily retrieve only the desired image by calling:

$images = get_attachments_by_media_tags('media_tags=slideshow');
echo slideshow($images);

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:

add_image_size('slideshow-mini', 870, 500, true);