Change HTML for odd & even items in a foreach loop - php

Question

My PHP isn't great!
I have some metaboxes in a wordpress website that displays a column type layout. I can output the metabox content as follows:
<?php
// Group ID
$columns_values = rwmb_meta( 'columns_solutions' );
if ( ! empty( $columns_values ) ) : ?>
<section class="columns">
<?php foreach ( $columns_values as $columns_value ) {
// Grab the image
$columns_imgs = isset( $columns_value['_rtl_column_solutions_image'] ) ? $columns_value['_rtl_column_solutions_image'] : array();
foreach ( $columns_imgs as $columns_img ) {
// Set each image size for the responsive background
$column_image_lg = RWMB_Image_Field::file_info( $columns_img, array( 'size' => 'column-lg' ) );
$column_image_md = RWMB_Image_Field::file_info( $columns_img, array( 'size' => 'column-md' ) );
$column_image_sm = RWMB_Image_Field::file_info( $columns_img, array( 'size' => 'column-sm' ) );
$column_image_xs = RWMB_Image_Field::file_info( $columns_img, array( 'size' => 'column-xs' ) );
}
// Grab the title, oversized text and general text
$column_title = isset( $columns_value['_rtl_columns_title'] ) ? $columns_value['_rtl_columns_title'] : array();
$column_oversized = isset( $columns_value['_rtl_columns_oversized'] ) ? $columns_value['_rtl_columns_oversized'] : array();
$column_general_txt = isset( $columns_value['_rtl_columns_general_text'] ) ? $columns_value['_rtl_columns_general_text'] : array();
?>
<div class="columns-wrapper">
<div class="column">
<?php if(!empty($column_title)) { ?>
<div class="section-title">
<h2>
<?php echo $column_title; ?>
</h2>
</div>
<!-- /.section-title -->
<?php } ?>
<?php if(!empty($column_oversized)) { ?>
<div class="oversized">
<?php echo $column_oversized; ?>
</div>
<!-- /.oversized -->
<?php } ?>
<?php if(!empty($column_general_txt)) { ?>
<?php echo wpautop($column_general_txt); ?>
<?php } ?>
</div>
<!-- /.column -->
<div class="column">
<div class="image min-height cover bg-responsive" style="background-image: url(<?php echo LAZY_IMG; ?>);"
data-lg="<?php echo $column_image_lg['url']; ?>"
data-md="<?php echo $column_image_md['url']; ?>"
data-sm="<?php echo $column_image_sm['url']; ?>"
data-xs="<?php echo $column_image_xs['url']; ?>">
</div>
<!-- /.image -->
</div>
<!-- /.column -->
</div>
<!-- /.column-wrapper -->
<?php } ?>
</section>
<!-- /.columns -->
<?php endif; ?>
Output as below:
This is a clonable meta group, I would like to be able to swap the content and the image (left & right) with each odd and even foreach loop/array.

Answer 1

I feel so stupid, all I needed was to count the posts and output alternate html.
I wrapped my code above in this:
<?php $counter = "";
foreach ( $columns_values as $columns_value ) {
$counter +=1;
// all my var stuff here
?>
<?php if($counter == 1) { ?>
<div class="columns-wrapper odd">
<!-- HTML here for the first loop -->
</div>
<?php }
// If the second item in the loop
elseif($counter == 2) {
// Reset the counter
$counter = 0;
?>
<div class="columns-wrapper even">
<!-- Other HTML here for the second loop -->
</div>
<?php } //end the elseif $counter ?>
<?php } //end the foreach stuff ?>