Inline Editing with Page Meta - adamjimenez/shiftlib GitHub Wiki

Inline editing can be expanded so that fields are defined within the page itself. When enabled a floating wrench icon 🔧 will appear on editable pages which can be clicked to trigger the editor.

This is an example of a front-end catcher template, let's call it pages.catcher.php.

<?php
$page_data = $cms->get_page();
$meta = $page_data['meta'];
?>

<div class="container">
	<div class="row">
		<div class="col-8">
			<div sl-name="logo" sl-type="upload">
				<?=image($meta['logo']); ?>
			</div>

			<h1>
				<div sl-name="heading" sl-type="heading">
					<?=$meta['heading']; ?>
				</div>
			</h1>

			<div sl-name="copy" sl-type="editor">
				<?=$meta['copy']; ?>
			</div>
		</div>
	</div>
</div>

<?php 
load_js('shiftlib');
$cms->load_page_editor($page_data);
?>

The page content is stored internally in the cms_pages table and is accessed via $page_data = $cms->get_page();. We pass this data to the page editor via: $cms->load_page_editor($page_data);

This references the parameter name which is stored in the page meta. It can take the form of a field name e.g. heading or can even be a nested parameter e.g. slides[0].image. Note that no table fields need to be created as it will all be stored in the page meta.

This references the field type which will determine which editor component is used. The current supported values are:

text

Single-line text field

heading

Single-line text field with formatting

copy

TinyMCE Rich text editor

upload

File upload

block

Editor.js block editor