Components
Components are a flexible and easy way to provide pre-formatted content templates and reusable objects throughout a site.
Components as Content Templates
When building out a site, it is often necessary to provide non-technical users with way to recreate styles for specific types of content. Components provide an easy way to do this in Mura.
Simply create a new Component, add specific markup, placeholder copy and make sure it's assigned for use in the Site Manager, Email Broadcaster or even from within Components themselves (you can nest components this way). Of course, if you have specific CSS styles, they'll need to be added to your theme's site.css or wherever you prefer.
Once this is complete, your component is now available to be used by content editors when editing a page. Simply click the "Components" button in the WYSIWYG editor and select a component to drop in.
Once the component is in place, it can be edited or updated and maintain the intended visual style.
Note: Once a component is placed into content, it is no longer "attached" to the original Component. This allows it to be edited independently as used as a content template.
Tip: To avoid deleting necessary markup in a component when editing its content, selecting everything but a single character, edit your text, then delete that remaining character.
Components as Objects
Components can be used to provide a single point of edit for an object that can be used in multiple places, site-wide. Simply create a Component and make sure it's assigned to be available in the Site Manager. Now when you edit a node, your component will be available to place into display regions by going to the "Content Objects" tab and the selecting "Components" from the dropdown. You can use the "arrow" buttons to move your component to the region you' like.
Component Templates
Components can have templates just like pages can have templates. This allows the designer/developer to obfuscate and partition specific code from being editable by a non-technical user. For instance, suppose your component is marked up like this:
<div class="promo">Lorem ipsum dolor sit amet.</div>
If the user placed this component in the WYSIWYG editor, they may inadvertantly delete the <div> and subsequently any style associated with it. Using Component Templates, we can make the surrounding markup uneditable and allow the user to edit content without worrying about deleting anything necessary for providing specific style.
To use Component Templates, create a directory in "/{siteid}/includes/themes/templates/" called "components". Then, add a file (name it anything you want, i.e. promo.cfm) with the markup from the example above, replacing the content with the appropriate variable using the Mura scope, like so:
<cfoutput>
<div class="promo">#$.component('body')#</div>
</cfoutput>
Now when you create a new template, you'll have the option of selecting the template on the "Advanced" tab.
Note: This syntax (the Mura Scope), is only available in Mura 5.2+ and not supported by CFMX7.