How to do a front page two column teaser layout for drupal 7?

Posted by doloreel on January 18, 2013 at 2:01am

Hey guys. Beginner here. Hope you can help.

I'm about to go and replicate this front page

I was wondering what modules/strategies/practices i would need to get it done. I posted here lightly talking about this topic a few weeks ago and i was pointed in the direction of Views. Albeit i don't fully understand Views, i cant get my head around using views to make this two column teaser layout.

Cheers

Comments

In this case, Views should

Posted by Keyz on January 18, 2013 at 2:14am

In this case, Views should provide the listing of teasers as a single column, then CSS should do all the rest.

Views will output its own HTML with classes on each item such as "views-row". This would equate to the "articleTitleLeftWrap" and "articleTitleRightWrap" wrapping divs in the current code... however I suggest abandoning the left/right approach and just do something like:

#your-view-id .views-row {
  float: left;
  width: 50%;
}

Then the first teaser will fill 50% of the row's space, and the next teaser will fill the remaining 50% of space, creating the second column. The third teaser will be "out of space" on that row, so will act just like the first teaser and show on the left column, etc etc. You may have to adjust the percentages to get the desired spacing between the columns, but that's the general idea. As in the current code, you'll want to set a maximum height on views-row so that everything stays aligned.

-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides

Thanks for the timely

Posted by doloreel on January 18, 2013 at 2:29am

Thanks for the timely response!

So Views isn't just for tabulating values, it can organise node teasers as well? hm.
And thanks as well for the CSS tips. Very helpful indeed.

Cheers