CODEWITHSUNDEEP
phprepeateradvanced-custom-fields
OMGDrAcula
OMGDrAcula

Reputation: 1064

ACF Add Class if first item in repeater array

I am trying to build a site using ACF that has animated banners on page load. In order for the effect to work I need the first item to have specific classes and then its siblings to not have those classes. I tried using a counter but I am newer to PHP/ACF so while I can do the basic repeater stuff this has me stuck a bit. What I have tried is below

<?php if( have_rows('homepage_tiles') ): 
                                $count = 0;
                            ?>

                            <div class="hero-list-container">

                            <?php while( have_rows('homepage_tiles') ): the_row(); 

                                // vars
                                $image = get_sub_field('image');
                                $content = get_sub_field('content');
                                $link = get_sub_field('link');

                                ?>

                                <?php if($count == 0): ?>
                                    <div class="list-tile animate-up first">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                    <?php $counter++; ?>
                                <?php endif; ?>

                            <?php endwhile; ?>

                            </div>

                        <?php endif; ?>

I would be fine with it looping and just adding the class to the first one, or outputting the full html needed for the first item and then different html for the rest.

Thanks for the help!

So I used this and it works, but if someone has a better solution I am open to it. 

<?php if( have_rows('homepage_tiles') ): 
                                $count = 1;
                            ?>

                            <div class="hero-list-container">

                            <?php while( have_rows('homepage_tiles') ): the_row(); 

                                // vars
                                $image = get_sub_field('image');
                                $content = get_sub_field('content');
                                $link = get_sub_field('link');

                                ?>

                                <?php if($count == 1): ?>
                                    <div class="list-tile animate-up first">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php $count++; ?>

                                <?php if($count > 2): ?>
                                    <div class="list-tile">
                                        <div class="module-background" style="background-image: url('<?php the_sub_field('tile_bg_image') ?>'); background-size: cover;">
                                        </div>
                                    </div>
                                <?php endif; ?>

                            <?php endwhile; ?>

                            </div>

                        <?php endif; ?>

I had it set to >= 2 but for some reason it would repeat the first slide.

Upvotes: 1

Views: 4103

Answers (1)

morgyface
morgyface

Reputation: 378

I realise the question was posted a few months ago but in case you wanted to simplify your code a bit here's my solution.

<?php if( have_rows('homepage_tiles') ): $counter = 0; ?>
    <div class="hero-list-container">
        <?php
        while( have_rows('homepage_tiles') ): the_row();
            $tile_bg_image = get_sub_field('tile_bg_image');
            ?>
            <div class="list-tile<?php if( $counter == 0 ) { ?> animate-up first<?php } ?>">
                <div class="module-background" style="background-image: url('<?php echo $tile_bg_image; ?>'); background-size: cover;"></div>
            </div>
        <?php $counter++; endwhile; ?>
    </div>
<?php endif; ?>

Upvotes: 2

Related Questions