Last active
June 1, 2016 20:39
-
-
Save seanschroeder/7475238 to your computer and use it in GitHub Desktop.
Example of how to output different grids for a Mura Folder when using a custom subtype and extended attributes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <cfset collayout = ""> | |
| <cfset gridimagesize = ""> | |
| <cfset modrows = ""> | |
| <!--- check attribute value for layout of folder / cats ---> | |
| <cfswitch expression="#$.content().getValue('gridLayout')#"> | |
| <!--- set grid item class / set custom image size / logic on when to start a new 'row' ---> | |
| <!--- if 3 col layout ---> | |
| <cfcase value="3col"> | |
| <cfset collayout = "col-4"> | |
| <cfset gridimagesize = "gridcol4"> | |
| <cfset modrows = "3"> | |
| </cfcase> | |
| <!--- if 3 col layout ---> | |
| <cfcase value="4col"> | |
| <cfset collayout = "col-3"> | |
| <cfset gridimagesize = "gridcol3"> | |
| <cfset modrows = "4"> | |
| </cfcase> | |
| <!--- default to 3 col layout ---> | |
| <cfdefaultcase> | |
| <cfset collayout = "col-4"> | |
| <cfset gridimagesize = "gridcol4"> | |
| <cfset modrows = "3"> | |
| </cfdefaultcase> | |
| </cfswitch> | |
| <cfoutput> | |
| <cfset iterator=$.content().getKidsIterator()> | |
| <cfif iterator.hasNext()> | |
| <div class="animal-grid"> | |
| <div class="grid"> | |
| <div class="grid-row"> | |
| <cfloop condition="iterator.hasNext()"> | |
| <cfset item=iterator.next()> | |
| <!--- set class on grid item / css hook ---> | |
| <div class="grid-item #collayout#"> | |
| <a href="#item.getURL()#"> | |
| <!--- determine what custom image size to load ---> | |
| <img src="#item.getImageURL(gridimagesize)#"> | |
| </a> | |
| <h3> | |
| <a href="#item.getURL()#">#item.getMenuTitle()#</a> | |
| </h3> | |
| <!--- customized folder to also output petSex and petBreed ---> | |
| <h4>#item.getValue('petSex')# / #item.getValue('petBreed')#</h4> | |
| </div> | |
| <!--- logic for when to start a new row ---> | |
| <cfif iterator.currentIndex() mod #modrows# eq 0 and iterator.hasNext()> | |
| </div> | |
| <div class="grid-row"> | |
| </cfif> | |
| </cfloop> | |
| </div> | |
| </div> | |
| </div> | |
| </cfif> | |
| </cfoutput> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment