Search code examples
coldfusionmura

Mura CMS - What options do I have for displaying body content?

I'm in the process of creating some custom page layouts for my new install of Mura (I'm a Mura newbie, but we are using this at my work, so I'm learning as I go), but I'm in need of some assistance with the body of the page. Following a default layout that came with Mura, the following code is outputting the body of a page:

#$.dspBody(
body=$.content('body')
, pageTitle=pageTitle
, crumbList=0
, showMetaImage=0
)#

When an Associated Image is assigned to the page, this image shows up when I have an index of pages (a folder for example), which is great. However, it is also appearing at the top of the body when you view the page itself.

Looking at the code above, is there another property I can drop in there to remove the associated image? If so, what are my available properties here? I can't seem to find any documentation on this bit of code on the Mura sites.

As requested, the entire code for the layout in question

<cfoutput>
    <cfinclude template="inc/html_head.cfm" />
    <body id="#$.getTopID()#" class="depth-#$.content('depth')# #$.createCSSHook($.content('menuTitle'))#">
        <div class="coverImageWrapper">
            <div class="coverImage">
                <cfinclude template="inc/header.cfm" />
                <cfinclude template="inc/departmentName_socialMedia.cfm" />
                <cfinclude template="inc/topNav.cfm" />
            </div>
        </div>
        <div class="secondaryPageWrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 mainCol">

                        <cfinclude template="inc/breadcrumb.cfm" />
                        <cfset pageTitle = $.content('type') neq 'Page' ? $.content('title') : ''>
                        #$.dspObjects(2)#
                        #$.dspBody(
                        body=$.content('body')
                        , pageTitle=pageTitle
                        , crumbList=0
                        , showMetaImage=0
                        )#
                    </div>
                    <aside class="col-md-4 sideCol">
                        #$.dspObjects(3)#
                    </aside>
                </div>
            </div>
        </div>
        <cfinclude template="inc/department_footer.cfm" />
        <cfinclude template="inc/footer.cfm" />
        <cfinclude template="inc/html_foot.cfm" />
    </body>
</cfoutput>

enter image description here

Solution

  • @JesseEarley,

    First of all, please check out our online Theme Developer's Guide at http://docs.getmura.com/v7/theme-developers/. I'm sure you'll find that useful.

    As for your associated image issue, if you're using the latest version of Mura, and using the default theme, MuraBootstrap3, then you'll find a directory labeled content-types. Under there, you should see another directory labeled page with a file labeled index.cfm. This file is what's controlling the view of the body. Within that file, there's a section of code specifically being used to output associated images:

        <!--- Primary Associated Image --->
    <cfif $.content().hasImage(usePlaceholder=false)>
        <cfscript>
            img = $.content().getImageURL(
                size = 'carouselimage' // small, medium, large, custom, or any other pre-defined image size
                ,complete = false // set to true to include the entire URL, not just the absolute path (default)
            );
        </cfscript>
        <div class="mura-asset">
            <a class="mura-meta-image-link" href="#$.content().getImageURL()#" title="#esapiEncode('html_attr', $.content('title'))#" rel="shadowbox[body]">
                <img class-"mura-meta-image carouselimage" src="#img#" alt="#esapiEncode('html_attr', $.content('title'))#">
            </a>
        </div>
    </cfif>
<!--- /Primary Associated Image --->

    That's where you can enter your custom logic, or remove it altogether, if you wish.

    Clarification

    The call to $.dspBody() triggers the method under requirements.mura.content.contentRenderer.cfc:dspBody(). In that method, Mura will see if you have any overrides to the rendering of the specified content type, (e.g., Page, Folder, Calendar, etc.), and there are a number of ways to override the output. For example, in your Theme's eventHandler.cfc you could have a method called onPageDefaultBodyRender() and if it returns a string, that string will be used. In similar fashion, Mura will scan for specific directories in your theme such as content_types, and if found, will then scan for content types such as page, then use the index.cfm as the rendering of the body. That's exactly what's happening in this case.

    As I stated in my notes below, I'm currently working on the documentation, and will have this information in a much cleaner, and hopefully clearer, format. For now, you may want to view my presentation at http://docs.getmura.com/v7/videos/webinars/super-fast-app-dev-with-mura-7/ to get up to speed on some of this while I'm writing the new docs.

    Also, as an alternative, you could either temporarily remove the content_types directory, or rename it to something else, to see how dspBody() would render your content without the override.

    Cheers, Steve