Blog

Mura CMS Theme Development: Mura Iterator

August 20, 2015 by Ronnie Duke

Whenever you see a theme that has things like a blog, portfolio, our team, etc, that is a collection of content that is being looped through from the database. With Mura CMS, you can easily create collections of content, and output them on any page.

In this tutorial, we are going to create a collection of team members for a website.

Create New Folder 

Create a new folder called Team Members in your site manager:

Note: Make sure the Navigation is set to "No" since we are just using this folder as a repository for our team members.

Local Index for the Team Members

Local indexes are collections of content within the Mura admin. Click here to learn more about creating local indexes.

Create a Custom Method

This is where we are going to create our iterator from the Team Feed, and loop through the output. Similar to the Custom Methods tutorial, we need to open up the theme contentRenderer.cfc and create a new function:

<cffunction name="dspTeamFeed" output="yes">
<cfsavecontent variable="ret">
<!--- Content Goes Here --->
</cfsavecontent>
<cfreturn ret>
</cffunction>

The first thing we need to do is tell Mura which feed we want to iterate from:

<cfset feed=$.getBean('feed').loadBy(name='Team Feed')>

Next, we need to set a new iterator, using the feed source:

<cfset iterator=feed.getIterator()>

We only want the markup to show if content actually exists in our feed:

<!--- Only display the following if there are items in the iterator --->
<cfif iterator.hasNext()>
<!--- Looped Content Here --->
<cfelse>
<div class="alert alert-danger">Sorry, your feed has no items</div>
</cfif>

Now, we're ready to loop through the items within our feed:

<cfloop condition="iterator.hasNext()">
<cfset item=iterator.next()>
<div class="col-md-3">
<div class="well">
<img src="#item.getImageURL('medium')#" alt="#item.getTitle()#">
<h4>#item.getTitle()#</h4>
#item.getSummary()#
</div>
</div>
</cfloop>

The Final Function

<cffunction name="dspTeamFeed" output="yes">
<cfsavecontent variable="ret">
<cfset feed=$.getBean('feed').loadBy(name='Team Feed')>
<cfset iterator=feed.getIterator()>
<!--- Only display the following if there are items in the iterator --->
<cfif iterator.hasNext()>
<div class="row our-team">
<cfloop condition="iterator.hasNext()">
<cfset item=iterator.next()>
<div class="col-md-3">
<div class="well">
<img src="#item.getImageURL('medium')#" alt="#item.getTitle()#">
<h4>#item.getTitle()#</h4>
#item.getSummary()#
</div>
</div>
</cfloop>
</div>
</cfif>
</cfsavecontent>
<cfreturn ret>
</cffunction>

 

Adding the Feed to the About Us Page

On a typical 'About Us' page, you might have a short blurb about the company, and then display the custom function within the body:

When we publish and view the page, you should see the team feed being output:

And, with a little bit of CSS magic, we can easily style this output to be a bit more pretty:

There are a lot of use cases to use the Mura Iterator to build your themes. The great thing about Mura Iterators is that it give the user control of the content, while displaying in your own theme markup.

Also see Mura CMS Documentation: Mura Iterators

More About Mura Themes

Mura CMS v6 Documentation: Front End Workflow
http://docs.getmura.com/v6/front-end/a-typical-workflow/

Download Mura Themes: GetMura.com/themes

Premium Mura CMS Themes: Themeforest.net

This article is part of an original series at Tuts+.com titled "Theme development with Mura CMS" by Ronnie Duke. Further documentation for Mura CMS developers and content managers is available at docs.getmura.com. Learn more about Mura's powerful features and flexible options at www.getmura.com.

About the Author

Ronnie Duke

Ronnie Duke is a product development engineer and Marketo Certified Expert at Blue River Interactive Group, creators of the Mura Platform. He enjoys solving technical challenges and creating great experiences for users. 

@RonnieTheDuke

Comments

Post a Comment

Required Field