Layouts and Includelets

The layout functionality of the CMS controls the structure of your pages. It allows you to select from a variety of different layouts for adding text and rich content to your website.

For example you can choose between a single large area for content, or a 2 column layout. The layout CMS tab also allows to add Includelets to your page. Each Includelet adds a piece of content to the page, in the location and order specified on this layout page.

The Layout CMS Tab

This diagram shows the layout of a typical website homepage. It is a two column layout (a Content column and a Right column). You can choose a different number of columns using the Change button (1 in diagram). The green areas are called Slots (2). The Slots contain Includelets (3).

In this example there are four Includelets on the page. They are:

  • Content item - this displays the main WYSIWYG page contents for the current page. If you delete this Includelet then you won't see your WYSIWYG's content on the page!
  • Contact information - this displays a location map and contact details as given when you applied for your website, and can be changed in the Website Settings tab of the admin pages.
  • News - this shows a the titles and subtitles of the most recent news articles added to your website.
  • Community calendar - this shows the next few upcoming events from the Calendar application.

You can drag Includelets around to change their order, or to move them between different page areas.

Note that you can't change the layout of the published revision of a page. In this case you will see a link, Create new revision to make changes, which will make a new revision which you can edit, preview, and publish.

Slots (2)

These are the green areas in which Includelets are placed. You can drag Includelets between Slots, or within the same Slot to rearrange them. On the right are two special Slots: Scratch and Trash. These two slots are not shown on public pages. Scratch is available to store Includelets that you have configured and would like to store but not display, and all Includelets placed here will be stored permanently. The Trash slot should be used to remove an Includelet from your page. When you navigate away from the Layout subtab any Includelets in the Trash slot will be permanently deleted.

Includelets (3)

Includelets are automatically generated dynamic snippets of information displayed on a content page. They can be used to help keep a Voice website active and interesting while often requiring no maintenance from the administrator.

Includelets can be configured to inherit to sub-pages. When enabled, this means that the Includelet not only appears on the current page, but any other pages below it in the Site Map. If you configure an includlet on your homepage to inherit, then it will appear on all CMS pages of your website.

When viewing the Layout sub-tab any Includelets displayed in grey cannot be modified, while Includelets that are white are available for editing. An Includelet can be grey for two reasons:

  1. The latest version of the current page is published in which case all Includelets are unavailable for editing. Click the link Create new revision to make changes to modify the Includelets.
  2. The Includelet is inherited from a page higher in the Site Map. To edid this you need to go up the tree of pages in the Site Map to find where the Includelet is inherited from, and edit it there.

Adding Includelets

To add an Includelet click the Add Includelet button in the slot you wish to add it. You will be presented with a list of available Includelets, which you select by clicking on them.

The available Includelets are:

  • Background Image Begin/End - use this to create a block of colour, or background image, around a section of content. You need to place both a Begin and End includelet in the same column, and all Includelets between the Begin and End will have the selected background.
  • Child List - This creates a clickable bullet list of the content pages in the site map below the page you are currently editing.
  • Community calendar - This shows upcoming events from your calendar, if you have enabled the calendar application
  • Community forums - This Includelet shows you a synopsis of forums in your website. It won't do anything if you don't have any forums to show.
  • Community information - This Includelet can automatically place variables from your website information data such as address and contact details within a page. The contents on this Includelet will automatically be updated when you update your website details in the Site Settings tab.
  • Community surveys - This Includelet shows you a synopsis of surveys in your website. It won't do anything if you don't have any surveys to show.
  • Contact email- This allows you to create your own customised "contact us" pages. You can create as many as you want for different uses. Options:
    • Email address - the email address that comments will be emailed to when the form is filled in, this is not visible to the people filling in the form.
    • Email subject - the subject line of the email that is sent (the user who fills in the form never sees this - only the receiver of the emails)
  • Contact information - displays your contact details from the Website Settings, including a map.
  • Content item - This Includelet determines where your website will display main Body text from the Edit sub-tab of the current page. If you delete this your page will appear blank. You can use it to position the content on the page among other Includelets
  • Content item metadata - This can be used to display extra information about the page, such as author and keywords.
  • Custom - This gives you a WYSIWYG editor and allows you to create custom comment to place anywhere on your page, or inherit to subpages. You can also select an image that will be displayed to the left or right of the content. You can use this to build nicely flowing content by adding several to a page with images floated to left and right.
  • Filtered Item List- This is a highly configurable Includelet to show bulleted lists of content pages from your site. Options:-
    • Section - Which folders(s) would you like to pull items from? You can add more than one section to the list. If you leave it blank it uses pages below the page on which you place the Includelet.
    • Content type - Filters the list of results displayed in the Includelet to just the type specified. For example it can be configured to show only pages of type "news story".
    • Search string - this filters the list of results displayed in the Includelet on a search of the words in the content. E.g. add the word "banana" to get only pages relating to bananas. The search system uses a "fuzzy match" of the word - so searching for "drive" would find "driver, driving, drives" etc.
    • Publish start/end date - a date range for when the article was published. It uses midnight on the day specified, so for example if you selected 21/07/2009 as the start date and 22/07/2009 as the finish date then you get pages from between midnight on the 21st and midnight on the 22nd.
    • Publish min/max age - a period of time to filter the displayed results by. E.g., if you select "1 day" as the maximum age it'll show only articles published in the last 24 hours. If you select "1 day" for the minimum age it'll show only articles published over 24 hours ago.
    • Display mode - whether to display only the title, title and subtitle (including thumbnail image), or the full item.
    • Extra Display Options - some extra optional bits of info that can be shown with the listing. e.g., the average star rating.
    • Sort order - determines the order the results are displayed. Please note that if you order by rating only pages that have a rating will be returned.
    • Present links to allow the user to sort results - if you select "yes" then when you view the page there will be buttons to order by name, date, rating, and popularity. This will override the order which you select in the "Sort order" option.
    • Limit - the number of results to return in the list. Supplying a value of 0 will result in unlimited results.
    • List mode - specifies whether you want the results in a list, a list with numbers, or just a plain presentation.
    • Forums - shows recent posts from your forums, as well as those in communities you are shared with. Options:
      • Which Communities to use - select which communities you are interested in. Either just this website, communities you are shared with, or communities which are "below" you in the hierarchy, or combinations of those.
      • Type - Hot Topics lists the topics that have had the most posts in the last month. Latest Threads and Latest Posts act as you would expect.
      • Limit - The number of forum posts to show in the list. Supplying a value of 0 will result in unlimited results.
  • Filtered Item List Keywords - Shows a list of keywords in use by items in selected section, and filters content in any Filtered Item List on the page using the selected keyword.
  • Latest News - this Includelet can be used to display news stories from your site, with various time periods or in most recent or least recent order.
  • Poll - shows a poll (from the Polls application) on your page.
  • Random item - this will display any random CMS item or a specific item if you choose it. Options:
    • Item - if selected this item will be displayed rather than a random one
    • Display mode - whether to display only the title, the teaser (including thumbnail image), or the full item
    • Content type - if the Includelet is configured to display a random page, it will only choose pages of this type
  • Shared Communities - This shows a list of communities that you're shared with, if there are any. Options:
    • Title - A title for the Includelet in the page it is to be used.
    • Limit - an optional limit to the number of communities to show. 0 for unlimited
  • Site Map - This Includelet shows a list of all the pages in your site, rather like the Site Map in the CMS itself.
  • Slider - A sliding carousel of images and text.
  • Vimeo/YouTube Video - embed a video on the page, with option to allow it to resize responsively for different size columns/screens.

Once you have selected you will be shown the configuration options for that Includelet. After configuring the Includelet it will be added to the specified slot.

Editing Includelets

If you would like to modify an existing Includelet you must first make sure it is editable by checking that the Includelet is coloured white in the layout CMS tab. You then double click the Includelet to open it's configuration options.

In the case of the Custom Includelet, double clicking displays the WYSIWYG editor to allow you to modify the content.