Editor Link Modals

light grey surface with concaving and protruding triangles creating shadows and contrast

Front matter is a great way to structure content and metadata for a Jekyll website. We’ve made some updates to allow you to further integrate your front matter into your editing experience.

The right sidebar is the default place to edit your front matter in the Visual and Content Editors. CloudCannon builds an easy to use interface around each of your fields, controlled by an intuitive naming scheme. With larger sets of front matter, it’s sometimes difficult for editors to connect where the changes appear. Editor Links help bridge this context gap.

Editor Links are contextual pointers to front matter fields and other pages in the Visual Editor. The default behaviour of a front matter Editor Link is to highlight the associated front matter field in the sidebar. For example, an Edit Title button that highlights the page.title field so editors know where to change it.

Editor Links can be styled to fit the brand of your site, and are not displayed on your live site.

Example front matter Editor Link

Modals

We’ve added the option to have Editor Links open front matter fields in a modal pop up. Use this option to keep your editors inside the Visual Editor where context is at its peak.

Modals display the linked field only and provide more screen space than the sidebar. This is particularly useful with Rich Text fields.

Example modal front matter Editor Link

Open Editor Links in a modal by setting the data-cms-editor-link-style attribute to modal, or by hiding them in the sidebar.

<a href="cloudcannon:#title" data-cms-editor-link-style="modal">Edit the title</a>

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.

Hiding fields

You can hide specific fields in the sidebar to prevent changes from editors, or to move front matter editing into modals.

Editor Links pointing to hidden fields will open in a modal as they can’t be highlighted in the sidebar.

Hide fields by prefixing the key with an underscore (e.g. _hidden_text) or with editing options (e.g. setting _options.layout.hidden to true).


See our official documentation for more details on setting up your first Editor Link.

You might also be interested in

Photo illustration of CloudCannon logo and an upward view of a building resembling a giant eye

CloudCannon’s 2022 Highlights and 2023 Roadmap

CloudCannon

28 January 2023

Read more

CloudCannon’s SvelteKit support out of beta 🎉

CloudCannon

16 December 2022

Read more
Photo illustration of CloudCannon logo with curly brackets on a rendered background

Save time with CloudCannon's Snippets

David Large

10 December 2022

Read more