Mura CMS : How to iterate over a content item's children and output an image and link, in a columnized format.

dspColumnizedChildren.cfm

<!--- 
	1) Drop this in your Site or Theme contentRenderer.cfc
	2) Call this on a template: #$.dspColumnizedChildren(columns=3, imageSize='medium')#
	3) Or within the editor via Mura tags [m]$.dspColumnizedChildren(columns=3, imageSize='medium')[/m]
--->
<cffunction access="public" output="false" returntype="any" name="dspColumnizedChildren">
	<cfargument name="columns" default="3" type="numeric" />
	<cfargument name="imageSize" default="medium" type="string" />
	<cfscript>
		var str = '';
		var it = variables.$.content().getKidsIterator().setNextN(0);
		var totalItems = it.getRecordcount();
		var itemsPerRow =  arguments.columns > 0 && arguments.columns < 13 ? arguments.columns : 3;
		var bsClasses = ['col-sm-', 'col-md-', 'col-lg-'];
		var colSize = Round(12/itemsPerRow);
		var columnClass = 'col-xs-12';

		for ( var class in bsClasses ) {
			columnClass &= ' ' & class & colSize;
		}
	</cfscript>

	<cfif totalItems>
		<cfsavecontent variable="str">
			<style>
				.centered { text-align: center; } /* you really don't need this */
			</style>
			<cfoutput>
				<div class="container">
					<cfloop condition="it.hasNext()">

						<!--- Start Row --->
						<cfif not it.currentIndex() mod itemsPerRow>
							<div class="row">
						</cfif>

							<!--- The Item --->
							<cfset item = it.next()>
							<div class="#columnClass# centered">
								<!--- primary image --->
								<cfset img = $.getURLForImage(fileid=item.getValue('fileid'), size=arguments.imageSize) />
								<cfif Len(img)>
									<a href="#item.getValue('url')#" title="#HTMLEditFormat(item.getValue('menutitle'))#">
										<img src="#img#" alt="#HTMLEditFormat(item.getValue('menutitle'))#" />
									</a>
								</cfif>

								<!--- menu link --->
								<div class="centered">
									<a href="#item.getValue('url')#">
										#HTMLEditFormat(item.getValue('menutitle'))#
									</a>
								</div>
							</div>
							<!--- /The Item --->

						<!--- /End Row --->
						<cfif not it.currentIndex() mod itemsPerRow OR it.currentIndex() eq totalItems>
							</div>
						</cfif>
					</cfloop>
				</div>
				<!--- /container --->
			</cfoutput>
		</cfsavecontent>
	</cfif>
	<!--- /if totalItems --->

	<cfreturn str />
</cffunction>

@mattlevine, updated, thanks!

@davidpanzarella, this is just a proof of concept and yes, it's quite easy to create additional arguments for each breakpoint.

@stevewithington, yes i assumed. I have something very similar that also does search, filter, messaging, template layout (like yours above), and pagination. Kinda like dspFolder on steroids. I'd love to show you sometime if you're interested.