A I L Mr Ronnie Duke • @modmedia Tuesday, June 11, 13
Aug 29, 2014
A! I!"#$% L&&' () M*r( +%,#!-
Ronnie Duke • @modmedia
Tuesday, June 11, 13
Ab&*) R&!!#%
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
•Enough CFML to be dangerous (Frogrammer)
Tuesday, June 11, 13
Ab&*) R&!!#%
•Based in Oregon, USA
•Working with HTML since ’99
•Starting using Mura (Sava) in 2008
•Primarily Front End
•Enough CFML to be dangerous (Frogrammer)
•Self-proclaimed Muravangelist™
Tuesday, June 11, 13
A M*r( +%,% C(!:
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
•Be as flexible as needed
Tuesday, June 11, 13
A M*r( +%,% C(!:
•Extend core Mura functionality
•Contain custom logic
•Retrieve information from the Mura architecture
•Be as flexible as needed
•Make your site beautiful
Tuesday, June 11, 13
T&&." f&r )/%,%"
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
•Mobile Rendering
Tuesday, June 11, 13
T&&." f&r )/%,%"
•Templates & Overrides
•Mura $cope
•Extended Attributes
•Content Iterator
•Styling and image management
•Mobile Rendering
•Site Bundles
Tuesday, June 11, 13
+%,% S)r*0)*r%
Tuesday, June 11, 13
+%,% S)r*0)*r%Base Frameworks(i.e. Bootstrap)
Tuesday, June 11, 13
+%,% S)r*0)*r%CFStatic CompiledFiles
Tuesday, June 11, 13
+%,% S)r*0)*r%
Class Extensions
Tuesday, June 11, 13
+%,% S)r*0)*r%
Mura Function Overrides
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme Specific CSS/LESS
Tuesday, June 11, 13
+%,% S)r*0)*r%
Display ObjectOverrides
Tuesday, June 11, 13
+%,% S)r*0)*r%
Override Mura events
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme SpecificImages
Tuesday, June 11, 13
+%,% S)r*0)*r%
Theme SpecificJavascript
Tuesday, June 11, 13
+%,% S)r*0)*r%
Language Settings
Tuesday, June 11, 13
+%,% S)r*0)*r%
Layout Templates &Includes
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
•Content Renderer
Tuesday, June 11, 13
T%,1.()%" (!$ Ov%rr#$%"
•Custom page templates
•Theme level overrides
•Content Renderer
•Event Handler
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
<cfoutput><div>Hello World</div>
</cfoutput>
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Standard Includes
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Bootstrap Slider
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Body
Your markup – Your way
Tuesday, June 11, 13
C*")&, P(-% T%,1.()%"
Display Regions
Your markup – Your way
Tuesday, June 11, 13
+%,% L%v%. Ov%rr#$%"
Default display objects
Control default Mura Objects
Tuesday, June 11, 13
+%,% L%v%. Ov%rr#$%"
Theme display objects
Control default Mura Objects
Tuesday, June 11, 13
D%,&Templates and overrides
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
•Write your own custom methods
Tuesday, June 11, 13
C&!)%!) R%!$%r%r
•Override Mura Functions
•Write your own custom methods
•Control site settings
Tuesday, June 11, 13
C&!)%!) R%!$%r%rControl Site Settings
Tuesday, June 11, 13
C&!)%!) R%!$%r%r<cfcomponent extends="mura.content.contentRenderer">
<cfscript> //this.jslib="jquery"; //this.navOffSet=0; //this.navDepthLimit=1000; //this.navParentIdx=2; //this.navGrandParentIdx=3; //this.navDepthAjust=0; //this.navSelfIdx=1; //this.jsLibLoaded=false; //this.longDateFormat="long"; //this.shortDateFormat="short"; //this.showMetaList="jpg,jpeg,png,gif"; //this.showInlineEditor=true; //this.imageInList="jpg,jpeg,png,gif"; //this.directImages=true; //this.personalization="user";
Control Site Settings
Tuesday, June 11, 13
Ev%!) H(!$.%r
Tuesday, June 11, 13
Ev%!) H(!$.%r
•Override default Mura events
Tuesday, June 11, 13
Ev%!) H(!$.%r
•Override default Mura events
•Create custom actions
Tuesday, June 11, 13
Ev%!) H(!$.%rOverride Page Behavior
Tuesday, June 11, 13
Ev%!) H(!$.%rOverride Page Behavior
<cffunction name="onPageDefaultBodyRender" output="true" returntype="void"><cfargument name="$">
<cfoutput><h1>Hello World</h1>#$.setDynamicContent($.content("body"))#
</cfoutput></cffunction>
Display custom content on Body Render
Tuesday, June 11, 13
Ev%!) H(!$.%rHook into other Mura events
Tuesday, June 11, 13
Ev%!) H(!$.%rHook into other Mura events
<cffunction name="onAfterFormSubmitSave"> <cfargument name="$"> <cfif $.content('title') eq "Contact Us"> <cfmail to="#request.SUBMITTEREMAIL#" from="[email protected]" subject="Thank You!" server="#$.siteConfig('mailServerIP')#" port="#$.siteConfig('mailServerSMTPPort')#" username="#$.siteConfig('mailServerUsername')#" password="#$.siteConfig('mailServerPassword')#" useSSL="yes" useTLS="yes" type="html"> <cfoutput> <p>Dear #request.SUBMITTERNAME#,</p> <h4>Thank you for contacting us!</h4> <p>We will be in touch shortly</p> </cfoutput> <p>Sincerely,<br/> Jim Halpert</p> </cfmail> </cfif></cffunction>
Send an email after a form submits
Tuesday, June 11, 13
Ev%!) H(!$.%rLots to choose from!
Tuesday, June 11, 13
Ev%!) H(!$.%rLots to choose from!Application EventsonApplicationLoad onSiteSessionStartonGlobalSessionStart onSiteSessionEndonSiteMissingTemplate onSiteErroronGlobalError onBeforeAutoUpdateonAfterAutoUpdate onGlobalThreatDetectAdmin Rendering EventsonDashboardPrimaryToponDashboardPrimaryBottomonDashboardSidebarToponDashboardSidebarBottomonContentEditonGroupEditonUserEditonFEToolbarAdd (renders in front end toolbar add list)onGroupEdit (renders as a tab when editing a group)onUserEdit (renders as a tab when editing a User)onContentEdit (Node Level Only) (renders as a tab when editing a User)10nAfterSiteDeployRender (renders above list of sites after manually deploying a site)onAdminModuleNav (renders inside admin left nav)Staging to Production EventsonSiteDeploy onBeforeSiteDeployonAfterSiteDeploy onAfterSiteDeployRender Login EventsonSiteLogin onGlobalLoginonSiteLoginSuccess onGlobalLoginSuccessonSiteLoginBlocked onGlobalLoginBlockedContent Events
onBeforeContentSave (Node Level Only)onBefore{type}SaveonBefore{type}{subType}SaveonAfter{type}SaveonAfter{type}{subType}SaveonAfterContentSave (Node Level Only)onBeforeContentDelete (Node Level Only)onBefore{type}deleteonBefore{type}{subType}deleteonAfterContentDelete (Node Level Only)onAfter{type}deleteonAfter{type}{subType}deleteonBeforeContentSortonAfterContentSortonBeforeContentDeleteVersionHistory (Node Level Only)onBefore{type}DeleteVersionHistoryonBefore{type}{subType}DeleteVersionHistoryonAfterDeleteVersionHistory (Node Level Only)onAfter{type}DeleteVersionHistoryonAfter{type}{subType}DeleteVersionHistoryonBeforeContentDeleteVersion (Node Level Only)onBefore{type}ContentDeleteVersiononBefore{type}{subType}ContentDeleteVersiononAfterContentDeleteVersion (Node Level Only)onAfter{type}ContentDeleteVersion (Node Level Only)onAfter{type}{subType}ContentDeleteVersionContent Comment EventsonBeforeCommentUpdate onBeforeCommentCreate
onBeforeCommentSave onBeforeCommentDeleteonAfterCommentUpdate onAfterCommentCreateonAfterCommentSave onAfterCommentDeleteCategory EventsonBeforeCategoryUpdate onBeforeCategoryCreateonBeforeCategorySave onBeforeCategoryDeleteonAfterCategoryUpdate onAfterCategoryCreateonAfterCategorySave onAfterCategoryDeleteFeed EventsonBeforeFeedUpdate onBeforeFeedCreateonBeforeFeedSave onBeforeFeedDeleteonAfterFeedUpdate onAfterFeedCreateonAfterFeedSave onAfterFeedDeleteUser EventsonBeforeUserUpdate onBeforeUserCreateonBeforeUserSave onBeforeUserDeleteonBeforeUser{subType}Update onBeforeUser{subType}CreateonBeforeUser{subType}Save onBeforeUser{subType}DeleteonAfterUserUpdate onAfterUserCreateonAfterUserSave onAfterUserDeleteonAfterUser{subType}Update onAfterUser{subType}CreateonAfterUser{subType}Save onAfterUser{subType}Delete
Tuesday, June 11, 13
D%,&Event Handler
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
$.content(‘title’)
Get the page’s title
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
$.content(‘title’)
Get the page’s title
$.content().getImageURL(‘large’)
Get the associated image
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
Tuesday, June 11, 13
M*r( S0&1%Access content attributes
AudienceBodycontentidCreatedCredits DisplayDisplayStartDisplaystopFeatureStartFeatureStop
FileExtFileIDFilenameTitleHTMLTitleURLTitleMenuTitleKeyPoints LastUpdateLastUpdateBy
MetaDescMetaKeyWordsNotes ReleaseDateSummaryTagsTemplateTypeSubType
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!
Tuesday, June 11, 13
M*r( S0&1%Insert Mura objects
$.dspObject(‘component’,‘Some Component’)
Insert user-editable content into your templates!
$.dspThemeInclude(‘display_objects/my_object.cfm’)
Include custom files
Tuesday, June 11, 13
+% [,*r(] )(-
Tuesday, June 11, 13
+% [,*r(] )(-
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]
Tuesday, June 11, 13
+% [,*r(] )(-
Access custom methods created in contentRenderer.cfc
[mura]dspMyFunction()[/mura]
Access Mura Scope methods in the Mura admin
[mura]$.dspObject(‘component’,‘Some Component’)[/mura]
Tuesday, June 11, 13
D%,&Mura $cope
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"Collect and Store Additional Data
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Tuesday, June 11, 13
2)%!$%$ A))r#b*)%"What you can extend
Everything!
Tuesday, June 11, 13
0&!3-.4,..0f,
Deploy custom class extensions directly from your theme!
Tuesday, June 11, 13
0&!3-.4,..0f,<theme> <extensions> <extension type="Folder" subType="Quiz" hasBody="0" hasSummary="0"> <attributeset name="Attribute Set Name" container="Basic"> <attribute name="attribute1Name" label="Attribute 1" type="TextBox" hint="Attribute 1 Hint" defaultValue="Attribute 1" required="true" validation="" regex="" message="" optionList="" optionLabel="" /> </attributeset> </extension> </extensions></theme>
Tuesday, June 11, 13
D%,&Extended Attributes
Tuesday, June 11, 13
C&!)%!) I)%r()&r
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
•Use your own markup
Tuesday, June 11, 13
C&!)%!) I)%r()&r
•Retrieve and display Mura content
•Utilize Mura Content Collections
•Use your own markup
•No need to write custom queries
Tuesday, June 11, 13
C&!)%!) I)%r()&rSetup your feed
Tuesday, June 11, 13
C&!)%!) I)%r()&rSetup your feed
Tuesday, June 11, 13
C&!)%!) I)%r()&rLoop through content
Tuesday, June 11, 13
C&!)%!) I)%r()&r<cfset feed=$.getBean("feed").loadBy(name="From Our Blog",siteID=$.event("siteid"))><cfset iterator=feed.getIterator()>
<cfif iterator.hasNext()> <div> <cfloop condition="iterator.hasNext()"> <cfset item=iterator.next()> <div>Looped Content</div> </cfloop> </div> </cfif>
Loop through content
Tuesday, June 11, 13
D%,&Content Iterator
Tuesday, June 11, 13
I,(-%" & S)5.#!-
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome
Tuesday, June 11, 13
I,(-%" & S)5.#!-
•Dynamic CSS Hooks
•LESS
•CF Static
•Mura Bootstrap
•Font Awesome
•Robust Image Management
Tuesday, June 11, 13
D5!(,#0 CSS H&&'"
Hook into top level Body ID’s, Containers, and Nav Items
Tuesday, June 11, 13
LESS CSS
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
• MUCH quicker!
Tuesday, June 11, 13
LESS CSS
• Dynamic CSS Language
• Built in functions and variables
• MUCH quicker!
•If you haven’t started using LESS, today is the day!
Tuesday, June 11, 13
CF S)()#0
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
•Create dependencies and alternate IE includes
Tuesday, June 11, 13
CF S)()#0
•Automatically compress and minify CSS, LESS, Javascript & CoffeeScript
•Create dependencies and alternate IE includes
•All minified files are saved – automatically updated
Tuesday, June 11, 13
D%,&CF Static & LESS
Tuesday, June 11, 13
M*r( B&&)")r(1
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout
Tuesday, June 11, 13
M*r( B&&)")r(1
•Default theme for Mura 6
•Scaffolding
•Uses LESS
•Built in fluid, responsive layout
•Carousel function
Tuesday, June 11, 13
F&!) Aw%"&,%
Tuesday, June 11, 13
F&!) Aw%"&,%
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
•CSS Control
Tuesday, June 11, 13
F&!) Aw%"&,%
•Built into Bootstrap theme
•302 icons to date
•Vector icons (scalability)
•CSS Control
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
•Admin image editing
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
•Custom image sizes
•Admin image editing
•Custom sizes are cached
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
<img src=”#$.content().getImageURL(width=100,height=100)#” />
Pass in custom sizes
Tuesday, June 11, 13
R&b*") I,(-% M(!(-%,%!)
<img src=”#$.content().getImageURL()#” />
Use associated image in your templates
<img src=”#$.content().getImageURL(width=100,height=100)#” />
Pass in custom sizes
<img src=”#$.content().getImageURL(‘myCustomImgSize’)#” />
Use custom image sizes
Tuesday, June 11, 13
D%,&Images
Tuesday, June 11, 13
M&b#.% R%!$%r#!-
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
•jQuery Mobile
Tuesday, June 11, 13
M&b#.% R%!$%r#!-•Automatically detect and
serve up mobile content
•jQuery Mobile
•Admin mobile controls
Tuesday, June 11, 13
S#)% B*!$.%"
Tuesday, June 11, 13
S#)% B*!$.%"
•Distribute themes with content
Tuesday, June 11, 13
S#)% B*!$.%"
•Distribute themes with content
•Includes all pages, form responses, images, version history, plugins, users etc.
Tuesday, June 11, 13
S#)% B*!$.%"
Tuesday, June 11, 13
+(!'"!Ronnie Duke
themodmedia.com
@modmedia
Tuesday, June 11, 13