Skip to content

Instantly share code, notes, and snippets.

@stevewithington
Last active December 30, 2015 12:49
Show Gist options
  • Save stevewithington/7831588 to your computer and use it in GitHub Desktop.
Save stevewithington/7831588 to your computer and use it in GitHub Desktop.
Mura CMS : This example shows how you could columnize Folder content quickly, and easily.
<!---
Drop this into your config.xml.cfm file, then reload the application
to create a new Folder/Columns content type
--->
<extension type="Folder" subType="Columns">
<attributeset name="Column Settings" container="Basic">
<attribute
name="columnCount"
label="# Columns"
hint="Select the number of columns you wish to split the body area into."
type="SelectBox"
defaultValue="2"
required="false"
validation=""
regex=""
message=""
optionList="1^2^3^4^5^6^7^8^9^10^11^12"
optionLabelList="1^2^3^4^5^6^7^8^9^10^11^12" />
</attributeset>
</extension>
<!---
Drop these methods into your Site or Theme eventHandler.cfc
--->
<cffunction access="public" name="onFolderColumnsBodyRender" output="false">
<cfargument name="$" />
<cfreturn columnizeFolderContent($=arguments.$, columnCount=$.content('columnCount')) />
</cffunction>
<cffunction access="public" name="columnizeFolderContent" output="false">
<cfargument name="$" />
<cfargument name="columnCount" type="numeric" default="2" />
<cfargument name="columnClass" type="string" default="column col-md-#Round(12/arguments.columnCount)#" />
<cfscript>
var item = '';
var str = '';
var it = arguments.$.getKidsIterator().setNextN(0); // get all records on one page
var totalItems = it.getRecordcount();
var totalColumns = Val(arguments.columnCount);
var itemsPerColumn = Round(totalItems/totalColumns);
var actualCols = 0;
</cfscript>
<cfsavecontent variable="str"><cfoutput>
<style>
/*
You will want to create your own CSS, and move it into your
theme's CSS. This is here for demo purposes only.
*/
/*div[class*="column"] { border-left: 2px solid black; }*/
div[class*="column"] .itemWrapper { margin:0 0 2em 0; clear:both; display:block;}
.itemImage {float:left; width:auto; min-height: 250px; margin:0 1em 1em 0;}
.itemTitle {font-size: 1.2em;font-weight: bold;}
</style>
<div class="row">
<cfif it.hasNext()>
<cfloop condition="it.hasNext()">
<cfif not it.currentIndex() mod itemsPerColumn and actualCols lt totalColumns>
<div class="#columnClass#"><cfset actualCols++ />
</cfif>
<!--- THE ITEM --->
<cfset item = it.next() />
<div class="itemWrapper">
<cfif Len($.getURLForImage(item.getValue('fileid')))>
<div class="itemImage">
<img src="#$.getURLForImage(fileid=item.getValue('fileid'), size='small')#" alt="#HTMLEditFormat(item.getValue('menuTitle'))#" />
</div>
</cfif>
<div class="itemTitle">
<a href="#item.getValue('url')#">
#HTMLEditFormat(item.getValue('menuTitle'))#
</a>
</div>
<cfif Len(Trim(item.getValue('summary')))>
<div class="itemSummary">
#item.getValue('summary')#
</div>
</cfif>
<!--- You could easily output any other item attributes here --->
</div>
<cfif not it.currentIndex() mod itemsPerColumn and actualCols lt totalColumns>
</div><!-- @end column -->
</cfif>
</cfloop>
</cfif>
</div><!-- @end row -->
</cfoutput></cfsavecontent>
<cfreturn str />
</cffunction>
@gknight593
Copy link

How do you display the columns on the home template? I tried adding through the Layouts & Objects, but Columns are not listed as an Available Content Object. I tried Folders which display the name of the columns, but when added to the Main Content Content Objects, nothing displays.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment