Home › Forums › Add-ons › Repeater Field › Change class of element depending on amount of Repeater Field items
Hello,
I am looking for a way to change the class of a Repeater Field item, depending on how many Repeater Field items there are.
I’m working with Bootstrap.
Let’s say I have filled in only one Repeater Field, the class of that field should be “col-lg-12”.
So If I’ve filled in two Repeater Fields, the class of those two fields should be “col-lg-6”.
And you guessed it, the class of the fields should be “col-lg-4”, if I’ve filled in three fields, and so on.
Does anyone know how to do this?
Thank you in advance!
$row_count = count(get_field('repeater_field_name'));
$size = 0;
if ($row_count) {
$size = (int)12/$row_count;
}
if ($size < 2) {
//force minimum of col-lg-2
$size = 2;
}
$class = 'col-lg-'.$size;
// your repeater loop here
Hi,
I’m not sure how to implement this code you gave me.
I’ve tried this:
<?php
$row_count = count(get_field('highlight'));
$size = 0;
if ($row_count) {
$size = (int)12/$row_count;
}
if ($size < 1) {
//force minimum of col-lg-6
$size = 6;
}
if ($size < 2) {
//force minimum of col-lg-4
$size = 4;
}
if ($size < 3) {
//force minimum of col-lg-3
$size = 3;
}
// your repeater loop here
if( have_rows('highlight') ): while ( have_rows('highlight') ) : the_row();?>
<a href="<?php the_sub_field('highlight_link');?>">
<div class="<?php echo 'col-lg-'.$size; ?> <?php echo 'col-md-'.$size; ?> <?php echo 'col-sm-'.$size; ?> <?php echo 'col-xs-'.$size; ?> highlight" style="background-image:url('<?php the_sub_field('highlight_image');?>');">
<div class="highlight_title">
<div class="highlight_title_inner">
<?php the_sub_field('highlight_title');?>
</div>
</div>
</div>
</a>
<?php endwhile; else : endif;?>
Yet it doesn’t output the classes I want.
How can I make sure that when I have:
1 item, the size is 12.
2 items, the size is 6.
3 items, the size is 4.
4 items, the size is 3.
Thanks in advance.
You’ve got more there than you need and your additional ifs are complicating it.
if ($row_count) {
$size = (int)12/$row_count;
}
This calculates the width of the row
if there is 1 row the result is 12 (col-12)
if there is 2 rows the result is 6 (col-6)
3 result 4 (col-4)
4 result 3 (col-3)
5 result 2 (actually 2.4 rounded to int) (col-2)
6 result 2 (col-2)
The only thing I did here was to add
if ($size < 2) {
//force minimum of col-lg-2
$size = 2;
}
assuming you did not want to have a column smaller than that.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
ACF wouldn’t be so widely used in WordPress if it didn’t have some pretty amazing capabilities. In this article, we look at a few of the features we’ll discuss during “7 things you didn’t know you could do with ACF” at #WPEDecode later this month. https://t.co/5lnsTxp81j pic.twitter.com/Yf0ThPG1QG
— Advanced Custom Fields (@wp_acf) March 16, 2023
© 2023 Advanced Custom Fields.
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.