We need to generate some simple html that contains all of the slides we will want presented in our slider. The Foundation Orbit Slider javascript will then find this HTMl and manipulate it to create the slider dynamically (see below).
This is the most complicated step of the process, and in fact there are a couple of options for doing it. The best option is to generate the “slides” as individual <img /> tags. The thing about this is, you will need to do a little more work to make sure the slider looks good if this is the option you choose. In particular, you need to make sure that all the images being shown in the slider are the same size and shape, or they will end up off-center and weird-looking. Fortunately, there is a solution to that issue (see “Tweaks”, below). Here’s the code you will need if you want to do things this way:
<?php
/* a short template to generate the front-page slider from content */
/* Creates individual <img /> tags for each slide. Requires the
"fluid" attribute to be set to "true" rather than, say, "16x9"
in javascripts/child-theme.js.
,*/
// Prepare the args for the query
$args = array(
'post_type' => array( 'post', 'page' ),
'meta_key' => 'req_slider_checkbox',
'meta_value' => '1',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 3
);
// Fire the query
$slider_query = new WP_Query( $args );
// Check for posts in the query
if ( $slider_query->have_posts() ) :
?>
<div id="slider-home" class="row"><!-- Slider -->
<div class="twelve columns">
<div id="slider">
<?php while ( $slider_query->have_posts() ) : $slider_query->the_post();
if ( has_post_thumbnail() ) { // Check for an post thumbnail
$this_id = get_the_ID(); // we use this value so many times might as well not run the funtion each time
$source = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-16x9' ); // Change the size according to the registered image sizes you have 'thumbnail|medium|large|full' and any custom sizes you have created in functions.php.
$tiny_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-thumb' ); // if we use thumbnails, which are broken right now
}
?>
<div data-thumb="<?php echo $tiny_thumb[0]; ?>" data-caption="#caption-<?php echo $this_id; ?>" id="slide-<?php echo $this_id; ?>" >
<?php the_post_thumbnail('slider16x9'); ?>
</div> <!-- /slide-ID -->
<span class="orbit-caption" id="caption-<?php echo $this_id; ?>">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</a>
</span> <!-- /orbit-caption span -->
<?php endwhile; ?>
</div> <!-- /slider -->
</div> <!-- twelve columns div -->
</div><!-- / slider-home -->
<?php endif; wp_reset_postdata(); ?>
If the tweaks I discuss below seem too complicated, you can create the slider in a somewhat more roundabout way, using empty divs with custom background images! This is a dirty hack and leads to some complications, but it is still legitimate. Here’s how you would do it that way:
<?php
/* a short template to generate the front-page slider from content */
/* puts images in the BACKGROUND of the slider element rather than
generating <img /> tags for each image. Requires the use fluid: attribute
to be set to (say) 16x9 in javascripts/child-theme.js, rather than
"true".
*/
// Prepare the args for the query
$args = array(
'post_type' => array( 'post', 'page' ),
'meta_key' => 'req_slider_checkbox',
'meta_value' => '1',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 3
);
// Fire the query
$slider_query = new WP_Query( $args );
// Check for posts in the query
if ( $slider_query->have_posts() ) :
?>
<div id="slider-home" class="row"><!-- Slider -->
<div id="slider">
<?php while ( $slider_query->have_posts() ) : $slider_query->the_post();
$slide_bg_css = ''; // We need this later, if we have a background image
if ( has_post_thumbnail() ) { // Check for a post thumbnail
$this_id = get_the_ID(); // we use this value so many times might as well not run the funtion each time
$source = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'full' ); // Change the size according to the registered image sizes you have 'thumbnail|medium|large|full'
$tiny_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-thumb' ); // if we use thumbnails, which are broken right now
$slide_bg_url = $source[0]; // The URI is always the first argument here
// this css uses the image as a background.
$slide_bg_css = ' style="background-image: url(' . $slide_bg_url . '); background-position:center; background-repeat:no-repeat"';
}
?>
<div data-thumb="<?php echo $tiny_thumb[0]; ?>" data-caption="#caption-<?php echo $this_id; ?>" id="slide-<?php echo $this_id; ?>" <?php echo $slide_bg_css; ?> onclick="location.href='<?php the_permalink(); ?>';" >
</div> <!-- /slide-ID -->
<span class="orbit-caption" id="caption-<?php echo $this_id; ?>">
<a href="<?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</a>
</span> <!-- /orbit-caption span -->
<?php endwhile; ?>
</div> <!-- /slider -->
</div><!-- / Slider -->
<?php endif; wp_reset_postdata(); ?>
In fact you, can even try both out at once. Simply create two files in your child theme directory, “content-slider-bkgrnd.php” and “content-slider-img.php” and modify front.php to call one or the other, and see which you like better.
