Editmode Standalone

Editmode allows you to turn plain text in your website into easily inline-editable bits of content that can be managed by anyone with no technical knowledge.

Installation

From CDN: Add the following script to the end of your <head> section.

<script src="https://unpkg.com/editmode-standalone@^1/dist/standalone.js"></script>

Set an Editmode Project ID: Add the following script to the end of your <head> or <body> section.

<script>
  EditmodeStandAlone.projectId = "YOUR-PROJECT-ID"
</script>

Don't have a project id? Sign up for one here

Usage

Single Content

<p chunk-id="some-chunk-identifier">I'm a placeholder</p>

<img chunk-id="some-img-chunk-identifier"  src="https://backup-img-src.png"/>

Collection

<template collection-id="some-collection-identifier" class="container-class" itemClass="classForEachItems">
  <p field-id="field-id-or-name">Placeholder for this field</p>

  <img field-id="field-id-or-name"/>
</template>

Filter Collection

Use tags attribute to filter collection items by tags, use limit attribute to limit how many collection items will be rendered.

Seperate the tags with space for multiple tags tags="heropost recentposts"

<template collection-id="some-collection-identifier" tags="recentposts" limit="3">
  <p field-id="field-id-or-name">Placeholder for this field</p>

  <img field-id="field-id-or-name"/>
</template>

Variable Parsing

<p variables="{name: 'Jen'}" chunk-id="some-chunk-identifier">Hi, User</p>

Working with Image Transformation

Use transform attribute to perform real-time image transformations to deliver perfect images to the end-users.

This chunk should render an image with 200 x 200 dimension:

<img chunk-id="some-img-chunk-identifier"  transform="w-200 h-200 c-force" />

Please see complete list of transformation parameters

Demo

Open in Repl.it

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Jen Villaganas}

_{Jen Villaganas}

This project follows the all-contributors specification. Contributions of any kind welcome!