Newly Purchased Memories

    @rodrigoodhin/editorjs-image-gallery

    0.1.0 • Public • Published

    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

    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

    Install

    npm i @rodrigoodhin/editorjs-image-gallery

    DownloadsWeekly Downloads

    94

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    46.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • rodrigoodhin