WTF are Gpanels?
- 6 Comments
- Latest Comment
Gpanels are drop in multi-column snippets for displaying blocks in vertical columns, such as 2 columns, 3 columns or 4 columns. Gpanels are an optional extra that come with the Genesis starter theme.
Gpanels are fluid, meaning they stretch and compress with the page width because they are built with percentages, this is similar to how regular Panels work although the layout method is quite totally different.
The Gpanels come in four delicious flavours…
- 2 column x 50%
- 2 column x 50% + another 2 col 50% nested in the left pane
- 3 Column x 33%
- 4 column x 25%
All the layout CSS is included in Genesis core layout.css so you just need to drop a snippet into page.tpl.php or node.tpl.php and, just like magic, they work.
The snippets can be found in genesis/genesis/gpanels and the idea is that you copy/paste them to your page or node template suggestions. I can see lots of cool use cases such as showing 3 separate Node queues at the top of your homepage and then perhaps again at the bottom of the page when viewing a node (something a news site might do). With Gpanels that would be utterly trivial to achieve.
These are not mini-panels as we know and love, they are only for layout, however sometimes that’s all you want and you don’t need context or the other rockingly cool aspects of the Panels module.
I’ve documented Gpanels in the Genesis documentation.
Ok, so here’s something pretty cool. If you choose any b variant layout (a percentage based layout, see Setting up your layout) the Gpanels will match the width of the sidebars no matter what the overall width - because they are both percentage based and cunningly designed to match.
Here is a screenshot— this is the genesis-1b layout (standard 3 col, percentage width columns) with the overall page width is set to 980px, which will give columns of around 240px wide. The screenshot shows an example of each of the four Gpanels, with blocks active in each region. I have added some background colors to each region to highlight the layout.
Cool eh?
Drupal Version:
Drupal Development:
Drupal:
Technology:
Social Tags:
Comments
#2 Looks interesting. I’m
Looks interesting. I’m intrigued with what you’re doing with Genesis. Looking forward to learning more about it.
#3 Really really interesting
Really really interesting development. And add a panel in the content field and we’re settled forever! :-)
Especially in grid design sites this can be a really usefull tool. I would like to see more themes adapt very dynamic block regions like this genesis theme.
#5 How do you use them in a non-genesis theme
I see lots of mention of being able to use them in other themes, but cant figure out how. I would appreciate any guidance.
#1 Yeah, looks very very useful.
Yeah, looks very very useful. I will definitely check out the Genesis theme and am pretty sure that I’ll use it as the base theme for a new site. Thanks for sharing!