0

Using the ACF Repeater field I am trying to show a rating, using empty and filled circles. It is a * out of 5 kind of rating.

My desire is to have the repeater field fill in the circles by iterating a class name like so:

<?php for($i=1; $i<=get_sub_field('rating'); $i+=1)
    if( $i <= get_sub_field('rating') ) {
        echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
    } else {
        echo '<li class="graph empty"></li>'; 
    } 
?>

In essence, if I tell the repeater to fill 3 circles, then the PHP should evaluate to this HTML:

<li class="graph empty fill-1"></li>
<li class="graph empty fill-2"></li>
<li class="graph empty fill-3"></li>
<li class="graph empty"></li>
<li class="graph empty"></li>

The actual result is:

<li class="graph empty fill-1"></li>
<li class="graph empty fill-2"></li>
<li class="graph empty fill-3"></li>

Which makes sense, since the database only has 3 values, and I am telling it to loop over the total number of values. I just can't figure out how to have it iterate the class while it finds values, then drop the class fill- until it gets to the limit of 5.

In sudo code, I want to be able to tell the while loop:

//while there are the_rows()
  //iterate the class name "fill-"
//once you have found all the rows
  //only insert the class name "graph empty" until 5 is reached

Here is my HTML and PHP:

<?php if( have_rows('program_skills') ) : 
    while( have_rows('program_skills') ) : the_row(); ?>

        <div class="skills-wrapper">
            <div class="col-xs-6">
                <p><?php the_sub_field('heading'); ?></p>
            </div>
            <div class="col-xs-6">
                <div class="skills-graph">
                    <ul>
                        <?php for($i=1; $i<=get_sub_field('rating'); $i+=1)
                            if( $i <= get_sub_field('rating') ) {
                                echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
                            } else {
                                echo '<li class="graph empty"></li>'; //Attempt to display graph empty for the remaining li's until the count = 5.
                            } 
                        ?>
                    </ul>
                </div>
            </div>
        </div>

    <?php endwhile;

endif;?>

I'm really stuck on this and thank you for any help you're able to give. Please ask any questions for further clarification, I'd be glad to answer them.

4
  • just change the for loop to be while $i<=5 instead of rating.
    – Milo
    Jul 12 '15 at 14:32
  • I can do that but then all 5 circles get filled. That's why I have it <=get_sub_field('rating'); because it pulls the value of filled circles from my input on the repeater. If I define "3" then I want "3" filled circles and 2 unfilled circles.
    – mrClean
    Jul 12 '15 at 14:36
  • Oh, wait. Nevermind, I see what you're saying. Thanks! Can you post that in the form of an answer, so I can give you credit?
    – mrClean
    Jul 12 '15 at 14:42
  • just add your working code as an answer and you'll be able to accept it after waiting a while
    – Milo
    Jul 12 '15 at 14:45
0

If I compare the counter to five instead of the input (****), then it evaluates perfectly. Thanks to Milo for the help.

<?php if( have_rows('program_skills') ) : 
    while( have_rows('program_skills') ) : the_row(); ?>

        <div class="skills-wrapper">
            <div class="col-xs-6">
                <p><?php the_sub_field('heading'); ?></p>
            </div>
            <div class="col-xs-6">
                <div class="skills-graph">
                    <ul>
                        ****<?php for($i=1; $i<=5; $i+=1)
                            if( $i <= get_sub_field('rating') ) {
                                echo '<li class="graph empty ' . 'fill-' . $i . '"></li>';
                            } else {
                                echo '<li class="graph empty"></li>'; 
                            } 
                         ?>
                    </ul>
                </div>
            </div>
        </div>

    <?php endwhile;
endif;?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.