Hi,
I’m building a logo slider based off repeater fields. I would like to wrap list tags per each 3 items (see output below). Much appreciated!
Code:
<li>
<?php if( have_rows('klantslider') ): while ( have_rows('klantslider') ) : the_row(); ?>
<?php $image = get_sub_field('logo'); if( !empty($image) ): $size = 'clients'; $thumbclient = $image['sizes'][ $size ]; ?>
<div class="slideitem"><img class="img-responsive" src="<?php echo $thumbclient; ?>"></div>
<?php endif; ?>
<?php endwhile; else : endif; ?>
</li>
Output should be like this:
<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>
<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>
<li>
<div class="slideitem"></div>
<div class="slideitem"></div>
<div class="slideitem"></div>
</li>
Something like this will give you the second code snippet you included
<li>
<?php
if (have_rows('klantslider')) {
$count = 0;
while (have_rows('klantslider')) {
if ($count > 0 && ($count % 3 == 0)) {
// after first itteration
// close li and open a new one every 3 rows
?>
</li>
<li>
<?php
}
the_row();
?>
<div class="slideitem"></div>
<?php
$count++;
}
} else {
}
?>
</li>
The code John posted for AvWijk is pretty much what I am looking for however I need insert a further break within the rows. So the output would be…
<div>// outer container for 4 figure elements
<div>//inner container for 2 of the 4 figure elements
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
<div>//inner container for 2 of the 4 figure elements
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
</div>
<div>// outer container for 4 figure elements
<div>//inner container for 2 of the 4 figure elements
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
<div>//inner container for 2 of the 4 figure elements
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
</div>
Many thanks in advance to any help offered!
something like this should work. Let me know if you have any questions about what’s happening.
<?php
if (have_rows('repeater')) {
$count = 0;
while (have_rows('repeater')) {
the_row();
if (($count % 4) == 0) {
?>
<div><!-- open outer container for 4 figure elements -->
<?php
}
if (($count % 2) == 0) {
?>
<div><!-- open inner container for 2 of the 4 figure elements-->
<?php
}
?><figure>Repeater Field Content</figure><?php
if (($count % 2) == 1) {
?>
</div><!-- close inner container for 2 of the 4 figure elements-->
<?php
}
if (($count % 4) == 3) {
?>
</div><!-- close outer container for 4 figure elements -->
<?php
}
$count++;
} // end while have rows
} // end if have rows
?>
Thanks for the swift reply John. The code example you posted work so long as there are exact multiples of 4 ‘Repeater Field Content’ blocks. Is it possible to modify the code so that the div elelments close where there are not 4, 8 or 12 and so on – so if (for example) there were only 5 blocks of ‘Repeater Field Content’ the divs are closed in the approriate place (as below)
<div><!–- outer container for 4 figure elements -–>
<div><!–- inner container for 2 of the 4 figure elements -–>
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
<div><!–- inner container for 2 of the 4 figure elements -–>
<figure>Repeater Field Content</figure>
<figure>Repeater Field Content</figure>
</div>
</div>
<div><!–- outer container for maximum of 4 figure elements -–>
<div><!–- inner container for up to 2 of the 4 figure elements -–>
<figure>Repeater Field Content</figure>
</div>
</div>
That’s something that I didn’t think about. I just used similar code on a site I am working on…. looks like I need to go back and make some changes. The only thing I can think to do in this case is to add flags to test if the divs are closed and if not to close them.
<?php
if (have_rows('repeater')) {
$count = 0;
$first_closed = true;
$second_closed = true;
while (have_rows('repeater')) {
the_row();
if (($count % 4) == 0) {
$first_closed = false;
?>
<div><!-- open outer container for 4 figure elements -->
<?php
}
if (($count % 2) == 0) {
$second_closed = false;
?>
<div><!-- open inner container for 2 of the 4 figure elements-->
<?php
}
?><figure>Repeater Field Content</figure><?php
if (($count % 2) == 1) {
$second_closed = true;
?>
</div><!-- close inner container for 2 of the 4 figure elements-->
<?php
}
if (($count % 4) == 3) {
$first_closed = true;
?>
</div><!-- close outer container for 4 figure elements -->
<?php
}
$count++;
} // end while have rows
} // end if have rows
if (!$second_closed) {
echo '</div>';
}
if (!$first_closed) {
echo '</div>';
}
?>
This works perfectly – thankyou for taking the time to help out.
