Strechable zones and selective visibility for widgets

We've recently implemented a couple of new features for the layout manager in ProsePoint Express: Stretchable zones and selectively hiding widgets. These two work hand in hand to make layouts even more flexible.

We found that having to create a new layout in order for minor modifications can easily result in too many layouts for a site. This poses a hassle when making future site-wide changes because then every layout has to be edited. Whilst it is great that you can have all sorts of layouts for different sections of your site, it's not so great having to maintain them all. Hence, as a general rule, it's recommended to keep the number of distinct layouts for your site at a minimum if possible.

Being able to selectively hide widgets is a step in this direction. You can configure a widget to be hidden depending on the page type (ie. story or channel), or depending on url. This allows you to merge similar layouts into one, reducing the number of layouts you use for your site.

Now for an example.

Let's pretend you use a two column 32/16 layout for most of your inner pages. The first column is the zone Row 1 Column A and has a width of 32 units. This is where your main content appears. The second column is the zone Row 1 Column B and has a width of 16 units. This is where the sidebar content appears.

At the moment, the only thing you have for the sidebar is a channel widget that displays stories from <default channel>. Let's pretend you want this widget to appear on the right for story pages, but you don't want it to appear for channel pages.

Previously, you'd have to have a layout for story pages where this widget is placed in the Row 1 Column B zone, and have a separate but similar layout for channel pages where this widget is in the Disabled zone (so it does not appear).

With selective widget visibility, you can use the same layout for both story and channel pages. The widget is placed in the Row 1 Column B zone as before, but is configured to be visible only for story pages.

Ta Da!

A single layout can now handle both story and channel pages and you can get rid of the other layout since you don't need it anymore.

Well ... not quite.

With this setup, the zones Row 1 Column A/Row 1 Column B are always 32/16 in width. Even if no widgets are visible in the sidebar, the main content area remains at 32 units (620 pixels). For channel pages, the sidebar would be a large blank space (since there are no visible widgets shown) ... which is probably not the intended effect.

This is where stretchable zones come in. Besides being able to be set to a number of units, the width of a zone can now also be set to Stretch to fit. A stretched zone expands to fill up the available space in it's 'row'.

In the example above, setting the width of Row 1 Column A to Stretch to fit would solve our problem. For story pages where the <default channel> widget in Row 1 Column B is visible, the zone Row 1 Column A would stretch to 32 units (ie. same width as before).

For channel pages where the <default channel> widget does not appear, the zone Row 1 Column B becomes zero width (since there is nothing visible within it). The zone Row 1 Column A then stretches to 48 units and covers the entire space.

Ta Da!

Problem solved.

One single layout can handle both story and channel pages. The main content area of Row 1 Column A stretches accordingly depending on the width of its neighbour(s). It expands to fill up available space so there isn't any blank space showing.

You can use this same technique for other situations where the appearance of a layout is to be affected depending if widgets are visible or hidden.

With selective visibility for widgets and stretchable zones, layouts for ProsePoint Express are a bit more intelligent and flexible, and less work to maintain.

Thank you for reading.