Components

Components

We make extensive use of components to compartmentalize page content to facilitate information reuse and allow for drag-n-drop page building in Mura's inline editor. Also, because we can assign templates to components, in addition to text, graphics, etc., it allows for a uniform way for formatting information sections of the website across multiple pages.

Components elements can be accessed just like page elements and, like pages, folders, etc., components can be extended with custom attributes. Finally, components can have templates (.cfm files) associated with them (optionally) to which all of these content elements are available.

As previously explained above, pages, folders, etc., content is typically accessed using the Mura "Content" bean. For components, the component bean is used for retrieving a components information. For example:

$.component('title') //Gets the title of the component
$.setDynamicContent($.component('body')) //Gets the body of the component and allows it to display mura beans within it

Component Image

We often find a need to associate a primary image file with a component, just as can be done with a page or folder element. This image can then be used by the template to create a background image for the component area. By default, Mura Components do not support this feature. Mura does support images being part of the body content for the component. If we need to add the ability to associated a primary image with the component that isn't part of the body, we start by extending the default component by adding a class extension in the form of an attribute set. In the attribute set we add an attribute (typically called "backgroundImage" or the such) that is a file type input. We can then access the attribute and create a URL to it as follows:

<img src="#$.createHREFForImage(fileid = $.component('backgroundImage'),size='slider')#" />

NOTE: The above example includes a reference to using a custom image size of "slider". This isn't a default cropped image size created by the Mura CMS. Instead, this is a custom size defined in the "Images" section of the "Edit Site Settings" area of the Mura CMS.