So… this is my slide show implementation:
This is the code i use to create a slideshow based on the flexslider JQuery plugin (Thank you David!). It also gives the user a checkbox so he can chose what pictures to include in the slideshow, and what pictures to skip. The images are taken form the post attachments, if you want a general slideshow unrelated to any post you need to implement the solution David gave 🙂
This is the function/filter i use to add a checkbox inside the media uploader to let the client choose if he wants to include a picture in the slideshow or not.
// Adding a custom checkbox to the Media Uploader
function monster_image_attachment_slideshow($form_fields, $post) {
$foo = (bool)get_post_meta($post->ID, "rt-image-link", true);
$form_fields["rt-image-link"] = array(
"label" => __("Include in gallery?"),
'input' => 'html',
'html' => '<label for="attachments-'.$post->ID.'-foo"> ' . '<input type="checkbox" id="attachments-'.$post->ID.'-foo" name="attachments['.$post->ID.'][rt-image-link]" value="1"'.($foo == true ? ' checked="checked"' : '').' /> Yes</label> ',
"value" => $foo,
"helps" => __("Check this if you want to include this image in your gallery"),
);
return $form_fields;
}
// now attach our function to the hook
add_filter("attachment_fields_to_edit", "monster_image_attachment_slideshow", null, 2);
// Saving the media field
function monster_image_attachment_slideshow_to_save($post, $attachment) {
// $attachment part of the form $_POST ($_POST[attachments][postID])
update_post_meta($post['ID'], 'rt-image-link', $attachment['rt-image-link']);
return $post;
}
// now attach our function to the hook.
add_filter("attachment_fields_to_save", "monster_image_attachment_slideshow_to_save", null , 2);
then i use this function also in my function file (both of these can be included in a plugin if you wish so):
// This is the funcion that rolls out my slideshow html
function m_slideshow_outputter( $post_id ,$size="large", $thumbnail_size="") {
global $post;
$got_slides = false;
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post_id,
'order' => 'ASC',
'orderby' => 'menu_order'
);
// Getting attachmentes (images)
$attachments = get_posts( $args );
if ( $attachments ) {
$cm_output="<div class="flex-container"><div class="flexslider"><ul class="slides">";
// looping through each attachment for the given post
foreach ( $attachments as $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment->ID, $size );
$cm_src = $image_attributes[0];
$cm_width = $image_attributes[1];
$cm_height = $image_attributes[2];
// This part gets custom metainformation about the attachement.
// I have made a custom checkbox inside the media uploader. If the checkbox is checked the image is included. See the checkbox code above :)
$gallery_check_array = get_post_meta($attachment->ID, "rt-image-link");
$gallery_check = $gallery_check_array[0];
// So just include the picture if the checkbox in checked :)
if ( $gallery_check == 1) {
$got_slides = true;
$cm_output .= '<li><img class="picture-'.$post_id.'-'.$attachment->ID .'" src="'.$cm_src.'" alt="Slideshow" width="'.$cm_width.'" height="'.$cm_height.'"/></li>';
}
}
$cm_output .= '</ul></div></div><!-- End flexslider -->';
// Outputting the thumbnails if a thumbnail size has been entered. Ignore this or delete this part if you dont need thumbnails
if ($thumbnail_size) {
$cm_output .= '<div class="slideshow-thumbails"><ul>';
foreach ( $attachments as $attachment ) {
$thumbnail_attributes = wp_get_attachment_image_src( $attachment->ID, $thumbnail_size );
$cm_tumb_src = $thumbnail_attributes[0];
$cm_tumb_width = $thumbnail_attributes[1];
$cm_tumb_height = $thumbnail_attributes[2];
$thumbnail_check_array = get_post_meta($attachment->ID, "rt-image-link");
$thumbnail_check = $thumbnail_check_array[0];
// doing the same check as above for each thumbnail.
if ( $thumbnail_check == 1) {
$cm_output .= '<li><img class="picture-'.$post_id.'-'.$attachment->ID .'" src="'.$cm_tumb_src.'" alt="Slideshow" width="'.$cm_tumb_width.'" height="'.$cm_tumb_height.'" /></li>';
}
}
$cm_output .= '</ul></div>';
}
//If there are images in the slidehow return them, else return nothing.
if ($got_slides) {
return($cm_output);
} else {
return("");
}
// if the post has no images return nothing.
} else {
return("");
}
}
Then you need to include the jquery:
// How to add custom js to Front end
add_action('wp_print_scripts', 'monster_front_js');
function monster_front_js(){
wp_register_script('flexslider', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array('jquery'), '1.0' );
wp_register_script('monster_front', get_template_directory_uri() . '/js/monster_front.js', array('jquery', 'flexslider'), '1.0' );
wp_enqueue_script('monster_front');
wp_enqueue_script('jquery.flexslider-min.js');
}
This is inside the custom jquery adjust the slidehow:
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlsContainer: ".flex-container",
controlNav: false,
directionNav: true
});
});
And the css related to the slideshow:
add_action('wp_print_styles', 'monster_front_styles');
function monster_front_styles() {
wp_register_style( 'flexslider_style', get_template_directory_uri() . '/css/flexslider.css');
wp_enqueue_style('flexslider_style');
}
And Finaly! The slideshow code ready to insert into your theme front end. 🙂
<?php echo m_slideshow_outputter( $post->ID ,'large', 'thumbnail'); ?><!-- This is the slideshow :) -->
The only required parameter is the post id. The second parameter is set to large by default, but you can choose what image size to return. The last parameter sets the thumbnail image size, if this is left empty no thumbnails will be returned.
Hope this isn’t overkill. 🙂