03. Live Edit

Live edit

You can define editable regions in your template where the user will be able to type text and Drag and Drop modules

Example:

<div class="edit"  field="your_region_name" rel="content">
      <div class="element">Edit your content</div>
</div>

To define your editable region you must set few parameters on the html element in your template

• You must add class "edit"
• Add attribute field="some name" and set the name of your field.
• The main editable regionmust have field="content"

The "rel" attribute

The rel attribute is responsible for the scope of your contenteditable field. You can define custom scope and reuse the content of the editable regions across the whole website.

• Add attribute rel="content" and set the scope of your field.
  • rel="content" this field changes for ever page or post
  • rel="global" this field changes for the whole site
  • rel="page" this field changes for every page
  • rel="post" this field changes for every post
  • rel="inherit" this field changes for every main page, but not is sup-pages and posts
  • rel="your_cutom_rel" you can define your own scope

The "rel-id" attribute

The rel-id attribute is optional and allows you to pull editable regions that belong to another content

Sample layout with sidebar

note the usage of the rel tag

<?php
/*

type: layout
content_type: dynamic
name: Blog
description: Blog
*/
?>
<?php include TEMPLATE_DIR. "header.php"; ?>
<div id="content">
  <div class="container">
    <div class="row">
      <div class="span8">
        <div class="edit"  field="content" rel="page">
          <h2>My Page</h2>
          <p class="element">My content</p>
        </div>
      </div>
      <div class="span3 offset1">
         <div class="edit"  field="content" rel="inherit">
          This content is the same for every sub-page
        </div>
      </div>
    </div>
  </div>
</div>
<?php include TEMPLATE_DIR. "footer.php"; ?>

Editable regions from another page

The rel-id attribute will pull the content from another place

//getting the post with if 5 and making it editable

<h2 class="edit"  field="title" rel="content" rel-id="5">
The post title goes here
</h2>

<div class="edit"  field="content" rel="content" rel-id="5">
      The post content will appear here
</div>

<div class="edit"  field="my_custom_region" rel="content" rel-id="5">
      You can pull any region
</div>

Editable regions anywhere

Because you can define custom rel and rel-id attributed you can use editable regions from anywhere and the parser will replace them with the actual content from the database.

Here is how we can make editable region in our module: example

<div class="edit" data-field="my_module_title" rel="my_module" rel-id="my_custom_id">
Edit your text
</div>