0

I am trying to display an infinite carousel with thumbnails of all my posts at the top of my single post page.

After the carousel the current post is displayed.

So I have the following code:

rewind_posts();
// get current post
if (have_posts()) {
while ( have_posts() ) : the_post();
//store post ID in $current
$current = get_the_id();
// get thumbnail image
if ( has_post_thumbnail() ) {
$post_thumbnail_id = get_post_thumbnail_id();
$post_thumbnail_image = wp_get_attachment_image_src( $post_thumbnail_id, 'x_large' );   

Then I start the loop for the carousel:

$inner_args = array(
        'post_type' => 'post-type',
        'posts_per_page' => -1,
        );

$inner_query = new WP_Query( $inner_args );
if ( $inner_query->have_posts() ) {
    while ( $inner_query->have_posts() ) {
        $inner_query->the_post();
        $title = get_the_title();
        $link = get_permalink();
        // get custom field value
        $meet_text = simple_fields_value('name-display');
        if (!empty($meet_text)) {
            $display_text = $meet_text;
        } else {
            $display_text = $title;
        }
        $url = get_the_permalink();
        // get thumbnails
        if ( has_post_thumbnail() ) {
            $post_thumbnail_id = get_post_thumbnail_id();
            $post_thumbnail_image = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
            $post_thumb = $post_thumbnail_image[0];
        } else {
            $post_thumb = '';
        }
        $content = get_the_content();
        $excerpt = get_the_excerpt();
        $excerpt = substr($excerpt,0,500).'...';

Then I have the HTML for the carousel:

           <div class="wow slide-in slide">
                <div class="active">
                    <img src="<?php echo $post_thumb; ?>" />
                   <a href="<?php echo $link; ?>">
                    <div class="preview-content text-center">
                        <div class="preview-content-in">
                            <span class="icon-mark"></span>
                            <h5><?php echo $display_text; ?></h5>
                        </div>
                    </div>  
                    </a>                    
                </div>
            </div>

Then I close out the loop for the carousel

<?php
          }
     }
    wp_reset_postdata();
    ?>

Finally I display the current post thumbnail:

<div class="current li large-4 active"><?php default_thumbnail(); ?> 
 // default_thumbnail() is a function to display either the post thumbnail or a default image if no thumbnail present
    <div class="preview-content text-center">
         <div class="preview-content-in">
            <span class="icon-mark"></span>
            <h5><?php echo $display_text; ?></h5>
        </div>
    </div>  
</div>

My question is how do i get the carousel loop to start from the current post?

I've tried adding

'p' => $current // where $current = get_the_id90

to the carousel loop's $args but when I do that it shows the current thumbnail but it doesn't show the remaining posts I asked for:

('posts_per_page' => -1,)

In other words the first item in the carousel loop should be the same as the current post.

So the carousel has posts 'A' 'B' 'C' and below the carousel you should see post 'A'

If you click on 'B' in the carousel then the page will refresh and the carousel will display 'B' 'C' 'D' and below the carousel you should see post 'B'

here is an image that might help:

screenshot

Any ideas?

  • 1
    When you say start from, does this mean that the current post should just be the first one in the carousel and all other posts should follow, or should the current post be the first in the carousel and posts published more recently than the current post should be skipped? – Dave Romsey May 31 '17 at 21:37
  • The current post should be the first post in the carousel. – Diah May 31 '17 at 21:45
0

I'm not sure I understand what you are trying to achive, but I suspect you want to: - show current post in carousel - show all other posts (without post shown before) - single post

If thats what you need one more loop - so you can first show your current post, then to show all posts without the current one.

https://gist.github.com/palmiak/34389b42a33667de1a57194d21871fde

  • I'm trying to implement your solution but I'm still working on it. I've edited the OP and added an image that might help describe what I'm trying to do. – Diah Jun 1 '17 at 17:39
  • Please add the external code snippet into the answer, as external links can expire in the future, thanks. – birgire Jun 1 '17 at 17:45
  • The problem with this solution is that while the first item in the carousel corresponds to the current post, the rest of the carousel starts from the beginning again. This is meant to be a navigation feature. – Diah Jun 1 '17 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.