Module to view node in a grid layout with the ability to quickly change the reference

Question

I'm looking for a module which allows me to have a grid layout presenting nodes in a certain view mode (like teaser or even a module own one). In the end it should look something like this:

(The picture shows some node references. I didn't prepend all titles, but all blocks should be rendered the same way, except the first one, which should be rendered bigger)

Now I could do this with either views or panels, but I want to add as many blocks as I want and the first one should be rendered differently as the rest. Note that there are pictures in the node which should also be shown in different size.

I already tried it with Mini Panels, but the problem with Mini Panels is, that I can only append one node - and it is a little tricky for end users who should be able to change the node reference quickly.

Is there a good module which comes with such a solution?

Answer 1

You don't really need a module - just some css. If you are using the views module to create your html then something like this should suffice:

.view-content .views-row {
    display: inline-block;
    margin: 0 20px 10px 0;
    vertical-align: top;
    width: 207px;
    font-size: 0.8em;
}
.view-content .views-row img {
    width: 170px;
}
.view-content .views-row-1 {
    font-size: 1em;
    width: 439px;
}
.view-content .views-row-1 img {
    width: 350px;
}

Here is an example in jsfiddle: http://jsfiddle.net/42LHW/3/

Answer 2

Maybe someone is interested in my solution:

I'm using DraggableViews to have some sort of Drag'n'Drop feeling (it's not exactly what I wanted, but good enough. The problem with the first picture was not as hard as I thought. I simply changed the field-template of the view (I'm using views-view-field--front-view--field-images.tpl.php) checking if it's the first element, or not:

<?php
$image = $row->field_field_images[0]['rendered'];
if ($view->row_index == 0):
  $image['#image_style'] = 'primary';
endif;

print render($image);
?>