I'm trying to build a custom responsive theme using Zurb Foundation. I'm also using Views to render a grid of nodes, let's call them Events, that are each wrapped in Foundation classes to lay them out in a responsive grid.
The Problem:
The Foundation classes I need to use need to change based on the visible regions on the page.
For example, if the sidebar_first region is showing, each item in the events list needs to have the classes: columns large-4 medium-6 small-6
.
If the sidebar is not rendered, each item needs the classes: columns large-3 medium-4 small-6
.
I cannot find a way to evaluate which regions will be rendered at the time the View is being built. I'm currently using template_preprocess_views_view_unformatted()
to add the Foundation classes to the Views template, however this hook is being fired well before template_preprocess_page()
for example, where I might be able to evaluate the visible regions and set a variable with information about the sidebar.
See the below pseudo code for the ideal structure when the sidebar is rendered:
<div class="row">
<div class="region-content columns large-9">
<div class="row">
<div class="views-row columns large-4">...</div>
<div class="views-row columns large-4">...</div>
<div class="views-row columns large-4">...</div>
...
</div>
</div>
<div class="region-sidebar-first columns large-3">...</div>
</div>
See the below pseudo code for the ideal structure when the sidebar is not rendered:
<div class="row">
<div class="region-content columns large-12">
<div class="row">
<div class="views-row columns large-3">...</div>
<div class="views-row columns large-3">...</div>
<div class="views-row columns large-3">...</div>
<div class="views-row columns large-3">...</div>
...
</div>
</div>
</div>
Ideally, without the sidebar rendered the events will be 4 across spanning all 12 columns. With the sidebar rendered they will be 3 across spanning only 9 columns, as the above classes in the pseudo code imply.