@rodrigoodhin/image-gallery v1.0.1

Image Gallery Tool for Editor.js

Provides Image Gallery Blocks for the Editor.js.

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

Installation

Install via NPM

Get the package

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

Include module at your application

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

Download to your project's source dir

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

Load from CDN

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.

<script src="..."></script>

Usage

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

var editor = EditorJS({
  ...
  
  tools: {
    ...
    imageGallery: ImageGallery,
  }
  
  ...
});

Config Params

This Tool has no config params

Tool's settings

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

{
  "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
  }
}

JSFiddle with an example