Part of the power of Mura is the ability to nest content items underneath folders and pages to serve as content for the parent page/folder. This saves going through the effort to organize the content somewhere else, creating a collection/content feed, and then creating an iterator to loop through the feed. The following is an example of a page that detects if there are children/kids (nested content underneath the parent page) for creating tabbed content on the page. Additionally, if one of the tabs is labeled "Downloads", then the page looks for additional next content to populate download links to files loaded under the Downloads tab.
Here is the page content structure that we're working with:
As can be seen in the above example, the page "eShield" (a class "Product" class extension of the regular Mura Page content object) has three children/kids pages underneath of it and one of those pages has two children/kids of its own in the form of files using the Mura File content type. In this example, we want to create a page template (.cfm file) that detects if there are children associated with the page and, if so, gets the content and organizes it under tabs labeled with the children page titles. Additionally, it looks to see if there are File content type children under a page titled "Downloads" and, if so, populates the tab with links to those files.
product.cfm
<cfset pageTitle = $.content('type') neq 'Page' ? $.content('title') : ''>
#$.dspBody(body=$.content('body')
, pageTitle=pageTitle
, crumbList=false
, showMetaImage=false
)#
<!--- If this is a product page, it has children that need to be populated in tabs --->
<cfif $.content().getValue('subtype') eq 'product'>
<cfset feed = $.getBean('content').getFeed()/>
<cfset content = $.getBean('content').loadBy(contentID=$.content().getValue('ContentID'))/>
<cfset content.get('searchexclude','1')>
<cfset tabs = content.getKidsIterator()>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-3 hidden-xs">
<img alt="image" src="#$.createHREFForImage(fileid = $.content().getValue('InformationGraphic'),size='homeheader')#" />
</div>
<div class="col-md-8 col-sm-9 col-sm-12">
<div class="tabbed-content button-tabs">
<ul class="tabs">
<cfset index = 0/>
<cfloop condition="tabs.hasNext()">
<cfset index = index +1/>
<cfset tab=tabs.next()/>
<li id="page#index#" #iif(index eq 1,de('class="active"'),de(''))#>
<div class="tab-title">
<span>#tab.getValue('title')#</span>
</div>
<div class="tab-content">
#tab.getValue('body')#
<!--- get files if this is the downloads tab --->
<cfset feed = $.getBean('content').getFeed()/>
<cfset content = $.getBean('content').loadBy(contentID=tab.getValue('ContentID'))/>
<cfset content.get('searchexclude','1')>
<cfset files = content.getKidsIterator()>
<cfif files.hasNext()>
<ul style="list-style: none;">
<cfloop condition="files.hasNext()">
<cfset download=files.next()/>
<li>
<a class="link-icon" href="#$.getURLForFile(fileID=download.getValue('fileID'))#" target="_blank">
#$.content().getfileIcon(download.getValue('fileID'),"2x")# #download.getValue('title')#
</a>
</li>
</cfloop>
</ul>
</cfif>
</div>
</li>
</cfloop>
</ul>
</div>
</div>
</div>
</div>
</cfif>
The above sample code uses a custom function that was added to the theme's contentRenderer.cfm file, "getFileIcon()".
contentRenderer.cfm
/**
* @hint returns an icon (<i>) string for the associated file type
*/
public string function getfileIcon(required string contentType,string size = "2x") {
var returnString = '<i class="fal fa-file fa-#arguments.size#"></i>';
switch(arguments.contentType){
case 'pdf':
returnString = '<i class="fal fa-file-pdf fa-#arguments.size#"></i>';
break;
/* Add other subtypes here */
}
return returnString;
}
