LiveWhale CMS 2.0+ adds new tools for managing the page editing experience.
Sometimes you want to allow editors to insert design elements onto a page without either coding them into the page template or making them each as separate widgets. This new tool, Content Layouts, allows you to define editable layouts that can be placed on any page.
For each content layout you want to add to your site, upload to /_ingredients/templates/wysiwyg:
an .xml file that contains the markup for your layout, described below
and a .png screenshot of the element that editors will see as a Preview (optional)
The basic structure of /_ingredients/templates/wysiwyg/wysiwyg.my-template.xml is:
<title>My Content Layout</title>
<description>Short description of this layout.</description>
HTML markup goes here.
<content>, a number of special markup elements are supported.
We use the TinyMCE Noneditable plugin to allow editable and non-editable regions within a content layout. By default, every element is editable unless it or one of its parents contains
<div class="mceNonEditable">This text can't be edited.</div>
Best practice: Put
class="mceNonEditable" on the outermost element of your content layout, and then only add
class="mceEditable" to children that you want editors to be able to type into.
class="mceEditable" on block-level elements like
<div>, don’t put it directly on header or paragraph elements. Sometimes when editors are typing or hitting return, the current header/paragraph can get duplicated.
A layout block is a repeatable design element that you want editors to be able to add/remove/rearrange instances of within a single content layout. For instance, in a grid design, your layout block might be a single grid element, so editors can add/delete them as they work.
<div class="lw_layout_block">This markup can be duplicated.</div>
When editing a page, these blocks will get + (duplicate) and x (delete) buttons added to them, as well as arrow buttons for rearranging the order.
Note: In order for the duplicate and delete buttons to work as expected, the
lw_layout_block class cannot be attached to the outermost element of your markup.
<!-- Incorrect: .lw_layout_block on the outermost element will cause unexpected behavior -->
class="lw_layout_block" is only supported on the
<div> HTML element.
Inside a content layout or layout block, you can add
data-lw-placeholder to dictate paragraphs, headers, or links that will appear empty on the front-end but will receive placeholder text when editing.
data-lw-placeholder="true" for a default “Add text” placeholder.
data-lw-placeholder="Add program description" to define custom placeholder text.
The placeholder attribute also works on links. When an editor clicks the placeholder, the Add Link window will pop up.
<a class="my-custom-button" data-lw-placeholder="true"/>
To add a placeholder image to a content layout, use the following syntax, defining the width and height of the image you want. When an editor clicks the placeholder, the Add Image window will pop up, and the image size/cropping tools will be locked to the dimensions defined in the template:
<div class="lw_layout_image" data-width="400" data-height="300"/>
Here’s a complete example that combines all of the above tools to code a three-column content layout. All of the
cta classes are examples that you could replace with your own theme classes.