Orchard Harvest 2015 – Layouts

Sipke made a new demo of Orchard Layouts, which have in my opinion dethroned workflows (and taxonomies before that) as Orchard’s crown jewel. He started by showing simple layout elements such as HTML and Markdown, then quickly switched into Orchardy extension and reusability mode.

He started from a simple Bootstrap theme, then added a single Razor file in an Elements directory to add a jumbotron snippet element.

Then he showed how you can create a preconfigured element from an existing element, and re-use that throughout your site’s layouts.

He also showed how to save a layout as a reusable master layout. He put a logo, and two columns in there. He used that to show the new widget harvester that enables one to drag and drop widgets onto layouts. Another new feature is element visibility rules that can be used to hide and show elements based on custom rules, much like what we already have on widget layers.

Layouts come with a default grid system, so they can work without specific theme support, but if you’re using Bootstrap, it’s useful to be able to replace that default grid with the Bootstrap grid. Sipke showed how to do that by overriding element templates in the theme.

It’s also possible to re-use content parts as elements in layouts. You’ll need to suppress the part’s shape in placement.info to do that without having the part show twice.

With the shape element, you can add any shape to your layouts, which works especially well in conjunction with the Razor shape editor feature.

Sipke then built a configurable custom element that shows an inbox badge. This is done by deriving from Element, and implementing an element driver that uses the forms API to create the editor. He then wrapped his new element, using the element wrapper part, to create a new widget type that re-uses the element. This bridges the gap between elements and content parts in the case where you want to only implement the element, but still be able to use it as a part. Another place where you can now re-use elements is tokens: there is now an element wrapper token that you can use to render an element in place wherever tokens are accepted.

To conclude, Sipke mentioned the future of the layouts feature. He mentioned how we might want to unify widgets and layouts, but currently we’re missing the equivalent of layers in the element world. Sipke’s company, IDeliverable, is also working on a new version of the layout editor, Ayos, that improves on the current one by doing away with grid and row elements, making for a much simpler editing experience. The new editor is also CMS-independent, and could be reused on other applications.

UPDATE: video is online.