Mura 10: Managing Mura

How Do I Create Layout Templates?

The great thing about working with Mura is, you can start off by creating layout templates just like you always have. Many theme developers begin by creating custom layouts using vanilla HTML, CSS, and JavaScript. Or, some theme developers begin by purchasing and/or downloading free templates from the web. The end result is typically a directory of HTML files, and subdirectories of the assets, images, and other related files.

If we were to open one of the files from the example listed above, you would see that it's straight vanilla HTML.

So, there's no reason to change anything about the initial part of your theme development process.

1. Move Your Theme to a "themes" Directory

Place your theme under a "themes" directory. For example, {context}/themes/{ThemeName} if you wish to create a "global" theme, or {context}/sites/{SiteID}/themes/{ThemeName}, if you only want the theme to be available for a specific site.

2. Create a "templates" Directory

The only required directory of a Mura theme is a "templates" directory. So, we'll need to create it, and then move our layout templates into it.

3. Rename ".html" Files to ".cfm"

Rename all of your layout templates from the ".html" file extension, to the ".cfm" file extension. As indicated by the ".cfm" file extensions, Mura uses ColdFusion Markup Language (CFML) as its server-side scripting language. Like many other web scripting languages, CFML augments standard HTML files with database commands, conditional operators, high-level formatting functions, and other elements to produce web applications. If you're interested in learning more about CFML, checkout https://helpx.adobe.com/support/coldfusion.html or http://learncfinaweek.com.

So, using our existing example files, our directory structure might look like the following illustration.

4. Create a "default.cfm" Layout Template

Remember, if Mura is unable to locate a currently assigned layout template, it will "fall back" to using the "default.cfm" layout template. So, it's good practice to simply have one created.

5. Use Commonly Used Layout Template Names

Listed below are the most commonly used layout templates in Mura. If you plan on distributing your theme, you might consider using this naming convention. This way, if an administrator swaps a theme, they won't necessarily have to go back through their entire website, and reapply new layouts to all of the pages and sections of their site.

• default.cfm
  • This is the "default" layout template. If Mura is unable to locate a layout that has been assigned to a content item (e.g., the layout has been renamed, or removed), Mura will "fall back" to this layout. Using a simple line of code, you can easily "include" one of your other layouts to be used. For example, <cfinclude template="two_column_SL.cfm">
• home.cfm
  • The "home" layout is traditionally applied only to the "Home" page of the website.
• one_column.cfm
  • This layout is used when you don't need any "sidebars" or other columns other than the main "body/content" area.
• three_column.cfm
  • This layout accommodates a centered main "body/content" region, as well as a left sidebar, and a right sidebar.
• two_column_SL.cfm
  • This layout has a main "body/content" region, and its sidebar to the left.
• two_column_SR.cfm
  • This layout has a main "body/content" region, and its sidebar to the right.

So, reviewing our example files, we should be able to rename example templates as follows:

Since we have a "default.cfm" layout template, if the prior theme assignment was using a layout template that our new theme doesn't include, we could either make a new one, or just allow the "fall back" to occur, and rely on "default.cfm" to be used instead.

A common method used with the default.cfm layout template is to "include" your desired "default" layout template. For example, maybe you want the two_column_SL.cfm layout to be your default. The following illustration shows how you could do that.

Visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-i/cfinclude.html for more information about the <cfinclude> tag.

6. Replace # With ##

Hashtag/number sign (#) characters have special meaning in CFML. So, if your layout template has any hashtag characters, you will need to escape single hashtags with double hashtags. In short, you need to use ## to represent a single # character. Using a simple "find and replace" feature of most code editors tends to work well.

7. Wrap All Output With <cfoutput></cfoutput> Tags

In CFML, <cfoutput> tags displays output that can contain the results of processing CFML variables and functions. You're going to need these tags in your layout templates, because soon, you're going to be adding some template variables and code snippets, to replace your static text.

To learn more about <cfoutput> tags, visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-m-o/cfoutput.html.

Summary

Here's a quick overview of the process we've covered for creating theme layout templates so far:

1. Move your theme to the "themes" directory
2. Create a "templates" directory (and move your layout templates inside of it)
3. Rename ".html" files to ".cfm"
4. Create a "default.cfm" layout template
5. Use commonly used layout template names
6. Replace # with ##
7. Wrap all output with <cfoutput></cfoutput> tags

Soon, we'll go through and replace static text with dynamic template variables and code snippets.

Example Theme Directory Structure

As previously mentioned, when you first install Mura, if a theme does not exist, Mura will attempt to download one for you based on the "defaultthemeurl" setting found in the {context}/config/settings.ini.cfm file. As of version 7.1, this setting defaults to "https://github.com/blueriver/MuraBootstrap4".

Using the MuraBootstrap4 theme as an example, the table below details the directories and files Mura automatically scans for, and those are identified with an asterisk (*) within the "Required" column. As you'll see below, the "templates" directory is the only one that's truly required.

Note: The primary focus of this guide is to help theme developers integrate their existing designs into Mura. The Mura Developer Guide will cover many of the more complex scenarios when it comes to building dynamic display areas, as well as extending the functionality of Mura.

Using Responsive Layouts

The use of responsive web designs has grown exponentially, along with the explosion of people using their mobile devices to surf the web. Responsive design is a development approach where the page layout dynamically adjusts to the size of a user's screen, and often includes checking which type of device or browser is being used to access the site. Hence, content displayed on a "desktop" browser in a three-column layout, may re-flow to a two-column format for tablet devices, and a one-column layout for smaller, mobile devices.

Most modern front-end frameworks such as Bootstrap, Foundation, Semantic UI, and others, accommodate responsive layouts. For example, Mura's readily available MuraBootstrap4 theme utilizes the responsive web design features of Bootstrap.

As you'll see in the "What Can I Use?" section, you can use pretty much any front-end framework you want. Mura also includes a useful tool when previewing the front-end of your site. The front-end toolbar includes a "Multi-Device Preview" button.

Clicking the Multi-Device Preview button will launch the Preview Mode window.

At the top of the window, you should be able to see five different button icons, each representing a different "view". Selecting a different icon, the screen will resize to give you an idea of how your content might display on a device with similar viewport dimensions. Options cover Desktop, Tablet Portrait, Tablet Landscape, Phone Portrait, and Phone Landscape.

For example, selecting Phone Portrait, the home page of the MuraBootstrap3 site might look like the following illustration.

Responsive layouts has become the most common approach to use in Mura to deliver content to both desktop and mobile users of your sites.

esapiEncode

Scattered throughout this section, and throughout the default theme that ships with Mura, you'll find references to a special method called esapiEncode. This method is used to encode a given string for safe output to stop Cross Site Scripting attacks. You can safely use this method in Mura, even though it has not been fully implemented in all available CFML engines yet.

Function Syntax

esapiEncode( encodeFor, string )

Parameters

Usage

We highly recommend to use this function whenever outputting user-entered text. For example, content managers enter text into Mura fields such as the Title, Credits, Meta Description, Meta Keywords, etc. Wherever you output these fields in your layout templates, be sure to pass the field in as the string to encode.

Example

The following example encodes a content item's "Title" for output inside of standard HTML heading tags.

<cfoutput>
	<h2>#esapiEncode('html', m.content('title'))#</h2>
</cfoutput>

setDynamicContent

A Mura Scope helper method to render Mura [m] tags. This function checks a string for Mura [m] tags, and if found, will pass the variable or function call the the CFML server for processing before final rendering of the page.

Function Syntax

m.setDynamicContent( string )

Parameters

Usage

Use this function to search through a string for Mura [m] tags. Most use cases revolve around user-entered text that may, or may not, contain Mura [m] tags, such as the "Summary" field of a content item.

Examples

You can wrap this method around any string, or anticipated string, to render Mura [m] tags.

Basic Example

The following is a very basic example to illustrate how to output an explicit string containing Mura [m] tags.

<cfset exampleString = "Today is [m]DateFormat(Now(), 'yyyy-mm-dd')[/m]" />
<cfoutput>
    <div>
        #m.setDynamicContent(exampleString)#
    </div>
</cfoutput>

Content Summary

The following example illustrates how to output a content item's "Summary" field, if you expect it may contain Mura [m] tags. You could apply this method to nearly any text field of a content item.

<cfoutput>
    <article>
        #m.setDynamicContent(m.content('summary'))#
    </article>
</cfoutput>

dspPrimaryNav

A Mura Scope helper method to dynamically output primary navigation. Mura also checks a user's permissions, and will only display links to content the user has access to. If a section of a site is restricted, a link will be generated to the topmost content item only. If a user visits that link, they will be presented with a login screen, if they're not currently logged in, or if they are logged in and don't have access, a message will inform the user they do not have the proper authorization.

Function Syntax

m.dspPrimaryNav(
    viewDepth
    , id
    , class
    , displayHome
    , closeFolders
    , openFolders
    , showCurrentChildrenOnly
    , liClass
    , liHasKidsClass
    , liHasKidsAttributes
    , liCurrentClass
    , liCurrentAttributes
    , liHasKidsNestedClass
    , aHasKidsClass
    , aHasKidsAttributes
    , aCurrentClass
    , aCurrentAttributes
    , ulNestedClass
    , ulNestedAttributes
    , aNotCurrentClass
    , siteid
    , complete
)

Parameters

Usage

Use this function to output primary navigation.

Example

The following example outputs the primary nav up to two-levels deep.

<cfoutput>
    <nav>
       #m.dspPrimaryNav(
           viewDepth=2
           , id='navPrimary'
           , class='nav navbar-nav'
           , displayHome='always'
           , closeFolders=false
           , showCurrentChildrenOnly=false
           , ulNestedClass='dropdown-menu'
           , liHasKidsNestedClass='dropdown-submenu'
           , aHasKidsClass='dropdown-toggle'
           , aHasKidsAttributes='role="button" data-toggle="dropdown" data-target="##"'
        )#
   </nav>
</cfoutput>

dspBody

A Mura Scope helper method to dynamically output the body/content of a content item. This function automatically checks the content type, and displays output accordingly (e.g., if a Mura "Folder" or "Calendar", will output the children). Additionally, Mura checks to see if the content is restricted/protected, and if so, checks to see if the current user is logged in. If not logged in, will display a login screen. If user is logged in and does not have the required permissions, Mura will display a message to the user in lieu of the content.

Function Syntax

m.dspBody(
    body
    , pageTitle
    , crumbList
    , crumbSeparator
    , showMetaImage
    , metaImageSizeArgs
    , metaImageClass
    , includeMetaHREF
)

Parameters

Usage

Use this function to output the main content/body of a content item.

Example

The following example outputs the content/body, without a page title or breadcrumbs, while outputting the associated image (if one exists) using the 'medium' image size.

<cfoutput>
    <article>
        #m.dspBody(
            body=m.content('body')
            , pageTitle=''
            , crumbList=false
            , showMetaImage=true
            , metaImageSizeArgs={size='medium'}
        )#
   </article>
</cfoutput>

dspObjects

A Mura Scope helper method to dynamically output the display objects assigned to display regions.

Function Syntax

m.dspObjects( columnID )

Parameters

Usage

Use this function to output display objects assigned to specific display regions.

Examples

The following example outputs display objects assigned to the second display region as defined under Site Settings > Edit Settings, Display Regions tab, Display Region Names list position.

<cfoutput>
    <article class="display-objects-wrapper">
        #m.dspObjects(2)#
    </article>
</cfoutput>

Default Settings Example

The following is merely a simple reference to output the display regions as initially set up in Mura. However, you will want to verify your settings defined under Site Settings > Edit Settings, Display Regions tab, and adjust accordingly.

<cfoutput>
    <!--- Left Sidebar/Column Display Objects --->
    <aside class="left-sidebar display-objects-wrapper">
        #m.dspObjects(1)#
    </aside>

    <!--- Main Content Display Objects --->
    <article class="main-content display-objects-wrapper">
        #m.dspObjects(2)#
    </article>

     <!--- Right Sidebar/Column Display Objects --->
    <aside class="right-sidebar display-objects-wrapper">
        #m.dspObjects(3)#
    </aside>
</cfoutput>

dspObject

A Mura Scope helper method to dynamically output specific types Mura display objects such as components, forms, and more.

Function Syntax

m.dspObject(
    object
    , objectid
    , siteid
)

Parameters

Usage

Use this function to output specific types of Mura display objects.

Examples

Listed below are some examples of how to render specific types of Mura display objects.

Component

The following example outputs a "Component" named "Footer".

<cfoutput>
    <footer>
        #m.dspObject(object='component', objectid='Footer')#
    </footer>
</cfoutput>

Form

The following example outputs a "Form" named "Contact Us".

<cfoutput>
    <aside class="contact-us-wrapper">
        #m.dspObject(object='form', objectid='Contact Us')#
    </aside>
</cfoutput>

Category Summary

The following example outputs a "Category Summary" display object. Keep in mind, this will only output something if the section of the site you're currently viewing actually has categorized content.

<cfoutput>
    #m.dspObject(object='category_summary')#
</cfoutput>

dspCrumbListLinks

A Mura Scope helper method to dynamically output breadcrumbs as a navigational aid to allow users to keep track of their location within the website. The breadcrumb links are output as a HTML ordered list (<ol>), and will already be assigned the classes of mura-breadcrumb and breadcrumb.

Function Syntax

m.dspCrumbListLinks(
    id
    , separator
    , class
)

Parameters

Usage

Use this function to output breadcrumb links.

Example

The following example outputs breadcrumb links.

<cfoutput>
    <nav class="breadcrumbs-wrapper">
        #m.dspCrumbListLinks(
            id = 'your-id'
            , separator = '&raquo;&nbsp;'
            , class = 'your-class'
        )#
    </nav>
</cfoutput>

outputMuraCSS

A Mura Scope helper method to dynamically output links to Mura's stylesheets to account for basic styling of Mura-generated output. Just to clarify, including Mura's CSS is completely optional. However, using it can save you loads of time in the long run.

Function Syntax

m.outputMuraCSS(
    version
    , includeskin
    , complete
    , useprotocol
)

Parameters

Usage

Use this function to include Mura's own CSS for basic styling of Mura-generated output.

Example

The following example outputs Mura's CSS

<cfoutput>
  <!--- Always include this _before_ any custom CSS --->
  #m.outputMuraCSS(version='7.1', includeskin=true)#

  <!--- Custom CSS should go here --->
</cfoutput>

Illustrated below is an example of a theme without Mura-generated CSS.

Below is an illustration of the same example as above, using Mura-generated CSS.

The differences are even more noticeable when you are creating a custom theme from scratch.

createCssHook

A Mura Scope helper method to dynamically create CSS-friendly hooks for use within your layout templates. Pass in any string of text, and Mura will strip out CSS-unfriendly characters (e.g., script tags, HTML tags, etc.), and create a CSS-friendly string. Spaces, underscores, and bad characters (such as entity-encoded characters, etc.) are replaced with hyphens. Any capital letters are converted to lowercase. If the first character is numeric or begins with a hyphen, the character will be stripped from the resulting string.

Function Syntax

m.createCssHook( text )

Parameters

Usage

Use this function to create CSS-friendly hooks.

Example

The following example outputs a class of "body-" and is appended with a CSS-friendly hook based on a content item's "Title".

<cfoutput>
    <body class="body-#m.createCssHook(m.content('title'))#">
        ...
    </body>
</cfoutput>

In the example above, if the "Title" was "About Us", the output would result in the the following.

<body class="body-about-us">
    ...
</body>

getURLForImage

A Mura Scope helper method to output the URL for an image based on a fileID. The result can then be used to populate the src attribute of a HTML image tag (<img>) to display the image via a browser.

Function Syntax

m.getURLForImage(
    fileID
    , size
    , complete
    , height
    , width
    , siteID
)

Parameters

Usage

Use this function to output the path to a Mura image. If an invalid fileID is used, the result will be an empty string.

Examples

There are several ways you can use this method. Using Class Extensions (covered in the Mura Developer Guide), there could be any number of associated images to a content item. Using the fileID of any image, you can use the following examples to output an image.

The examples use a simple bit of CFML logic first, to make sure the image actually exists. For more information on the CFML tag cfif, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-i/cfif.html.

Large Image

The following example outputs a Large image of the current content item. This is very similar to the Get Associated Image example found under the content object section.

<cfoutput>
    <cfif Len(m.getURLForImage(fileid=m.content('fileid')))>
        <img src="#m.getURLForImage(fileid=m.content('fileid'))#">
    </cfif>
</cfoutput>

Medium Image

The following example outputs a Medium image of the current content item.

<cfoutput>
    <cfif Len(m.getURLForImage(fileid=m.content('fileid')))>
        <img src="#m.getURLForImage(fileid=m.content('fileid'), size='medium')#">
    </cfif>
</cfoutput>

Medium Image with Alt Attribute

The following example outputs a Medium image of the current content item, and populates the alt attribute of the <img> tag with the content item's Title.

<cfoutput>
    <cfif Len(m.getURLForImage(fileid=m.content('fileid')))>
        <img  src="#m.getURLForImage(fileid=m.content('fileid'), size='medium')#"
              alt="#esapiEncode('html_attr', m.content('title'))#">
    </cfif>
</cfoutput>

Site Placeholder Image

As covered under How to Manage Image Sizes, each site can have a Placeholder Image. This example demonstrates how to output a placeholder image.

<cfoutput>
    <cfif Len(m.getURLForImage(fileid=m.siteConfig('placeholderImgID')))>
        <img  src="#m.getURLForImage(fileid=m.siteConfig('placeholderImgID'))#">
    </cfif>
</cfoutput>

Display Site Placeholder Image if Associated Image Doesn't Exist

The example below is useful for when you want to output the placeholder image for content that doesn't have an associated image.

<cfoutput>
    <cfif Len(m.getURLForImage(fileid=m.content('fileid')))>
        <img  src="#m.getURLForImage(fileid=m.content('fileid'))#">
    <cfelseif Len(m.getURLForImage(fileid=m.siteConfig('placeholderImgID')))>
        <img src="#m.getURLForImage(fileid=m.siteConfig('placeholderImgID'))#">
    </cfif>
</cfoutput>

content

A Mura Scope object, (also referred to as a "subscope" of the Mura Scope), that provides access to several helper methods for the Content Item in the current request context, as well as easy access to its attributes.

Function Syntax

m.content( property, propertyValue )

Parameters

Usage

Use this function to "get" and/or "set" values of the content item. The content object also has a number of helper methods, very useful for theme developers, and are noted below under the Examples.

Examples

Note: Some of the examples below make use of esapiEncode to encode a given string for safe output to stop Cross Site Scripting attacks.

Content Title

The following example outputs the "Title" of the content item in the current request context.

<cfoutput>
    <h2>
        #esapiEncode('html', m.content('title'))#
   </h2>
</cfoutput>

HTML (Browser) Title

The following example outputs the "HTML (Browser) Title" of the content item in the current request context.

<cfoutput>
    <title>
        #esapiEncode('html', m.content('HTMLTitle'))#
    </title>
</cfoutput>

You could also combine this with the siteConfig's "Site Name" attribute, to have a full <title> for your theme's layout template.

<cfoutput>
    <title>
        #esapiEncode('html', m.content('HTMLTitle'))# - 
        #esapiEncode('html', m.siteConfig('site'))#
   </title>
</cfoutput>

Content Summary

The following example outputs the "Summary" of the content item in the current request context.

<cfoutput>
    <article>
        #m.content('summary')#
   </article>
</cfoutput>

If you want Mura [m] Tags to render, you will want to wrap the output with m.setDynamicContent().

<cfoutput>
    <article>
        #m.setDynamicContent(m.content('summary'))#
   </article>
</cfoutput>

Date Created

This example outputs the date the content item was originally created on. For more information on the CFML tag DateFormat, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-functions/functions-c-d/DateFormat.html

<cfoutput>
    <p>
        Date Created: #DateFormat(m.content('created'), 'YYYY-MM-DD')#
   </p>
</cfoutput>

Date Last Updated

This example outputs the date the content item was last updated.

<cfoutput>
    <p>
        Date Last Updated: #DateFormat(m.content('lastUpdate'), 'YYYY-MM-DD')#
   </p>
</cfoutput>

Last Updated By

This example outputs the first and last name of the content manager who last updated the content item.

<cfoutput>
    <h2>
        Last Updated By: #esapiEncode('html', m.content('lastUpdateBy'))#
   </h2>
</cfoutput>

Credits (Author)

This example outputs the "Credits" attribute (from the Publishing tab).

<cfoutput>
    <h2>
        Author/Credits: #esapiEncode('html', m.content('credits'))#
   </h2>
</cfoutput>

Meta Description

This example shows how to output text entered into the Meta Description field.

<cfoutput>
    <meta name="description" content="#esapiEncode('html_attr', m.content('metaDesc'))#">
</cfoutput>

Meta Keywords

This example shows how to output text entered into the Meta Keywords field.

<cfoutput>
    <meta name="keywords" content="#esapiEncode('html_attr', m.content('metaKeywords'))#">
</cfoutput>

Get Associated Image

This example shows how to output the primary associated image of a content item. It uses a simple bit of CFML logic first, to make sure an image actually exists. For more information on the CFML tag cfif, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-i/cfif.html

<cfoutput>
    <cfif Len(m.content().getImageURL('medium'))>
        <img src="#m.content().getImageURL('medium')#">
    </cfif>
</cfoutput>

Inspecting Available Attributes

This example demonstrates how to inspect the available attributes of a content item. For more information the CFML tag cfdump, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-d-e/cfdump.html.

<cfdump var="#m.content().getAllValues()#">

component

A Mura Scope object, (also referred to as a "subscope" of the Mura Scope), that provides access to several helper methods for a Component Item in the current request context, as well as easy access to its attributes.

Function Syntax

m.component( property, propertyValue )

Parameters

Usage

Use this function to "get" and/or "set" values of the component item. The content/component object also has a number of helper methods, very useful for theme developers, and are noted below under the Examples.

Examples

Note: Some of the examples below make use of esapiEncode to encode a given string for safe output to stop Cross Site Scripting attacks.

Component Body

The following example outputs the "Body/Content" of the component item in the current request context.

<cfoutput>
    <article>
        #m.component('body')#
   </article>
</cfoutput>

If you want Mura [m] Tags to render, you will want to wrap the output with m.setDynamicContent().

<cfoutput>
    <article>
        #m.setDynamicContent(m.component('body'))#
   </article>
</cfoutput>

Component Title

The following example outputs the "Title" of the component item in the current request context.

<cfoutput>
    <h2>
        #esapiEncode('html', m.component('title'))#
   </h2>
</cfoutput>

Date Created

This example outputs the date the content item was originally created on. For more information on the CFML tag DateFormat, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-functions/functions-c-d/DateFormat.html

<cfoutput>
    <p>
        Date Created: #DateFormat(m.component('created'), 'YYYY-MM-DD')#
   </p>
</cfoutput>

Date Last Updated

This example outputs the date the component item was last updated.

<cfoutput>
    <p>
        Date Last Updated: #DateFormat(m.component('lastUpdate'), 'YYYY-MM-DD')#
   </p>
</cfoutput>

Last Updated By

This example outputs the first and last name of the content manager who last updated the component item.

<cfoutput>
    <h2>
        Last Updated By: #esapiEncode('html', m.component('lastUpdateBy'))#
   </h2>
</cfoutput>

Inspecting Available Attributes

This example demonstrates how to inspect the available attributes of a component item. For more information the CFML tag cfdump, please visit https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-d-e/cfdump.html.

<cfdump var="#m.component().getAllValues()#">

siteConfig

A Mura Scope object, (also referred to as a "subscope" of the Mura Scope), that provides access to several helper methods for the Site Settings in the current request context, as well as easy access to its attributes.

Function Syntax

m.siteConfig( property, propertyValue )

Parameters

Usage

Use this function to "get" and/or "set" values of the Site Settings. The siteConfig object also has a number of helper methods, very useful for theme developers, and are noted below under the Examples.

Examples

Note: Some of the examples below make use of esapiEncode to encode a given string for safe output to stop Cross Site Scripting attacks.

Theme Asset Path

The following example outputs the a relative path to where your site's theme files reside on the server.

<cfoutput>
    <p>
        #m.siteConfig('themeAssetPath')#
    </p>
</cfoutput>

This is useful for when you may want to create dynamic links to your theme's CSS files. Otherwise, you would have to hard-code the path yourself, which makes it difficult for long-term maintenance since your theme could be hosted in different environments, and the paths could be completely different. For example, if you want to include your theme's CSS, you could use the following code example.

<cfoutput>
    <!--- Your Theme's Styles --->
    <link rel="stylesheet" href="#$.siteConfig('themAssetPath')#/css/your-styles.css">
</cfoutput>

Site Name

The following example outputs the "Site Name" of the site being accessed in the current request context.

<cfoutput>
    <header>
        <a class="navbar-brand" href="/">
            #esapiEncode('html', m.siteConfig('site'))#
        </a>
    </header
</cfoutput>

Site Tagline

The following example outputs the "Site Tagline" of the site being accessed in the current request context.

<cfoutput>
    <header>
        <p>
            #esapiEncode('html', m.siteConfig('tagline'))#
        </p>
    </header
</cfoutput>

Site ID

The following example outputs the "Site ID" of the site being accessed in the current request context.

<cfoutput>
    #esapiEncode('html', m.siteConfig('siteID'))#
</cfoutput>

Domain

The following example outputs the "Domain" of the site being accessed in the current request context.

<cfoutput>
    #esapiEncode('html', m.siteConfig('domain'))#
</cfoutput>

Inspecting Available Attributes

This example demonstrates how to inspect the available attributes of the Site Settings using the CFML tag cfdump.

<cfdump var="#m.siteConfig().getAllValues()#">

How To Enable/Disable Error Messages

You can choose to enable or disable error messages, or debugging information, to appear for site visitors by following the steps below.

1. Open the file located at {context}/config/settings.ini.cfm
   
2. Locate the setting labeled debuggingenabled
   • true
     • If set to true, error messages will appear to site visitors.
       
   • false
     • If set to false, error messages will not appear to site visitors, and a special "Error" screen will be displayed instead.
       
3. Save the file.
4. Reload Mura for the settings to take effect.

How To Create A Custom Error Screen

Mura will only display a custom error screen when error messages are disabled. So, before proceeding, you will need to follow the steps under How to Enable/Disable Error Messages, and set debuggingenabled to false.

Once you've disabled error messages, follow the steps below to use your custom error screen.

1. Open the file located at {context}/config/settings.ini.cfm.
   
2. Locate the setting labeled errortemplate. By default, the errortemplate setting is set to /muraWRM/core/templates/error.html.
   
3. The default error template points to the file located under {context}/core/templates/error.html.
   
4. The error.html file simply generates the following screen by default.
   
5. Do not modify the error.html file directly. If you do, you run the risk of the file being overwritten after performing a "core" update.
6. Instead, create a new file with whatever you want to appear, and save it under your desired directory (e.g., {context}/config/custom-error-file.html). Technically, you could save it wherever you want under Mura, but you'll have to be aware of the file path for the next step. The illustration below shows a new file labeled "custom-error-file.html" and the file contains some simple HTML. You could create and use a custom CFML file as well, if desired.
   
7. Next, we need to update the errortemplate setting to point to the newly created file.
   
8. Save the file.
9. Reload Mura for the new settings to take effect.

How to Manage Image Sizes

Mura allows you the ability to modify default image sizes (Small, Medium, and Large), as well as the option to create additional, pre-defined image sizes. Having pre-defined image sizes allows your content managers the ability to upload an image, and then select their desired crop region. This is quite useful to avoid issues where a person's head, or some other desired feature of the photo may be removed during the automatic cropping process.

Follow the steps below to manage image sizes in Mura.

1. From the back-end administration area of Mura, select Site Settings on the main navigation, and click Edit Settings.
   
2. Select the Images tab.
   
3. The Images tab contains the dimensions of the default images sizes (Small, Medium, Large), as well as any Custom Images.
   
   • Small
     • This is the default image size used on Folder content types for any listed child content.
       
   • Medium
     • This is the default image size used by Mura when using the dspBody template helper method, and setting showMetaImage to true.
       
   • Large
     • This is the default image size used to display when clicking the Medium image, if being output by dspBody and setting includeMetaHref to true.
       
4. To modify the dimensions of any default image sizes, simply enter your desired Height and/or Width settings.
5. To add a new custom image, click the Add Custom Image Size button.
   
   1. The Add Custom Image Size window should appear.
      
   2. Enter a Name for the image. The Name should not have any spaces or special characters in it (other than hyphens). Be aware that invalid characters and spaces will be removed upon saving anyway. Also note that any capital letters will be converted to lowercase.
      
   3. You may also enter your desired Height and/or Width in pixels. You may optionally specific only one of these attributes, and leave the other as "AUTO" for Mura to make crops proportionately to the original image size.
      
   4. Click the Save button to save your new custom image size.
      
   5. Your new custom image size should appear in the listing of custom images.
6. To edit the dimensions of any Custom Images, click the pencil icon next to the custom image name.
   
   • If you click the pencil icon, the Edit Custom Image Size window should appear.
     
   • Enter your desired Height and/or Width in pixels, and click the Save button to save your changes.
     
     
7. You can also upload a Placeholder Image that can be used for content items that haven't had an Associated Image uploaded.
   
8. When you've finished making your edits, click the Save Settings button, to save your changes.