Layout Selector Module

More detailed documentation and tutorial is on its way; but until then here are some quick instructions:

Getting the Module

You can download it from the Orchard Gallery page ... or just search for "Layout Selector" in the Modules > Gallery tab in the Orchard Dashboard.

Adding to a Content Type

To use the "Layout Selector" you have to add the Part to any type of content for which you want to switch layouts.

  1. Go to Dashboard
  2. Go to Content > Content Types
  3. Edit or create a type (for instance, Page)
  4. Add the "Layout Selector" part. If you're creating a new type, you'll also need (at the very least) Common and Routable. Menu is preferable so you can access the item.
  5. In the Dashboard menu, under "New", click your Content Type's name. On the editor screen you will see there is now a drop-down list for "Layout". Unforunately it only contains "Default" which will just use the standard Layout.cshtml

Specifying Layout Names

I plan to update this system a bit so you can set your layout names when you add the part, instead of having to code them in your template. But for now, here's how you do it:

  1. In your theme or module, add a reference to the "Downplay.Orchard.LayoutSelector" project.
  2. Create a class in ~/Services of your theme or module, called LayoutAlternatesProvider.cs. It should look like this:
    public class LayoutAlternatesProvider : ILayoutAlternatesProvider
    {
        public IEnumerable<string> GetLayouts()
        {
            yield return "Foo";
            yield return "Bar";
        }
    }
  3. Now, when you edit your content item you should see that "Foo" and "Bar" have been added to the Layout drop-down list.

Creating Layout Files

Continuing the above example; if you've selected "Foo" for your Layout name and published your item, the Orchard engine will now be additionally looking for a file in ~/Views called "Layout-Foo.cshtml". So go ahead and copy your existing Layout.cshtml (or one from another Theme) and name the new file this way. Make whatever adjustments you need and it should now be displaying on your content item.

Plans for Next Version

I want to make an update quite soon just to make this module a bit more flexible and generally useful:

  • Allow overriding any shape, not just Layout
  • Allow a list of layout names to be entered whenever you add the Part. So different content types can have different layout options, and you don't need to write code to do it (designer friendly!)
  • It'd be nice to automatically determine the available overrides for a given shape
  • Possibly implement as a Field instead of a Part; so multiple types of override are available per content

However, this module performs a very simple task quite effectively and I don't want to overcomplicate things :)

Thanks

Thanks especially to Bertrand Le Roy for his article on switching the layout in Orchard as it was the basis for this module's implementation. But thanks also to all the developers and contributors involved in Orchard as I learnt a lot from a wide variety of sources!