ACF Add Class if first item in repeater array

OMGDrAcula

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.

morgyface

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; ?>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

get first row (image) of ACF repeater field

From Dev

Wordpress ACF: How to add rows to a repeater field attached to a user via custom code (PHP)

From Dev

ACF odd even repeater

From Dev

repeater is not updated after adding item to array

From Dev

Add item to array Angular

From Dev

add_row in ACF Pro isn't saving repeater values

From Dev

add class to first item in ng-repeat with jquery

From Dev

Add class in angular on ng-repeat when item is contained on array

From Dev

WordPress ACF: add default rows to Repeater field type in admin section for a custom post type

From Dev

Add an item to a matlab class

From Dev

ACF repeater field not rendering the rows

From Dev

ASP.NET Repeater Item add divider after each row

From Dev

Finding item of array base on the ng-repeater index in Angular

From Dev

Use jQuery to add class to first item inside every foreach loop

From Dev

No Results from ACF Repeater Field

From Dev

Wordpress Advanced Custom Fields - Limit Repeater Group to first item

From Dev

How to add a class if repeater equals something

From Dev

Unable to add new color class to first sub - menu item when outer menu item is opened in accordion

From Dev

Add extra repeater item or loop from the code behind

From Dev

Rails: process partials with loop, add additional class for the first item

From Dev

Add an item to a matlab class

From Dev

Wordpress ACF Repeater Image resize

From Dev

ACF odd/even repeater

From Dev

Is there a way to add a 3rd item template to a repeater

From Dev

CPT and ACF Repeater not working together

From Dev

Angular doesn't bind repeater after first push to array

From Dev

WebForms repeater, set CSS class depends on item index

From Dev

Repeater inside Group ACF Wordpress

From Dev

ACF repeater upcoming and past events

Related Related

  1. 1

    get first row (image) of ACF repeater field

  2. 2

    Wordpress ACF: How to add rows to a repeater field attached to a user via custom code (PHP)

  3. 3

    ACF odd even repeater

  4. 4

    repeater is not updated after adding item to array

  5. 5

    Add item to array Angular

  6. 6

    add_row in ACF Pro isn't saving repeater values

  7. 7

    add class to first item in ng-repeat with jquery

  8. 8

    Add class in angular on ng-repeat when item is contained on array

  9. 9

    WordPress ACF: add default rows to Repeater field type in admin section for a custom post type

  10. 10

    Add an item to a matlab class

  11. 11

    ACF repeater field not rendering the rows

  12. 12

    ASP.NET Repeater Item add divider after each row

  13. 13

    Finding item of array base on the ng-repeater index in Angular

  14. 14

    Use jQuery to add class to first item inside every foreach loop

  15. 15

    No Results from ACF Repeater Field

  16. 16

    Wordpress Advanced Custom Fields - Limit Repeater Group to first item

  17. 17

    How to add a class if repeater equals something

  18. 18

    Unable to add new color class to first sub - menu item when outer menu item is opened in accordion

  19. 19

    Add extra repeater item or loop from the code behind

  20. 20

    Rails: process partials with loop, add additional class for the first item

  21. 21

    Add an item to a matlab class

  22. 22

    Wordpress ACF Repeater Image resize

  23. 23

    ACF odd/even repeater

  24. 24

    Is there a way to add a 3rd item template to a repeater

  25. 25

    CPT and ACF Repeater not working together

  26. 26

    Angular doesn't bind repeater after first push to array

  27. 27

    WebForms repeater, set CSS class depends on item index

  28. 28

    Repeater inside Group ACF Wordpress

  29. 29

    ACF repeater upcoming and past events

HotTag

Archive