Feb 28 2017
Feb 28

When starting a new Drupal project, you have to decide, how you will handle a block layout. If you can’t achieve the desired layout with Drupal core block layout, you will probably choose Context or Panels module for handling a layout. If you chose Context over Panels, this blog post will help you build more complex layouts with context.

Almost anyone, who used Context module, had a case, where they wanted to place two, three or more blocks next to each other and maybe one block below as it is shown in the picture bellow.


Context groups 1


You probably managed that by creating a new region for the top three blocks or maybe you created a new custom block, which was built with those three block inside, and then added this custom block into context.

The module Context groups solves this problem by creating groups to your reaction in context. It creates a wrapper for your blocks. Moreover, you can also add classes to the groups, to make styling on front-end easier. Let’s see the module in action.

First, let’s download and enable the module. On the configuration page of your context, you should now see Add group button next to »Place block«.

Context groups 2

When you click on it, a popup will appear, where you can enter a group name, classes and select a region, where you want to place your group. With the click on the “Add group” button, the group should be displayed in selected region.

Context groups 3Context groups 4

With adding multiple groups you can create a completely customised layout to suit your needs and design. You can even nest the group, enabling you to have unlimited ways to build complex layouts.

Since groups are rendered through theme function there is also a possibility to change the way context groups are rendered with overriding the template. Just use one of the next template suggestions:

• context-groups.html.twig
•       context-groups--{context_id}.html.twig
•       context-groups--{context_group_name}.html.twig
•       context-groups--{context_id}--{context_group_name}.html.twig

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web