Gallery Plugin

What's better than a picture? A lot of pictures !
Let's push even higher with tons of customizable layouts to explore !

Add a beautiful gallery!

Usage

/* Editor */

import { RicosEditor } from 'ricos-editor';

import { pluginGallery } from 'wix-rich-content-plugin-gallery';

<RicosEditor plugins={[pluginGallery(GalleryConfig)]} />;

/* Viewer */

import { RicosViewer } from 'ricos-viewer';

import { pluginGallery } from 'wix-rich-content-plugin-gallery/viewer';

<RicosViewer plugins={[pluginGallery(GalleryConfig)]} />;

Config

upload functions

note

upload functions are passed through RichContentEditor

e.g.

<RicosEditor plugins={plugins} content={content}>

<RichContentEditor helpers={{ handleFileUpload }} />

</RicosEditor>

handleFileUpload: (files: File[], updateEntity: UpdateEntityFunction) => void

handleFileSelection: (updateEntity: UpdateEntityFunction) => void

handleFileUpload is a function provided to handle media uploads from the native file input.
handleFileSelection is a function provided to handle media uploads from a custom file input.

In both functions when the upload phase is done the updateEntity callback should be called with an object containing the data, error (upon faliure) and index (for multiple file uploads).

UpdateEntityFunction<T>: ({ data: T, error: MediaUploadError, index: number }) => void

data?: {

id: string,

original_file_name: string,

file_name: string,

width: number,

height: number,

}

MediaUploadError?: {

msg?: string | JSX.Element;

key?: MediaUploadErrorKey;

args?: Record<string, string | number>;

}

Scrolling Element

The scrollingElement is required for the gallery to work properly, should return the element containing the editor\gallery in the page.
If not provided it would fall back to document.body.

scrollingElement: () => JSX.Element;

modify default config

note

To enable video use accept: 'image/*,video/*'.

accept: 'image/* | video/*' | 'image/*,video/*',

defaultData: {

config: {

size: 'small' | 'fullWidth' |'content',

alignment: 'left' | 'right' | 'center',

spacing: number,

disableExpand: boolean,

},

},

Default value:

accept: '.jpg,.png,.gif,.jpeg,.jpe,.jfif,.bmp,.heic,.heif,.tfif,.tif,.webp',

config: {

size: 'content',

alignment: 'center',

spacing: 0,

},

Viewer Config

disableExpand: boolean,