Override Default Output - Mura Docs v6

Override Default Output

When you create a custom content type in Mura, and then add custom attributes, Mura doesn't know where, or even if, you want to show any of the information entered into these new fields. So, let's take over the default output for our custom content type and control what, and where we want our information to appear within the main "body" area, regardless of which layout template is being used.

There's actually a few ways to customize the output of the "body" area. Today, we'll learn a simple method to do this. If you'll be attending the Back End Developer sessions, you'll pick up an additional method to do this as well.

  1. The first thing we're going to do is create a file as follows:

    /{SiteID}/includes/themes/MuraBootstrap/display_objects/custom/extensions/dsp_Page_Bio.cfm

    This is very important! If you don't do this step right, then Mura won't know you want to intercept the output of the body.

  2. Add some simple text to the file and refresh your page to see what happens.

    <cfoutput>
    <h3>Hi! I'm dsp_Page_Bio.cfm</h3>
    </cfoutput>
  3. Hopefully, the body area of your page looks something like the following:

  4. Let's use one of the template variables that we've learned earlier to output the content body. Edit the dsp_Page_Bio.cfm file and add the bolded code snippet below:

    <cfoutput>
    <h3>Hi! I'm dsp_Page_Bio.cfm</h3>
    #$.content('body')#
    </cfoutput>
  5. Save your file, then preview your page.

    You should now see the text that appeared before we created the custom file.

  6. You can now add additional template variables to display some of the custom fields (extended attributes) that you've created. We can do this by using the same code that we used to output the body, but instead of using the word body, we'll use the value we entered in the Name field when creating the extended attribute. For example: #$.content('bioTitle')#
  7. Let's add the Job Title to the output in our dsp_Page_Bio.cfm file:

    <cfoutput>
    <h3>#$.content('bioTitle')</h3>
    #$.content('body')#
    </cfoutput>
  8. Save your file, then refresh your page.

    We should be able to continue the process of pulling out any custom attributes that we want, and placing them inside of our desired markup.

  9. Since the MuraBootstrap theme is using the Bootstrap framework, we can leverage the framework to create tabs by following their markup conventions. The following code is taken directly from Bootstrap documentation:

    <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
    </div>
  10. Using these markup conventions, we could create our tabs with markup that resembles the following:

    <ul class="nav nav-tabs">
    <li class="active">
    <a href="##tabs-1" data-toggle="tab">Contact</a>
    </li>
    <li>
    <a href="##tabs-2" data-toggle="tab">Background</a>
    </li>
    <li>
    <a href="##tabs-3" data-toggle="tab">Education</a>
    </li>
    <li>
    <a href="##tabs-4" data-toggle="tab">Follow Me</a>
    </li>
    </ul>

    The double hashtags (##) are required so that CFML will escape them and not attempt to parse it as if it were supposed to be CFML.

  11. Then, we could go on and create our tabs. Here's an example of our first tab content

    <!--- TABBED CONTENT --->
    <div class="tab-content">
    <!--- CONTACT INFO --->
    <div id="tabs-1" class="tab-pane active">
    <h3>Contact Information</h3>
    <ul>
    <cfif Len($.content('bioEmail'))>
    <li><strong>Email Address:</strong> #HTMLEditFormat($.content('bioEmail'))#</li>
    </cfif>
    <cfif Len($.content('bioOfficeNo'))>
    <li><strong>Office:</strong> #HTMLEditFormat($.content('bioOfficeNo'))#</li>
    </cfif>
    <cfif Len($.content('bioMobileNo'))>
    <li><strong>Mobile:</strong> #HTMLEditFormat($.content('bioMobileNo'))#</li>
    </cfif>
    </ul>
    </div><!--- /tabs-1 --->
    </div><!--- /tab-content --->
  12. Open your code-snippets folder, and located the file named 13-dsp_Page_Bio4.cfm
  13. Review the contents of this file.
  14. Copy the contents of 13-dsp_Page_Bio4.cfm, then paste them into your theme's dsp_Page_Bio.cfm file.
  15. Save the file, then refresh your browser window.

    You should now be able to click on the tabs to view the content.

This is just one way to output tabbed content. You can literally use any custom code, scripts, frameworks, or whatever to display the tabs the way you want. For example, you could use jQuery UI, or any other third-party solution.