Context Groups

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.

 

 

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«.

 

 

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.

 

 

 

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