How to create your own custom pods

Pods are added to a page via the Block List Property Editor which is part of the core Umbraco CMS. Before adding your own custom pods to your uSkinned Site Builder it is important to get familiar with the Block List property editor. 

Creating your own pods can be split into 3 separate parts; Document Types, Partial Views and Data Types. Below we outline the process to follow when creating your own pods so that they work correctly with the uSkinned Site Builder.

Document Types

Each uSkinned Pod is made up of a Content Document Type and a Settings Document Type. It is recommended that you follow this structure when creating your own custom pods to maintain consistency for your website editors.

The fields that you add to your own custom pod are entirely up to you and will be completely dependent on the purpose of your pod.

We have created several Composition Document Types that can be reused with our pods. These can be found within the Umbraco CMS located at Settings (Section) > Document Types (Folder) > Compositions (Folder)

At a minimum, the following compositions should be added to your Pod Settings Document Type:

• Item Name (Settings) alias USN_CMP_ItemName: This composition provides a name field that is used for labelling your Block Pods when listed within the Block List property editor.
• Common Block (Settings) alias USN_CMP_CommonBlockSettings: This composition provides 'Custom classes' and 'Hide from website' field.

For the Footer Pod Settings Document Type the following composition should also be added:

• Pod Width (Settings) alias USN_CMP_PodWidthSettings: This composition controls the column width of a pod placed on the footer of your website. 

Partial Views

The partial view file which controls the HTML output of your pod should be placed in ~/Views/Partials/{YOURCODEBASE}/Blocks/

The name you give to this file should match the alias name you give to your Content Document Type. You can add your own prefix to the Document Type alias. The file name of your view will be matched to the text after the last underscore ( _ ) in your alias name.

Data Types

To allow your pod to be added to a page by a content editor, you need to add the pod to the relevant Block List Property Editor. All Block List Property Editors available with the uSkinned Site Builder can be found within the Umbraco CMS located at Settings (Section) > Data Types (Folder) > USN Data Types (Folder) > Block List (Folder).

There are several Block List Property Editors which controls the different places that pods can be added to your site. These are:

• USN Block Pods
• USN Block Footer Pods
• USN Block Pods (Reusable Excluded)

When you add a new block the following settings are recommended:

• Label: {{ !$settings.itemName || $settings.itemName == '' ? 'POD NAME HERE' : $settings.itemName}} {{$settings.hideFromWebsite == true ? '[HIDDEN]' : ''}}
• Overlay editor size: Medium
• Content model: Your Content Document Type
• Settings model: Your Settings Document Type
• Background color: #1B264F

For Footer Pods the following label should be used:

• Label: {{ !$settings.itemName || $settings.itemName == '' ? 'POD NAME HERE' : $settings.itemName}} {{ !$settings.desktopColumnWidth ? '' : '(Desktop: ' + $settings.desktopColumnWidth + ' | Tablet: ' + $settings.tabletColumnWidth + ')' }} {{$settings.hideFromWebsite == true ? '[HIDDEN]' : ''}}

That's you ready to go!

Your new custom pod will now be ready to be added to any page of your website.

 #h5yr