Bootstrap grid with php

Question

I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:

Here is the html/php:

  <?php foreach (loop('items') as $item): ?>
                <div class="container">
                    <div class="item">
                        <div class="row">
                            <!-- attempt at 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 the 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;
}

Hi @Mystika---sure. Here it is: [https://jsfiddle.net/hcgriggs/qx9smztm/](https://jsfiddle.net/hcgriggs/qx9smztm/). Though, I'm not sure if I've added it correctly. Please let me know if I need to upload more code. — hcgriggs, Jan 21 '16 at 01:30

score 2 · Answer 1 · answered Jan 21 '16 at 00:55

2

I'll give you a pseudo method of achieving this, harnessing array_chunk().

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

Example

answered Jan 21 '16 at 00:55

Darren

13,050
4
41
79

Thanks, Darren! So, I've tried this but it has hidden all of the divs---i.e., when I refreshed only the header and footer content were visible. Do you have an idea of what I could've done wrong? – hcgriggs Jan 21 '16 at 01:17
You'll need to include the other classes as you need, so throw in the `.item`/etc inside the `col-md-3...` divs. – Darren Jan 21 '16 at 01:19
hm.... still not working. I've added a fiddle here if that helps---[https://jsfiddle.net/hcgriggs/qx9smztm/](https://jsfiddle.net/hcgriggs/qx9smztm/) – hcgriggs Jan 21 '16 at 01:33

Bootstrap grid with php

1 Answers1