Support

Account

Home Forums Add-ons Gallery Field Can I add a class to first image in gallery loop

Solving

Can I add a class to first image in gallery loop

  • I’m using ACF gallery to allow users to choose images for a foundation6 orbit carousel, but if I add the class “is-active” to “orbit-slide” then all images get that class and display stacked briefly, if I omit “is-active” then the first image doesn’t show on first loop

    I guess I need a way to add “is-active” to just the first image in the loop

    <section id="featured-slider">	
    <?php $images = get_field('gallery'); if( $images ): ?> <!-- This is the gallery filed slug -->
    <div class="orbit" role="region" aria-label="Portfolio" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
    <ul class="orbit-container">
    <?php foreach( $images as $image ): ?> <!-- This is your image loop -->
    <li class="orbit-slide ">
    <img class="orbit-image" data-interchange="[<?php echo $image['sizes']['featured-small']; ?>, small], [<?php echo $image['sizes']['featured-medium']; ?>, medium], [<?php echo $image['sizes']['featured-large']; ?>, large], [<?php echo $image['sizes']['featured-xlarge']; ?>, xlarge]"  alt="<?php echo $image['alt']; ?>"  />
    </li>
    <?php endforeach; ?> <!-- This is where the image loop ends -->
    </ul><!-- Image Slider Code -->
    </div>
    
    <?php endif; ?> <!-- This is where the gallery loop ends -->
    </section>
  • create a counter

    
    $count = 0;
    foreach( $images as $image ) {
      // when outputing the element something like this
      // I haven't a clue where you're trying to add this class in the code you provided
      // I'm just guessing that it in the li
     
    // some code here ......
       
      ?>
        <li class="orbit-slide <?php 
           if ($count == 0) {
             echo 'is-active';
           }
            ?>">
      <?php 
    
    // some more code here
    
      // increment count before end loop
      $count++;
    
    } // end foreach
    
    
  • Thanks for this John, I worked this in nicely to an image slider using the Gallery field:

    <div class="page-block-right slide-nav-section">
              <?php 
    $images = get_field('gallery');
    $size = 'large'; 
    if( $images ): ?>
            <?php foreach( $images as $image_id ): ?>
              <input type="radio" id="<?php echo $image_id;?>" name="slider" <?php 
           if ($count == 0) {
             echo 'checked';
           }
            ?> >
               <label for="<?php echo $image_id;?>"></label>
    <div class="slide bg4"><?php echo wp_get_attachment_image( $image_id, $size ); ?></div>
                   <?php $count++; ?>
            <?php endforeach; ?>
    <?php endif; ?>         
          </div>
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.