Featured images loop for Orbit Slider

Question

To integrate Zurb´s Orbit Slider in my theme, I´m trying to generate this HTML with WordPress:

<div id="featured">
  <img src="featured-image-1.jpg" alt="the-alt-tag" data-caption="#htmlCaption-1" />
  <img src="featured-image-2.jpg" alt="the-alt-tag" data-caption="#htmlCaption-2" />
  <img src="featured-image-3.jpg" alt="the-alt-tag" data-caption="#htmlCaption-3" />
</div>
<span class="orbit-caption" id="htmlCaption-1"><a href="#">The post title 1</a></span>
<span class="orbit-caption" id="htmlCaption-2"><a href="#">The post title 2</a></span>
<span class="orbit-caption" id="htmlCaption-3"><a href="#">The post title 3</a></span>

I managed to get a list of featured images in a div, but I´m not sure how to:

1. Add a unique data attribute to each image tag like this: data-caption="#htmlCaption-1" (I suppose I need to run the preg_replace() function to insert the custom HTML?)
2. Run the second loop to generate the 3 span elements (should this be a new wp_query or can I use the same one?) Edit: I just found out that by using rewind_posts(); we can use the same query multiple times.

This is the code I have now:

// Get the latest 5 sticky posts from the 'events' post type
$args = array(
  'post_type'   =>  'event',
  'posts_per_page' => 5,
  'post__in'  => get_option( 'sticky_posts' )
);
$slider_query = new WP_Query( $args );

// Display the featured images in div 
echo '<div id="featured">';

  while ( $slider_query->have_posts() ) : $slider_query->the_post();
    the_post_thumbnail();
  endwhile;

  $slider_query->rewind_posts();

echo '</div>';

// Print the captions   
while ( $slider_query->have_posts() ) : $slider_query->the_post();

  echo '<span class="orbit-caption"><a href="'; 
    the_permalink(); 
  echo '">';  
    the_title(); 
  echo '</a></span>';

endwhile;

// Reset Post Data
wp_reset_postdata(); 

?>

Hope someone can help. Thanks!

Answer 1

I'd use the this code to print the image instead of using the_post_thumbnail();.

So that the $slider_query->current_post can be used to print the current iteration of post in WP_Query loop.

Eg.

  <img src="<?php wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="the-alt-tag" data-caption="#htmlCaption-<?php $slider_query->current_post; ?>" />

Update -

Untested but it should work. Make sure you turn on WordPress debug before development.

<?php

// Get the latest 5 sticky posts from the 'events' post type
$args = array(
  'post_type'   =>  'event',
  'posts_per_page' => 5,
  'post__in'  => get_option( 'sticky_posts' )
);
$slider_query = new WP_Query( $args );

// Display the featured images in div 
echo '<div id="featured">';

    while ( $slider_query->have_posts() ) : $slider_query->the_post() ;
    echo '<img src="'.wp_get_attachment_url( get_post_thumbnail_id() ).'" alt="the-alt-tag" data-caption="#htmlCaption-'.$slider_query->current_post.'" />';
    endwhile;

$slider_query->rewind_posts();

echo '</div>';

// Print the captions   
while ( $slider_query->have_posts() ) : $slider_query->the_post();

  echo '<span class="orbit-caption" id="htmlCaption-'.$slider_query->current_post.'><a href="'; 
    the_permalink(); 
  echo '">';  
    the_title(); 
  echo '</a></span>';


endwhile;

// Reset Post Data
wp_reset_postdata(); 

?>

Answer 2

The documentation states that the image must be in a <ul data-orbit> <li></li> </ul> in order for it to work see here