2

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:

enter image description here

(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?

2 Answers 2

2

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/

2
  • That is also the basic idea I got. But what about pictures? The main picture of the bigger blog should be rendered differently as the first one. (I write that into my post above)
    – lumio
    Apr 12, 2013 at 7:10
  • We can style the size of the images with a bit more css - I've updated my answer and the jsfiddle to show this...
    – Felix Eve
    Apr 12, 2013 at 8:42
0

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);
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.