Support

Account

Home Forums Add-ons Repeater Field Specific classes for each image

Helping

Specific classes for each image

  • Using the ACF repeater fields example as an example.
    I have 4 rows of content for that repeater field, My question is how would I add a class to a specific image.

    Because if I add a class to the image in the code below, it will apply to all four images.

    <?php if( have_rows('repeater_field_name') ): ?>
    
    	<ul class="slides">
    
    	<?php while( have_rows('repeater_field_name') ): the_row(); 
    
    		// vars
    		$image = get_sub_field('image');
    		$content = get_sub_field('content');
    		$link = get_sub_field('link');
    
    		?>
    
    		<li class="slide">
    
    			<?php if( $link ): ?>
    				<a href="<?php echo $link; ?>">
    			<?php endif; ?>
    
    				<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
    
    			<?php if( $link ): ?>
    				</a>
    			<?php endif; ?>
    
    		    <?php echo $content; ?>
    
    		</li>
    
    	<?php endwhile; ?>
    
    	</ul>
    
    <?php endif; ?>
  • 
    <?php if( have_rows('repeater_field_name') ): ?>
    
    	<ul class="slides">
    <?php $count=1; ?>
    	<?php while( have_rows('repeater_field_name') ): the_row(); 
    
    		// vars
    		$image = get_sub_field('image');
    		$content = get_sub_field('content');
    		$link = get_sub_field('link');
    $class = 'image-'.$count;
    
    		?>
    
    		<li class="slide">
    
    			<?php if( $link ): ?>
    				<a href="<?php echo $link; ?>">
    			<?php endif; ?>
    
    				<img class="<?php echo $class; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
    
    			<?php if( $link ): ?>
    				</a>
    			<?php endif; ?>
    
    		    <?php echo $content; ?>
    
    		</li>
    <?php $count++; ?>
    	<?php endwhile; ?>
    
    	</ul>
    
    <?php endif; ?>
    
Viewing 2 posts - 1 through 2 (of 2 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.