Created
August 6, 2016 18:08
-
-
Save morgyface/82756e0351349938e399e3e7906c3ffd to your computer and use it in GitHub Desktop.
WordPress | ACF | Adaptive Repeater
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| ul {margin:0; padding:0; list-style:none; overflow:auto} | |
| ul li {float:left} | |
| ul.half li {width:50%} | |
| ul.thirds li {width:calc(100% / 3); width:33.33%} | |
| ul.quarters li {width:25%} | |
| </style> | |
| <?php | |
| if( have_rows('repeater_field_name') ): | |
| $repeater = get_field('repeater_field_name'); | |
| $count = count( $repeater ); | |
| echo '<ul class="'; | |
| if ( $count <= 2 || $count == 4 ) { | |
| echo 'half'; | |
| } elseif ( $count == 3 || $count == 5 || $count == 6 || $count == 9 ) { | |
| echo 'thirds'; | |
| } else { | |
| echo 'quarters'; | |
| } | |
| echo '">'; | |
| while( have_rows('repeater_field_name') ): the_row(); | |
| $title = get_sub_field('title'); | |
| echo '<li>'; | |
| echo '<h3>' . $title . '</h3>'; | |
| echo '</li>'; | |
| endwhile; | |
| echo '</ul>'; | |
| endif; | |
| ?> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ACF Repeater with content dependent list item widths
By counting the number of repeater rows we can ensure the list items fit the space available.