I recently launched a new website for my employer, https://www.chasolutions.com using Masa and Coldfusion. The previous version of the site also used Mura/Masa and was initially setup about eight years ago. I’ve learned a lot about Mura/Masa in that time, and was happy to finally have the ability to start the site over from scratch (with the exception of importing all the news posts from the old site into the new one).

We take advantage of Masa’s class extensions to add custom attributes to our many custom Page subtypes (Market, Solution, Project, Employee, etc). Each of these makes use of related content sets as well. Our marketing department no longer needs to worry about which template to assign to each page, as almost every page on the site uses the default template, and the true template is assigned by the subtype and where the object falls in the site tree.

I created custom functions in the contentRenderer which can be called to display any content object in a ‘card’ view – these are called from page templates, component templates, and from the collection module, eliminating duplicate code.

I find the Collection module to be one of Masa’s strongest features, and we use it throughout the site. I created a few custom layout options including a ‘Load More’ layout which initially displays only the filter controls with no actual objects, and uses Mura.js to load the collection objects via processAsyncObject. This can be seen on the Projects and News landing pages. Some of the collection layouts also make use of custom configurator options which allow for the marketing team to make visual adjustments without changing code.

We use photos as background images throughout the site and these needed to look good at all screen sizes, so I added a ‘focal point adjustment’ feature so an object’s associated image can be clicked within the Masa administrator and X/Y positions are saved to extended attribute fields and used in the background-position CSS.

I created a photo gallery module that allows marketing to mix-and-match different gallery templates to display project photos in various layouts without any code knowledge or even knowledge of specific classes/styles. Marketing also has full control over the content displayed in modules throughout the site like the image carousels, the ‘what we do / why we do it’ boxes, and history timeline on the Company Overview page. The ‘What/Why’ boxes are another custom module that is reused a few times on the site and is sort of like a simplified collection module with a single fixed template.

I was asked to make all contact forms display and submit from modal windows, which I accomplished by submitting all forms to a custom API endpoint defined in eventHandler which handles validation and returning errors via JSON instead of them being hardcoded into the subsequent page load.

While implementing the site, I ran into a few Masa bugs or shortcomings, most of which I’ve submitted here and have already been rolled into the last couple updates! One simple but useful addition that might need some explanation was the custom objectconfigurator position options – this allows the classes assigned to modules through the configurator (under Style>Layout>Width) to be Bootstrap-standard (.col-1) instead of Masa-specific (.mura-one). I find this to be helpful to keep styling consistent between objects that are ‘baked’ into the page templates and ones that may be added by editors via inline edit mode.

BY FAR the most annoying outstanding bug is the issue with modules and inline editing. I had considered not moving past 7.3.11 where this bug does not exist, but there were too many other good fixes/features implemented since this version. I’ve setup my bookmarket workaround on our marketing staff’s PCs and have shown them how to use it for the time being… but I’m hoping this gets fixed in the near future as it makes inline editing of modules difficult.