How to reverse array data? - php

Question

I want array 1,3,5,7,9 layout will be reverse from array 0,2,4,6,8,10
for example 1st row layout- image on left and description on righ, the 2nd row layout- image on right and description on left, and continuously.
This is my function.php code
<?php
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div><?php
} ?>
CSS code:
.row{
display: flex;
margin-left: -10px;
margin-right: -10px;
margin-bottom: 15px;
}
.row .col {
flex: 1;
padding-right: 10px;
padding-left: 10px;
}
And the result still like this
my expectation will be like this:

Answer 1

We just need to change code in function.php as below.
<?php
$i=0;
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
if($i % 2){ ?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
</div>
</div>
<?php }
$i++;
}
?>
Hope now you got all things and let me know still any help need.

Answer 2

I assume you want the array_diff of [0,2,4,6,8,10].
Array_diff returns what is missing in the array, if we use an range() to create the reference array then it would look like:
$yourarray = [0,2,4,6,8,10];
$diff = array_diff(range(min($yourarray), max($yourarray)), $yourarray);
//[1,3,5,7,9]
https://3v4l.org/6QY3r

Answer 3

you need to add following css to achieve your desired output:
when odd .product-cat div found apply order: 1; to image container(.product-cat-image) and order: 2; to detail container(.product-cat-details)
when even .product-cat div found apply order: 2; to image container(.product-cat-image) and order: 1; to detail container(.product-cat-details)
.product-cat:nth-child(odd) .product-cat-image{
-webkit-order: 1;
order: 1;
}
.product-cat:nth-child(odd) .product-cat-details{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-image{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-details{
-webkit-order: 1;
order: 1;
}