Last active
December 30, 2015 12:49
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--- | |
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--- | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.