'Pinterest' template

[schacke]

Is it possible to change the div template for lists to look a little like Pinterest? I'm making a picture gallery and the paintings have different heights, so I want to make a mosaic instead of fixed rows. Maybe somebody already made this?

 

[cheesegrits]

I've not seen anything like that with the div template, although I'm sure it's possible. But you'd probably need some fairly extensive knowledge of CSS. I've certainly never tried creating a Pinterest style interlocking mosaic, and have no idea how I would go about it. I'd probably start by looking at their CSS / HTML, and see how much of it is done in pure CSS, and how much of it is done in actual layout, where they might do size calculations on the server side during page build. Or even in JavaScript.

-- hugh

 

[schacke]

It sounds like it's out of my league The closest I've come to it, is if I remove the row class "row-fluid" from the div right under "groupdataMsg". But I can't figure out how to get rid of the div. Without the <div class="row-fluid"> for each row, I think I could do the rest width CSS. But I can't find it in the template...

 

[troester]

The div template is doing

    $items = array();
    foreach ($group as $this->_row) :
        $items[] = $this->loadTemplate('row');
    endforeach;
    echo FabrikHelperHTML::bootstrapGrid($items, $columns, 'well', true);

which is creating the grid.

So in your-div (always create a copy, Fabrik's div will be overriden with the next update) you can do something like

    foreach ($group as $this->_row) :
         <div class="myclass">
                   echo $this->loadTemplate('row');
         </div>
    endforeach;

 

[schacke]

Thanks for the try! I tried to replace the first code with se second but the page went blank. (The <div>'s show an syntax error in DreamWeaver)

 

[troester]

Ah, yes. Must be echo "<div..."; (or close/open php)

    foreach ($group as $this->_row) :
        echo '<div class="myclass">';
        echo $this->loadTemplate('row');
        echo '</div>';
    endforeach;

 

[cheesegrits]

Well, you'd need to end and re-start the PHP tags around the HTML output.

    foreach ($group as $this->_row) :
        ?> <div class="myclass"> <?php
                  echo $this->loadTemplate('row');
        ?> </div> <?php
    endforeach;

 

[schacke]

YES! So far so good. Thank you both Now I just have to play around with the css to make it a mosaic.