Blog

Intro to Mura 7 Display Objects

July 20, 2017 by Michael Evangelista

One of the core concepts in Mura CMS development is the use of "display objects" to render self-contained, portable bits of content within predetermined "layout regions" which can be included on any part of a Mura page.

In Mura 6, the options for placing and managing objects within these regions were built into the admin area, with a highly-customized interface utilizing form lists and boxes to represent the available objects and containers. While this worked well for most scenarios, the limitations were apparent when making multiple edits and revisions, as the admin changes had to be saved each time in order to see the altered output on the rendered page, adding a clunky place-publish-view-revise routine to the workflow.

Then, along came Mura 7 with the game-changing "inline edit" mode, which adds a visual interface for placing and managing objects directly on front-end pages, with instant previews rendered seamlessly via ajax. All of Mura's default object types can be inserted and managed along with custom display objects created specifically for the site or project. At MuraCon 2017, Steve Withington of Blue River presented a brief lightning talk highlighting the ease of use and flexibility that are baked in to Mura's display object architecture.

As Steve expertly demonstrates, creating a custom display object in Mura 7 is as simple as inserting a few files containing specially-formatted code into the site or theme file structure. These files can be easily copied for reuse, or distributed as part of a Mura plugin for even more versatility.

Intro to Mura 7 Display Objects: portable, extendable, powerful! New on the Mura Platform blog!

Perhaps the most powerful aspect of display object rendering is contained in the "custom configurator" options.
An object's configurator allows for variable contents to be rendered as part of the output. For example, a configurator might contain special inputs for custom headings, text and icons within an otherwise static block of HTML, or allow the user to select from a list of predefined options when placing the object on the page.

Understanding and mastering the use of display objects in Mura will add a wide array of options and solutions to any developer's toolbox. As shown in Steve's quick walk-through, use cases range from displaying a single dynamic line of text in one specific part of a page, to running and rendering an entire complex javascript or CFML application. With even the most basic understanding of display object functionality and creation, opportunities to put them to use will become plentiful, even in the simplest of sites.

You'll learn:

  • When to use display objects in your Mura projects (practically anywhere you like)
  • Several different approaches to creating and using custom display objects
  • How to store and reference global assets for use with multiple display objects
  • How to create a custom configurator for display objects with variable options
  • Where to find example display objects to jump start your development
  • How to make your configurators blend seamlessly with standard Mura styling
  • Most importantly, how to make it rain emojis!

Learn more from Steve Withington and the rest of the Mura Platform team at MuraCon 2018, on April 4th and 5th in Sacramento, California.

Related Resources

See this Video Presentation on YouTube: youtu.be/4Ex4CYDRrJ0
MuraCon 2017 Video Playlist: youtube.com/playlist?list=PLcKlNuw7UGaodvcjgPujAUdFN4rambGta
Presentation Slides: muracon.com/muracon-us-2017/schedule/intro-to-mura-7-display-objects/presentation-slides/
Download or Contribute to Mura CMS on Github: github.com/blueriver/muracms
Mura Information, Blog, Support, and Documentation: getmura.com

Related Documentation

Custom Display Object Configurators
docs.getmura.com/v7/mura-ui-markup-conventions/custom-display-object-configurators
Display Objects in Mura 7
docs.getmura.com/v7/mura-developers/mura-rendering/mura-display-objects