Skip to content

Instantly share code, notes, and snippets.

@morgyface
Created August 6, 2016 18:08
Show Gist options
  • Select an option

  • Save morgyface/82756e0351349938e399e3e7906c3ffd to your computer and use it in GitHub Desktop.

Select an option

Save morgyface/82756e0351349938e399e3e7906c3ffd to your computer and use it in GitHub Desktop.
WordPress | ACF | Adaptive Repeater
<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;
?>
@morgyface
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment