Editing

Editor Links

Editor Links allow you to link to other sections of the CloudCannon interface from within the Visual Editor. Use them to create edit buttons for your collection items and blog posts that are not visible on your live site. Alternatively, add front matter Editor Links to open the front matter editor at specified fields.

Editor Links are prefixed with cloudcannon: and match the URL structure of the CloudCannon app, for example:

  • <a href="cloudcannon:collections/_staff/">Edit all staff</a>
  • <a href="cloudcannon:collections/_staff/jane-doe.md">Edit Jane Doe</a>
  • <a href="cloudcannon:collections/_posts/2015-07-30-welcome-post.md">Edit Welcome Post</a>
  • <a href="cloudcannon:status">Link to Site Status and Recent Activity</a>

Front matter Editor Links are prefixed with cloudcannon:# and match the Liquid format used to reference them, for example:

  • <a href="cloudcannon:#title">Edit the title</a>
  • <a href="cloudcannon:#array[1]">Edit the first array item</a>
  • <a href="cloudcannon:#array[+]">Create a new item in an array</a>
  • <a href="cloudcannon:#object.title">Edit a variable within an object</a>
  • <a href="cloudcannon:#object.array">Edit an array within an object</a>
  • <a href="cloudcannon:#object.array[0].title">Edit the title of the first array item within an object</a>

Posts

To have edit links for posts in a list, add an Editor Link in the blog post loop:

<ul class="blog-posts">
  {% for post in site.posts %}
    <li class="blog-post">
      <h3>{{ post.title }}</h3>
      <p>{{ post.excerpt }}</p>
      <a href="{{ post.url }}">Read more</a>

      <!-- Editor Link -->
      <a href="cloudcannon:collections/{{ post.path }}" class="editor-link">Edit post</a>
    </li>
  {% endfor %}
</ul>

CloudCannon blog posts with edit buttons

Collection Items

To have an edit link on a collection item page, add the following to the page:

<a href="cloudcannon:collections/{{ page.relative_path }}" class="editor-link">Edit</a>

If you are using a custom collections_dir include site.collections_dir in your editor link:

<a href="cloudcannon:collections/{{ site.collections_dir }}/{{ page.relative_path }}" class="editor-link">Edit</a>

When generating Editor Links in Jekyll, collection items should use relative_path, while posts and pages should use path.

Toggling Visiblilty

To show Editor Links inside the editor and hide them on the live site:

  1. Give the links an appropriate class name (e.g. .editor-link).
  2. Use the following CSS to show the links inside the editor only:
.editor-link {
  display: none;
}

.cms-editor-active .editor-link {
  display: block;
}

CloudCannon adds the .cms-editor-active class to the body of your site in the Visual Editor. The class is not on the live site.

Front matter can be highlighted within the sidebar or displayed standalone in a modal pop up. To change how an editor link opens:

  1. Add the data-cms-editor-link-style attribute
  2. Set the attribute’s value to modal or sidebar (optional)
<a href="cloudcannon:#title" data-cms-editor-link-style="modal">Edit the title</a>

Using modal-style editor links that point directly to hidden fields show the field.

CloudCannon adds the cms-editor-link-dirty class to Editor Links after changes are made using the modal style. Use this to add styles indicating that changes are pending in the editor.