Skip to content

Instantly share code, notes, and snippets.

@jsieber
Last active August 29, 2015 13:57
Show Gist options
  • Save jsieber/9907308 to your computer and use it in GitHub Desktop.
Save jsieber/9907308 to your computer and use it in GitHub Desktop.
Masonry Gallery for MuraCMS
.masonryItem {
width: 8.65%;
margin-bottom: 10px;
float: left;
}
.masonryItem.w2 {
width: 19.5%;
margin-bottom: 10px;
}
#masonryContainer {
margin: 0 auto;
padding-top: 20px;
}
<!---
1. A Gallery class extension titled Masonry.
2. This function needs to be added to the site or theme eventHandler.cfc
3. masonry.pkgd.min.js located in theme js folder
4. masonry.css loaded into page head.
--->
<cffunction name="onGalleryMasonryBodyRender" access="public">
<cfargument name="$" hint="mura scope" />
<cfscript>
var masonryMarkup = "";
var aspect = "masonryItem";
var iterator = $.content().getKidsIterator();
iterator.setNextN(100);
</cfscript>
<cfif iterator.recordCount()>
<cfsavecontent variable="masonryMarkup">
<cfoutput>
<div id="masonryContainer">
<cfloop from=1 to="#iterator.recordCount()#" index="p">
<cfloop condition="#iterator.hasNext()#">
<cfset item = iterator.next() />
<cfimage action="info" source="#item.getImageUrl()#" structName="imgInfo">
<cfif imgInfo.height gt imgInfo.width>
<cfset aspect = "masonryItem" />
<cfelse>
<cfset aspect = "masonryItem w2">
</cfif>
<div class="#aspect#">
<a href="#item.getImageUrl(size="large")#">
<img src="#item.getImageUrl()#" alt="#htmlEditFormat(item.getValue('title'))#" />
</a>
</div>
</cfloop>
</cfloop>
</div>
<script src="#$.siteConfig('themeAssetPath')#/assets/PixmaWide/js/masonry.pkgd.min.js"></script>
</cfoutput>
<script type="text/javascript">
var container = document.querySelector('#masonryContainer');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded(container, function() {
msnry = new Masonry(container, {
// options
columnWidth: 136,
itemSelector: '.masonryItem',
gutter: 4,
isFitWidth: true
});
});
</script>
</cfsavecontent>
<cfelse>
<cfset masonryMarkup = "<p>No images exist under this gallery!</p>">
</cfif>
<cfreturn masonryMarkup>
</cffunction>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment