The new LayoutPart adds a lot of flexibility to building out pages in Orchard with the ability to add structure and elements to each page. If the already existing elements don’t suit your needs you can create a custom element and reuse that element where needed; although, there will be situations where a custom element does not fully suit your needs either. There are only so many alternates set up for elements, so one challenge we were faced with was figuring out how to reuse the same element and be able to apply different markup when needed.

Take these elements for example:

Here we have two very similar elements with completely different markup. Both elements have inputs for an image, link, icon and body text. Instead of building out a whole new element we simply added a new input to add a name of a shape to the element editor:

Here we add whatever name you would like as long as it conforms to the basic shape naming guidelines. When this field is filled out, instead of rendering the normal CallOut.cshtml Element, it is looking for a shape named HorizontalCallOut.cshtml. In order accomplish this we simply create a shape in the element view and render that shape at runtime.

As you can see here we check to see if a name has been supplied for a custom shape, and if that is the case we create a shape using that name and arguments from the current shape. In this case the shape will live in the root views folder (PathToYourTheme/Views/HorizontalCallOut.cshtml) of the theme and you can access the model the same way you would any other shape:

That’s it! Now we can specify any shape we want when rendering this element.