CODEWITHSUNDEEP
phploops
Slip
Slip

Reputation: 949

Bootstrap columns in loop with php

I'm trying to show my news block with bootstrap4 as

enter image description here

<div class="col-md-3">
    <div class="card mb-4">
      <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>

    <div class="card mb-4">
          <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
</div>

<div class="col-md-3">
    <div class="card mb-4">
        <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
    <div class="card mb-4">
         <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
    </div>
</div>

 <div class="col-md-6">
  <div class="card mb-big">
        <a href="$arItem["DETAIL_PAGE_URL"]"><img src="$arItem["DETAIL_PICTURE"]["SRC"]"</a>
  </div>     
</div>

I have an array with results of database query in

$arResult["ITEMS"]

I want to do this with loop by

<? foreach ($arResult["ITEMS"] as $arItem): ?>   

 <?endforeach?>

I know i need to use something like 

$i=0
  if (i===2){ 
   } else if ($k === 4) {
    } else {}
  $i++;

but how can i remove col-md-3 from loop. 

<?php
 $i=0
  foreach ($arResult["ITEMS"] as $arItem): ?>
    <div class="col-md-3">
     <div class="card mb-4"></div>
    </div>

  if (i===2){ 
    <div class="col-md-3">
     <div class="card mb-4"></div>
    </div>
   } 
   if (i===4){ 
    <div class="col-md-6">
     <div class="card mb-4"></div>
    </div>
   }

I'm afraid I'm a little confused. How to show it in one loop?

Upvotes: 1

Views: 101

Answers (1)

Syscall
Syscall

Reputation: 19780

Assuming you have 5 elements in the array, you could use %2 (modulo) to write <div class="col-md-3"> and check if it's the last element to change col-md-3 to col-md-6 and mb-4 to mb-big:

if (!empty($arResult["ITEMS"])) {

    foreach ($arResult["ITEMS"] as $k => $item) {

        $is_last = $k == count($arResult["ITEMS"]) - 1;

        if ($k%2 == 0) {
            echo '<div class="'.($is_last?'col-md-6':'col-md-3').'">';
        }

        echo'  <div class="card '.($is_last?'mb-big':'mb-4').'"></div>';

        if ($k%2 == 1) echo '</div>';
    }

    echo '</div>';
}

Will output (reformatted):

<div class="col-md-3">
  <div class="card mb-4"></div>
  <div class="card mb-4"></div>
</div>
<div class="col-md-3">
  <div class="card mb-4"></div>
  <div class="card mb-4"></div>
</div>
<div class="col-md-6">
  <div class="card mb-big"></div>
</div>

Upvotes: 1

Related Questions