html - Bootstrap grid with php -


i'm making theme omeka site in calling item , various components using php. each item in own div, , have attempted create tile-like grid bootstrap. however, divs line in single vertical column. how make divs line in row of 3 or four? i'm stumped. works fine without php (with multiple rows , manually added content) won't work otherwise. this looks right now. , want divs like:

enter image description here

here html/php:

  <?php foreach (loop('items') $item): ?>                 <div class="container">                     <div class="item">                         <div class="row">                             <!-- attempt @ square grid -->                              <div class="col-md-3 col-sm-4 col-xs-6 item-item">                                  <div class="dummy"></div>                                      <div class="thumbnail purple">                                  image:  <?php $image = $item->files; ?>                                 <?php if ($image) {                                         echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');                                     } else {                                         echo link_to_item('<div style="background-image: url(' . img('defaultimage@2x.jpg') . ');" class="img"></div>');                                     }                                 ?>                                    title: <?php echo link_to_item(metadata('item', array('dublin core', 'title')), array('class'=>'permalink')); ?><br>                                     creator: <?php echo metadata('item', array('dublin core', 'creator')); ?><br>                                     subject: <?php echo metadata('item', array('dublin core', 'subject')); ?><br>                                     description: <?php echo metadata('item', array('dublin core', 'description'), array('snippet'=>150)); ?><br>                                     <br>                                 </div>                            </div>                        </div>                    </div><!-- end grid -->  

and css:

.dummy {     margin-top: 100%; } .thumbnail {     position: absolute;     top: 15px;     bottom: 0;     left: 15px;     right: 0;     text-align:center;     padding-top:calc(50% - 30px); }  .item-item {      border: solid black 5px; } 

i'll give pseudo method of achieving this, harnessing array_chunk().

$chunks = array_chunk($array, 4); foreach($chunks $group): ?>     <div class="row">         <?php foreach($group $element): ?>             <div class="col-md-3 col-sm-4 col-xs-6 item-item">                 <?php // php stuff...?>             </div>         <?php endforeach; ?>     </div> <?php endforeach; ?> 

example


Comments

Popular posts from this blog

sql - VB.NET Operand type clash: date is incompatible with int error -

SVG stroke-linecap doesn't work for circles in Firefox? -

python - TypeError: Scalar value for argument 'color' is not numeric in openCV -