Panels Extra Layouts

Extra Layouts for the Panels Module

Panels is one of the most, if not the most, powerful modules for laying out a page in Drupal.

Panels builds on CTools which is a swiss army knife for doing all sorts of elaborated things in Drupal without having to hack the drupal core.

The Bottom Line

This module provides a set of fixed and adaptive layouts for Panels.

Fixed layouts are those that have a fixed geometry. Meaning that no matter whatever is the content of each pane it will always use the defined layout.

Adaptive layouts are layouts that adapt to the content. Meaning that if a pane is empty then the pane that has content closer uses up that space. This idea is stolen from the Panels Three Four project. This idea has been developed so that the behaviour is consistent and allows for the creation of 153664 different layouts from a single template.

Note that adaptive layouts differ from the the flexible layouts created via the Panels UI. Adaptive layouts are basically fixed layouts that adapt when rendering to the way the content is distributed throughout the various regions. While flexible layouts are layouts that are built via the UI in which the template is generated on the fly when using the Panels layout designer.

This module provides 5 two column layouts, 4 three column layouts and 2 adaptive layouts.

Installation

1. Download and install the module as usual.

2. Now when defining a new variant or redefining the layout of an
   existing one you should see the new layouts in the dropdown, under
   the Columns: 2, Columns: 3 and a new item Adaptive.

3. Select one of the above layouts.

4. Proceed to add content to your liking.

5. Done.

Adaptive layouts

Adaptive layouts are sort of a big deal. This module provides the following adaptive layouts:

1. Adaptive 3x3 - 4x4

   It's a grid (matrix) with 25 elements. The top three rows are have 3 columns and the bottom 4 rows have 4 columns. Hence 25 (3x3 + 4x4) elements.

   

   In each row any region/pane expands to the right until it finds another occupied region/pane. If the pane region is on the most to the right pane/region in a given column it wraps around, i.e., it uses the available space starting from the left. Consider an example where we use the center and right regions in row with 3 elements the resulting layout will be 33/66.

   On a 3 column row the 4 possible layouts are:

   100%, 33/66%, 66/33% and 33/33/33%

   Since there are 3 rows with 3 columns we have 4x4x4 = 64 possible layouts on the 3x3 submatrix of the template.

   On a 4 column row the 7 possible layouts are:

   100%, 25/75%, 75/25%, 50/50%, 25/50/25%, 50/25/25%, 25/25/50% and 25/25/25/25%.

   There are 4 rows with 4 columns hence 7x7x7x7 = 2401 possible layouts on the 4x4 submatrix of the template.

2. Adaptive 4x4 - 3x3

   

   This is the converse of the above layout, i.e., the 4x4 submatrix is on top and the 3x3 submatrix is below. The reasoning behind the architechture and usage is the same. Is just that now we have top part of the template on fourths the bottom part in thirds.

Fixed layouts

Two columns

1. 63% 37% stacked

   

2. 77% 23% stacked

   

3. Bricks 25% 75% stacked

   

4. Bricks 25% 75% stacked

   

5. 70% 30% stacked

   

6. 30% 70% stacked

   

Three columns

1. 42% 29% 29% stacked

   

2. 44% 37% 19% stacked

   

3. 44% 35% 21% stacked

   

4. 15% 70% 15% stacked

   

5. 7% 62% 31%

   

Using this module as an example and contributing back

You can use this module as an example of a CTools layout plugin. Imagine that we can create a central repository of layout plugins. Albeit being true that creating a layout plugin is not terribly hard, time can be saved if there's a plethora of available layouts to choose from.

Please contribute back to this project by providing your layouts. Place a pull request.