@rodrigoodhin/editorjs-image-gallery

Image Gallery Tool for Editor.js

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

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

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

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