I've got a custom post type for staff members in a project I'm working on. I want to display all staff members in a slider, with groups of 3 rotating.
I need my listing to end up looking like this, repeating until all posts are wrapped in "slide" in groups of 3. The last instance of the slide can have only 1 or 2 posts in it if needed, that's no issue.
<div class="slide">
<div class="employee">
<div class="em-left">
{post image}
</div>
<div class="em-right">
<h2>{Title}</h2>
<p><em>{Position}</em></p>
<p class="performance"><span class="highlight">{Productivity}</span> productivity</p>
</div>
</div>
<div class="employee">
<div class="em-left">
{post image}
<div class="em-right">
<h2>{title}</h2>
<p><em>{position}</em></p>
<p class="performance"><span class="highlight">{productivity}</span> productivity</p>
</div>
</div>
<div class="employee">
<div class="em-left">
{post img}
</div>
<div class="em-right">
<h2>{title}</h2>
<p><em>{position}</em></p>
<p class="performance"><span class="highlight">{productivity}</span> productivity</p>
</div>
</div>
</div>
My existing query, works great, outputs everything I need in the right format except the "slide" wrap.
<?php
$args=array(
'post_type' => 'staff',
'post_status' => 'publish',
'orderby' => 'menu_order',
'order' => 'ASC',
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 1;
while ($my_query->have_posts()) : $my_query->the_post();
$id = get_the_ID();
// grab custom fields
rwmb_meta( $field_id);
?>
<?php
// grab photos
$images = rwmb_meta( 'staff-photo','size=thumbnail' );
$i = 1;
if ( !empty( $images ) ) {
foreach ( $images as $image ) {
echo "<div class='employee'><div class='em-left'><img src='{$image['url']}' class='img-round'></a></div><div class='em-right'>";
if($i == 1) break;
}
} else {
echo "<div class='employee'><div class='em-left'><img src='".get_bloginfo('template_url')."/images/placeholder.jpg' class='img-round'></a></div><div class='em-right'>";
}
?>
<h2><?php the_title(); ?></h2>
<p><em><?php echo rwmb_meta( 'position' ); ?></em></p>
<p class="performance"><span class="highlight"><?php echo rwmb_meta( 'productivity' ); ?>%</span> productivity</p>
</div><!-- em-right -->
</div><!-- employee -->
<?php
endwhile;
}
wp_reset_query();
?>