2

How do I achieve the following in Drupal:

<div class="row">
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
</div>

I can use the "Block Class" module to assign the grid system classes to the block, however this does not allow me reuse blocks in another layout (changing the grid system classes).

Im also limited to where I can put these blocks. At the moment i have a specific region setup that is wrapped in the "row" class. This prevents me for having a few different rows and from placing the blocks anywhere...

<div class="row">
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
</div>
<div class="row">
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
    <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div>
</div>

Basically I need to:

  1. Add grid system classes to blocks
  2. Reuse blocks in a different grid system class configuration
  3. Freedom to define rows of blocks and assign them to any region, not just one that is wrapped in a single "row" class.

Any help would be much appreciated, at the moment I have to style each individual block to work responsively and I know that there must be a better way of doing this.

Thanks

  • Why aren't you using a theme with built in grid like Omega? – rreiss Sep 12 '13 at 22:26
  • I'd still have the same problem right? – endaquigley Sep 12 '13 at 22:28
  • If I correctly understood - you want a responsive theme. Omega has these capabilities out of the box, for example; it also helps building the layout, change grid between break points (using media queries) and more. Did I misunderstood you? – rreiss Sep 12 '13 at 22:47
  • Yeah, I have no problem making the site responsive, I want want to reuse the same responsive classes (be it the grid system that omega provides or bootstrap) on custom blocks without having to create hundreds of different regions. – endaquigley Sep 12 '13 at 22:55
6

We primarily build our sites using Bootstrap with this same technique, so here are 3 modules that will make your life a lot easier.

Block Class - add classes to blocks.

Block Group and/or Region Class - group blocks together in faux regions, add classes to regions.

Blocker - places blocks on specific pages in different regions, alternative to using the core block placement system. Really useful for site building and putting blocks on basic pages.

Blocker Interface

  • Wow, thanks... this might be exactly what I need, going to give them a go tomorrow and see how it goes. I have "Context" installed already, I'm guessing that does the same job as "Blocker"? – endaquigley Sep 12 '13 at 22:52
  • Yes, but more eloquently and without you pulling your hair out. I attached a screenshot above, but you can see that on any node, all the regions show up and you can place a block anywhere, with added classes. Under "Secondary", you can see there's a menu block placed by the block system, so it's considered global. – kyletaylored Sep 12 '13 at 22:58
  • 1
    Might be a bit too late in this project to switch to Blocker. This was my first Drupal site so its been quite a learning process... will defo use it in the next project I work on. Thanks again for the help :) – endaquigley Sep 12 '13 at 23:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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