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>

You need to add a it.setNextN(0) or the loop will stop at the page size of the content node (default=10)

My only thought on this is that you're always adding in all 4 breakpoints for the columns, which is unnecessary. If you're going to make 3 cols for example at sm, md, or lg, then you only need sm class, as md and lg will inherit. Might be better to pass in the requested columns at their respective breakpoints:

$.dspColumnizedChildren(xsColumns=3, smColumns=3, mdColumns=3, lgColumns=3, imageSize='medium')

Cool nonetheless to see other people doing this. :)

@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.