ACF Add Class, если первый элемент в массиве повторителя - PullRequest
Новая
       32

ACF Add Class, если первый элемент в массиве повторителя

0 голосов
/ 04 июня 2018

Я пытаюсь создать сайт с использованием ACF, в котором есть анимированные баннеры при загрузке страницы.Чтобы эффект работал, мне нужно, чтобы у первого элемента были определенные классы, а затем у его братьев и сестер не должно быть этих классов.Я попытался использовать счетчик, но я новичок в PHP / ACF, так что, хотя я могу делать базовые повторители, я немного застрял.То, что я попробовал, ниже 

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

Я был бы в порядке, если бы он зацикливался и просто добавлял класс к первому, или выводил полный html, необходимый для первого элемента, а затем другой html для остальных.

Спасибо за помощь!

Так что я использовал это, и оно работает, но если у кого-то есть лучшее решение, я открыт для него.

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

У меня было установлено значение> = 2, но по какой-то причине он повторит первый слайд.

1 Ответ

0 голосов
/ 30 сентября 2018

Я понимаю, что вопрос был опубликован несколько месяцев назад, но если вы хотите немного упростить свой код, вот мое решение. 

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