Question

On the right rail here: http://www.julianamaeberger.com/soma/sample-testimonial-3/ I am showing a random post "Testimonial". Below that I am showing all featured images for the category "Testimonial" so that you can flip through the images and choose where you want to go next.

I want to highlight the image that is related to the content above, but can't figure out how to do it. This is my first time building templates, so I may be going about it the wrong way. Any help in the right direction would be much appreciated.

Here is the code for the right rail:

<div class="rightcolumn">
   <div class="testimonial">
     <h3>Testimonials</h3>
     <?php
 $postslist = get_posts('category_name=testimonial&numberposts=1&orderby=rand');
 foreach ($postslist as $post) : 
    setup_postdata($post);
 ?>
     <?php the_content(); ?>
     <?php endforeach; ?>
    </div>
    <div class="carousel default"> 
      <div class="jCarouselLite">
        <ul class="portfolio">
          <?php
 $postslist = get_posts('category_name=testimonial&numberposts=-1&order=DES');
 foreach ($postslist as $post) : 
    setup_postdata($post);
 ?>
          <li> 
            <?php the_post_thumbnail( 'nav' ); ?>
          </li>
          <?php endforeach; ?>
        </ul>
      </div>

      <script type="text/javascript">
    $(".default .jCarouselLite").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev",
  visible: 3,
  scroll: 3,
  speed:100
    });   
      </script>
</div>
</div>
Was it helpful?

Solution

How you want to highlight this image is specific to your layout, but it probably involves setting a class to the <li> surrounding it? You can do this by comparing the ID of the post you have displayed with the ID of the post of which you are showing the thumbnail.

In your first loop you save the ID:

$current_testimonial_id = get_the_ID();

In your second loop you compare it to the current thumbnail:

<li <?php if ( get_the_ID() == $current_testimonial_id ) { echo ' class="highlighted"'; } ?>>

A quick tip if you are working with multiple loops: most template functions accept post ID parameters, so you don't have to use the setup_postdata() function which sets some global variables. This is handy if you need the "main" post query again after your extra loop. So the following code works just a well for the second loop:

    <ul class="portfolio">
      <?php
 $testimonials = get_posts('category_name=testimonial&numberposts=-1&order=DESC');
 foreach ($testimonials as $testimonial) : 
      ?>
      <li <?php if ( $testimonial->ID == $current_testimonial_id ) { echo ' class="highlighted"'; } ?>> 
        <?php echo get_the_post_thumbnail( $testimonial->ID, 'nav' ); ?>
      </li>
      <?php endforeach; ?>
    </ul>
Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top