https://github.com/simplajs/simpla-img
An editable image you can update inline, built on Simpla
https://github.com/simplajs/simpla-img
content-management editable image javascript polymer simpla web-components
Last synced: 3 months ago
JSON representation
An editable image you can update inline, built on Simpla
- Host: GitHub
- URL: https://github.com/simplajs/simpla-img
- Owner: simplajs
- License: mit
- Created: 2015-10-09T06:28:16.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-15T05:54:17.000Z (almost 8 years ago)
- Last Synced: 2024-11-10T08:55:38.325Z (11 months ago)
- Topics: content-management, editable, image, javascript, polymer, simpla, web-components
- Language: HTML
- Homepage: https://www.simplajs.org
- Size: 600 KB
- Stars: 6
- Watchers: 3
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simpla Image
[![Build status][travis-badge]][travis-url] ![Size][size-badge] ![Version][bower-badge] [![Published][webcomponents-badge]][webcomponents-url]
Simpla-img is an editable image that can updated seamlessly inline on your page. It extends `![]()
` and is built on the [Simpla][simpla] content system.
```html
![]()
```
### Contents
- [Installation and setup](#installation-and-setup)
- [Editing content](#editing-content)
- [Saving content](#saving-content)
- [Initializing with static content](#initializing-with-static-content)
- [Custom placeholders](#custom-placeholders)
- [Readonly](#readonly)
- [Contributing](#contributing)
### Resources
- [API reference][api]
- [Demo][demo]
- [License][license]
## Installation and setup
Install simpla-img with Bower (Yarn support coming soon)
```sh
$ bower i simpla-img --save
```
[Setup Simpla][simpla-setup] on your page, then import simpla-img into your ``
```html
```
Create an editable image by extending `![]()
` with the `is` attribute. Give each img a unique `path`, where it will store its content in your project
```html
![]()
```
## Editing content
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.
```js
// Enter edit mode
Simpla.editable(true);
```
```html
![]()
```
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.
## Saving content
Save a simpla-img by calling Simpla's `save` method, which will save all modified content on the page. It returns a promise.
```js
// Save all modified Simpla content
Simpla.save();
```
> You must be authenticated with Simpla before saving content
## Initializing with static content
You can set a static `src` of a simpla-img just like you would with a regular `![]()
`. If content for the image's `path` exists on Simpla's API, the locally set `src` will be overwritten
```html
```
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 `src` set in production. If a newer image gets saved you will experience FOUC (Flash Of Unformatted Content) when the old one is overwritten
## Custom placeholders
You can set custom placeholders (displayed when simpla-img is editable and doesn't have content) with a `placeholder` attribute
```html
![]()
```
`placeholder` takes any valid CSS `background` value (colors, `url()`, etc). The placeholder does not impact the image's default size or aspect ratio.
## Readonly
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.
```html
![]()
```
## Contributing
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][simpla]
[simpla]: https://www.simpla.io
[simpla-setup]: https://docs.simpla.io/guides/get-started.html
[api]: https://www.webcomponents.org/element/simplaio/simpla-img/page/API.md
[demo]: https://www.webcomponents.org/element/simplaio/simpla-img/demo/demo/index.html
[license]: https://github.com/simplaio/simpla-img/blob/master/LICENSE
[bower-badge]: https://img.shields.io/bower/v/simpla-img.svg
[travis-badge]: https://img.shields.io/travis/simplaio/simpla-img.svg
[travis-url]: https://travis-ci.org/simplaio/simpla-img
[size-badge]: http://img.badgesize.io/simplaio/simpla-img/master/simpla-img.html?compression=gzip&label=render_bundle_%28gzip%29
[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://www.webcomponents.org/element/simplaio/simpla-img