Account
Menu
Buy now →

Image

Image block upload, resize, and editing.

Access:

app.image
app.getModule('image')
app.invoke('image.method', …)

open#

Opens image insert or edit dropdown depending on current block.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.open({}, { button });

openWrap#

Opens image wrap style dropdown.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.openWrap({}, { button });

openOutset#

Opens image outset style dropdown.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.openOutset({}, { button });

wrap#

Applies wrap classname/style to current image block.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.wrap({ classname: 'left' });

outset#

Applies outset classname to current image block.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.outset({ classname: 'shadow' });

edit#

Opens image edit dropdown with props/upload/select tabs.

Parameters:

  • params (object) — command or form parameters
  • button (HTMLElement | string) — toolbar or UI button element
  • el (HTMLElement | string) — DOM element
app.image.edit({}, { button });

save#

Updates current image block from form params.

Parameters:

  • params (object) — command or form parameters
app.image.save({ alt: 'Photo' });

insertByUpload#

Inserts image block(s) from upload response after restoring selection.

Parameters:

  • response (any) — upload or API response object
app.image.insertByUpload(response);

insertByUrl#

Inserts image from URL form field.

Parameters:

  • params (object) — command or form parameters
app.image.insertByUrl({ url: 'https://...' });

insertFromSelect#

Inserts image from gallery select click.

Parameters:

  • event (Event) — native DOM event
app.image.insertFromSelect({ event });

insert#

Closes dropdown and inserts one or more image blocks from data.

Parameters:

  • response (any) — upload or API response object
  • eventType (any) — event name suffix used when emitting (e.g. insert, upload)
app.image.insert({ file: { url, id } });

insertFromAI#

Inserts AI-generated images as image blocks.

Parameters:

  • images (Array) — array of AI image results
  • options (object) — object with the keys below
    • target (string) — element or CSS selector to insert relative to instead of the current caret position (forwarded to inserter.insertBlock)
    • targetPosition (string) — 'before' or 'after' the target element (default 'after')
    • caret (any) — caret placement after insert: 'before', 'after' (default), or false to leave selection untouched
app.image.insertFromAI(images, { targetPosition: 'after' });

update#

Updates current image block from upload or props data.

Parameters:

  • params (object) — command or form parameters
  • closePopup (boolean) — whether to close dropdown after save
  • upload (boolean) — whether data comes from upload flow

Returns: Block

app.image.update({ src: url }, { upload: true });

get#

Returns current block if it is an image block.

Returns: Block|null

app.image.get();

remove#

Removes current image block.

app.image.remove();

error#

Emits image:upload:error event.

Parameters:

  • response (any) — upload or API response object
app.image.error(response);

changeFromSelect#

Updates current image from gallery select.

Parameters:

  • event (Event) — native DOM event
app.image.changeFromSelect({ event });

Form observer: returns obj when image.link option enabled.

Parameters:

  • obj (any) — observer field config object

Returns: object|false

app.image.observeImageLink(fieldConfig);

observeImageCaption#

Form observer: returns obj when current image is a figure.

Parameters:

  • obj (any) — observer field config object

Returns: object|false

app.image.observeImageCaption(fieldConfig);

observeImageWidth#

Form observer: returns obj when image.width option enabled.

Parameters:

  • obj (any) — observer field config object

Returns: object|false

app.image.observeImageWidth(fieldConfig);

observeImageHeight#

Form observer: returns obj when image.height option enabled.

Parameters:

  • obj (any) — observer field config object

Returns: object|false

app.image.observeImageHeight(fieldConfig);