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


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']; ?>"  />
    <?php endforeach; ?> <!-- This is where the image loop ends -->
    </ul><!-- Image Slider Code -->
    <?php endif; ?> <!-- This is where the gallery loop ends -->
  • 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';
    // some more code here
      // increment count before end loop
    } // 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">
    $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; ?>         
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.