{"id":13769760,"url":"https://github.com/VolgaIgor/editorjs-gallery","last_synced_at":"2025-05-11T02:33:26.284Z","repository":{"id":50395324,"uuid":"515914391","full_name":"VolgaIgor/editorjs-gallery","owner":"VolgaIgor","description":"Gallery block for Editor.js with multi-loading and sorting","archived":false,"fork":false,"pushed_at":"2024-06-13T14:34:43.000Z","size":1210,"stargazers_count":10,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-07-18T01:52:32.025Z","etag":null,"topics":["editorjs","editorjs-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VolgaIgor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"neSpecc","open_collective":"editorjs"}},"created_at":"2022-07-20T09:22:11.000Z","updated_at":"2024-07-11T16:27:05.000Z","dependencies_parsed_at":"2024-06-13T16:17:34.430Z","dependency_job_id":"193e6a1d-2192-477c-850a-5e4257f0b3d1","html_url":"https://github.com/VolgaIgor/editorjs-gallery","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VolgaIgor%2Feditorjs-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VolgaIgor%2Feditorjs-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VolgaIgor%2Feditorjs-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VolgaIgor%2Feditorjs-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VolgaIgor","download_url":"https://codeload.github.com/VolgaIgor/editorjs-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213832271,"owners_count":15644971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editorjs","editorjs-plugin"],"created_at":"2024-08-03T17:00:31.275Z","updated_at":"2024-08-03T17:02:31.352Z","avatar_url":"https://github.com/VolgaIgor.png","language":"JavaScript","funding_links":["https://github.com/sponsors/neSpecc","https://opencollective.com/editorjs"],"categories":["Tools"],"sub_categories":["Block Tools"],"readme":"![](https://badgen.net/badge/Editor.js/v2.0/blue)\n\n# Gallery block for Editor.js\n\nLoader based on [editor-js/image](https://github.com/editor-js/image).\n\n### Preview\n![Preview image](https://raw.githubusercontent.com/VolgaIgor/editorjs-gallery/master/assets/screenshot.png)\n\n### Features\n* Multiple downloads\n* Sorting uploaded images (providing by [SortableJS](https://github.com/SortableJS/Sortable))\n* Limit the number of images\n* Two view selector (slider and fit)\n\n## Installation\n### Install via NPM\nGet the package\n\n```shell\n$ npm i @kiberpro/editorjs-gallery\n```\n\nInclude module at your application\n\n```javascript\nimport ImageGallery from '@kiberpro/editorjs-gallery';\n```\n\n### Load from CDN\n\nYou can load a specific version of the package from jsDelivr CDN.\n\nRequire this script on a page with Editor.js.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@kiberpro/editorjs-gallery\"\u003e\u003c/script\u003e\n```\n\n### Download to your project's source dir\n\n1. Upload folder `dist` from repository\n2. Add `dist/gallery.umd.js` file to your page.\n\n### Enable sorting\nTo enable sorting, include the SortableJS library and send it to the configuration:\n```shell\n$ npm i sortablejs\n```\n```javascript\nimport Sortable from 'sortablejs';\n```\n\n## Usage\n```javascript\nvar editor = EditorJS({\n  // ...\n  tools: {\n    // ...\n    gallery: {\n      class: ImageGallery,\n      config: {\n        sortableJs: Sortable,\n        endpoints: {\n          byFile: 'http://localhost:8008/uploadFile',\n        }\n      },\n    },\n  }\n  // ...\n});\n```\n\n## Config Params\n\nGallery block supports these configuration parameters:\n\n| Field | Type     | Description        |\n| ----- | -------- | ------------------ |\n| sortableJs | `object` | SortableJS library |\n| maxElementCount | `int` | (default: `undefined`) Maximum allowed number of images |\n| buttonContent | `string` | (default: `Select an Image`) Label for upload button |\n| uploader | `{{uploadByFile: function}}` | Optional custom uploading method. [See details](https://github.com/editor-js/image#providing-custom-uploading-methods). |\n| actions | `[{name: string, icon: string, title: string}]` | Array with custom switches |\n| [And others from the original ](https://github.com/editor-js/image#config-params) |\n\nAlso you can add a localized string:\n```javascript\nnew Editorjs({\n  // ...\n  tools: {\n    gallery: ImageGallery\n  },\n  i18n: {\n    tools: {\n      gallery: {\n        'Select an Image': 'Выберите изображение',\n        'Delete': 'Удалить',\n        'Gallery caption': 'Подпись'\n      }\n    }\n  },\n})\n```\n\n## Output data\n\nThis Tool returns `data` with following format\n\n| Field          | Type       | Description                      |\n| -------------- | ---------  | -------------------------------- |\n| files          | `object[]` | Uploaded file datas. Any data got from backend uploader. Always contain the `url` property                  |\n| source         | `string`   | image's source                   |\n| style          | `string`   | (`fit` of `slider`) gallery view |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVolgaIgor%2Feditorjs-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVolgaIgor%2Feditorjs-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVolgaIgor%2Feditorjs-gallery/lists"}