Skip to content

Instantly share code, notes, and snippets.

@modmedia
Last active January 2, 2016 15:19
Show Gist options
  • Save modmedia/8322835 to your computer and use it in GitHub Desktop.
Save modmedia/8322835 to your computer and use it in GitHub Desktop.
Create an isotope gallery with Mura Categories as filters
<!--- if using CFStatic --->
<cf_CacheOMatic key="isotopeCSS">
#$.static()
.include('/css/isotope/')
.renderIncludes('css')#
</cf_CacheOMatic>
<!--- Static CSS Include --->
<!--- <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/isotope/isotope.css"> --->
<!--- if using CFStatic --->
<cf_CacheOMatic key="isotopeJS">
#$.static()
.include('/js/isotope/')
.renderIncludes('js')#
</cf_CacheOMatic>
<!--- Static JS Include --->
<!--- <script src="#$.siteConfig('themeAssetPath')#/js/isotope/isotope.js"></script> --->
<!--- Add this as a custom display object, page template, or Extended Attribute handler
(i.e. display_objects/custom/extensions/dsp_Folder_Portfolio.cfm) --->
<cfoutput>
<!--- Include your isotope CSS include file in the header --->
<cfset $.addToHTMLHeadQueue("#$.siteConfig('themeAssetPath')#/templates/inc/isotopeCSS.cfm")>
<!--- Include your isotope CSS include file in the footer--->
<cfset $.addToHTMLFootQueue("#$.siteConfig('themeAssetPath')#/templates/inc/isotopeJS.cfm")>
<div class="row-fluid">
<div class="filter-box clearfix"><span id="filter">Filter<i class="icon-sort"></i></span>
<ul class='sort' id="option">
<li><a class="active" href="##" data-filter="*">All</a></li>
<!--- get categories from Mura --->
<cfset catBean = $.getBean('category').loadBy(name="Portfolio Item")>
<cfset catFeed = catBean.getKidsQuery()>
<cfset catList = ValueList(catFeed.name)>
<cfloop list="#catList#" index="category">
<li><a href="##" data-filter=".#$.createCSSID(category)#">#category#</a></li>
</cfloop>
</ul>
</div>
<cfset feed=$.content().getContentID()>
<cfset iterator=$.getBean("content").loadBy(contentid='#feed#').getKidsIterator()>
<cfif iterator.hasNext()>
<ul class="gallery four_col clearfix">
<cfloop condition="iterator.hasNext()">
<cfset item=iterator.next()>
<cfset categories = item.getCategoriesIterator()>
<li class="
<cfif categories.hasNext()>
<cfloop condition="categories.hasNext()">
<cfset category=categories.next()>
#$.createCSSID(category.getName())#
</cfloop>
</cfif>"> <a class="hover" href="#item.getURL()#"> <img src="#item.getImageURL()#" alt="" /><span class="plus"></span></a>
<div class="entry-summary">
<h4><a href="#item.getURL()#">#item.getTitle()#</a></h4>
#item.getSummary()#
</div>
</li>
</cfloop>
</ul>
</cfif>
</div>
</cfoutput>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment