Simpla-img is an editable image that can updated seamlessly inline on your page. It extends <img> and is built on the Simpla content system.
<img is="simpla-img" path="/img">- Installation and setup
- Editing content
- Saving content
- Initializing with static content
- Custom placeholders
- Readonly
- Contributing
Install simpla-img with Bower (Yarn support coming soon)
$ bower i simpla-img --saveSetup Simpla on your page, then import simpla-img into your <head>
<link rel="import" href="/bower_components/simpla-img/simpla-img.html">Create an editable image by extending <img> with the is attribute. Give each img a unique path, where it will store its content in your project
<img is="simpla-img" path="/img">Edit a simpla-img by entering edit mode with Simpla (which makes all Simpla elements on a page editable) or setting the editable property directly on an element.
// Enter edit mode
Simpla.editable(true);<!-- Make only this image editable -->
<img is="simpla-img" path="/img" editable>Entering edit mode with Simpla is the recommended way to edit images. It ensures all elements on a page remain in sync and updates Simpla's public 'editable' state, which other elements may rely on.
Save a simpla-img by calling Simpla's save method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla content
Simpla.save();You must be authenticated with Simpla before saving content
You can set a static src of a simpla-img just like you would with a regular <img>. If content for the image's path exists on Simpla's API, the locally set src will be overwritten
<img is="simpla-img" src="/local/img.jpg" path="/img">Initializing with static content is useful for converting existing images to Simpla images, or bootstrapping a project with predefined content. By setting src and then calling Simpla.save() you can easily set content directly to Simpla.
Since static content is always overwritten by remote data, you should not have
srcset in production. If a newer image gets saved you will experience FOUC (Flash Of Unformatted Content) when the old one is overwritten
You can set custom placeholders (displayed when simpla-img is editable and doesn't have content) with a placeholder attribute
<img is="simpla-img" path="/img" placeholder="url(https://placehold.it/200x200)">placeholder takes any valid CSS background value (colors, url(), etc). The placeholder does not impact the image's default size or aspect ratio.
Simpla-img has a readonly property that stops it from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-img to purely consume and display content from Simpla's API.
<img is="simpla-img" path="/img" readonly>If you find any issues with simpla-img please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla