The default output for the WordPress gallery is pretty bare bones. They simply output the pictures in a whatever x whatever grid and allow you to link to the file or media page from each pictures. The great thing about that is that you can really go nuts customizing it and make it into anything you need.
This snippet of code will make anywhere you use the ['gallery'] shortcode into a flexslider with the thumbnail carousel. If you didn’t want the thumbnails you can simply remove the chunk of code where I loop through the images again to output the carousel.
First you have to include the flexslider scripts in your theme by pasting this in your functions.php and upload the files to the corresponding directory
|
1 2 3 4 5 |
function flexslider_scripts() { wp_enqueue_style( 'flexslider-style', get_template_directory_uri().'/js/flexslider.css' ); wp_enqueue_script( 'slides', get_template_directory_uri().'/js/jquery.flexslider-min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'mofflygroup_scripts' ); |
Paste this code in your functions.php. You can edit the output to have any HTML structure you would like. This can really be a base for any type of slider.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
add_filter('post_gallery', 'my_post_gallery', 10, 2); function my_post_gallery($output, $attr) { global $post; 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' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'thumbnail', 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if ('RAND' == $order) $orderby = 'none'; if (!empty($include)) { $include = preg_replace('/[^0-9,]+/', '', $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]; } } if (empty($attachments)) return ''; // Here's your actual output, you may customize it to your need $output = "<div id=\"slider\" class=\"flexslider\">\n"; $output .= "<ul class=\"slides\">\n"; // add post thumbnail into the mix if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. $thumb_id = get_post_thumbnail_id(); $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true); $thumb_url = $thumb_url_array[0]; $medium_thumb = get_the_post_thumbnail( $post->ID, 'medium');; $output .= "<li id=\"Slide1\" data-thumb=\"$thumb_url \"> $medium_thumb</li>\n"; } // Now you loop through each attachment //start count $i = 2; foreach ($attachments as $id => $attachment) { // Fetch the thumbnail (or full image, it's up to you) $img = wp_get_attachment_image_src($id, 'full'); $output .= "<li id=\"Slide$i\" data-thumb=\"$img[0] \">\n"; $output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n"; $output .="<div class=\"galleryCaption\"> $attachment->post_excerpt </div> </li> \n"; //update count $i++; } $output .= "</ul>\n"; $output .= "</div>\n"; $output .= "<div id=\"carousel\" class=\"flexslider\">\n"; $output .= "<ul class=\"slides\">\n"; $sm_thumb = get_the_post_thumbnail( $post->ID, 'thumbnail');; $output .= "<li> $sm_thumb</li>\n"; //loop through them again to display the carousel foreach ($attachments as $id => $attachment) { // Fetch the thumbnail (or full image, it's up to you) $img2 = wp_get_attachment_image_src($id, 'thumbnail'); $output .= "<li>\n"; $output .= "<img src=\"{$img2[0]}\" width=\"{$img2[1]}\" height=\"{$img2[2]}\" alt=\"\" />\n"; $output .="</li> \n"; }// end carousel loop $output .= "</ul>\n"; $output .= "</div>\n"; return $output; } |
Now to simply initialize the slider using flexslider’s functions. You can put this directly in your footer.php or you can include it in your functions.php using wp_footer to output the script.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(window).load(function() { // The slider being synced must be initialized first $('#carousel').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, itemWidth: 210, itemMargin: 5, asNavFor: '#slider' }); $('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel" }); }); |
Hi. I wanted to know if this will work to get images in a gallery to link to another page or url, instead of just redirecting to the image? Thank you.
yep you can just add in the anchor tags before the image tags and that will work just fine.
how so? I am a newbie.
[…] Customizing the output of the gallery shortcode […]