Image Gallery Tool for Editor.js

!JavaScript !CSS3 !HTML5

Image Gallery Tool is a plugin for Editor.js that's provides an Image Gallery Block and using the available options, it's possible to adapt the layout as you like.

Works only with image URLs and requires no server-side uploader.


Installation

$3

Get the package

``shell
npm i --save-dev @rodrigoodhin/image-gallery
`

Include module at your application

`javascript
const ImageGallery = require('@rodrigoodhin/image-gallery');
`

$3

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

$3

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@rodrigoodhin/image-gallery@latest

Then require this script on page with Editor.js.

`html

`

Usage

Add a new Tool to the tools property of the Editor.js initial config.

`javascript
var editor = EditorJS({
...

tools: {
...
imageGallery: ImageGallery,
}

...
});
`

Config Params

This Tool has no config params

Tool's settings

![](https://i.ibb.co/zFhjngg/options-small.png)

1. Show and hide image urls
2. Activate/Deactivate dark mode
3. Set default layout
4. Set horizontal layout
5. Set square layout
6. Set layout with gap
7. Set layout width fixed size

Output data

| Field | Type | Description |
| ------------------- | ---------- | ----------------------------- |
| urls | []string | image's url |
| editImages | boolean | Show and hide image urls |
| bkgMode | boolean | Activate/Deactivate dark mode |
| layoutDefault | boolean | Set default layout |
| layoutHorizontal | boolean | Set horizontal layout |
| layoutSquare | boolean | Set square layout |
| layoutWithGap | boolean | Set layout with gap |
| layoutWithFixedSize | boolean | Set layout width fixed size |


`json
{
"type": "imageGallery",
"data": {
"urls": [
"https://www.nawpic.com/media/2020/ocean-nawpic-15.jpg",
"https://www.nawpic.com/media/2020/ocean-nawpic-18.jpg",
"https://wallpapercave.com/wp/6L4TVMP.jpg",
"https://wallpapercave.com/wp/wp9810772.jpg",
"https://wallpapercave.com/wp/wp9121482.jpg",
"https://wallpapercave.com/wp/wp9100484.jpg",
"https://cdn.wallpapersafari.com/94/22/4H3mFp.jpg"
],
"editImages": true,
"bkgMode": false,
"layoutDefault": true,
"layoutHorizontal": false,
"layoutSquare": false,
"layoutWithGap": false,
"layoutWithFixedSize": false
}
}
``

Example

JSFiddle with an example

LICENSE

MIT License