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:
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; ?>
Comments
Post a Comment