# ImageStyleOptionDefinition

interface

The image styling option definition descriptor.

This definition should be implemented in the `Image` plugin [configuration](module_image_imageconfig-ImageConfig.md#member-styles) for:

* customizing one of the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) by providing the proper name of the default style and the properties that should be overridden,
* or defining a completely custom styling option by providing a custom name and implementing the following properties.

```typescript
import fullSizeIcon from 'path/to/icon.svg';

const imageStyleOptionDefinition = {
	name: 'fullSize',
	icon: fullSizeIcon,
	title: 'Full size image',
	className: 'image-full-size',
	modelElements: [ 'imageBlock', 'imageInline' ]
}
```

The styling option will be registered as the button under the name `'imageStyle:{name}'` in the [UI components factory](module_ui_componentfactory-ComponentFactory.md) (this functionality is provided by the [`ImageStyleUI`](module_image_imagestyle_imagestyleui-ImageStyleUI.md) plugin).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L642)

<a id="properties">

## Properties

<a id="member-className">

### `className?: string`

The CSS class used to represent the style in the view. It should be used only for the non-default styles.

If this property is not defined, its value is inherited from the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) addressed in the name property.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L691)

<a id="member-icon">

### `icon: string`

One of the following to be used when creating the styles's button:

* an SVG icon source (as an XML string),
* one of the keys in [`DEFAULT_ICONS`](module_image_imagestyle_utils.md#constant-DEFAULT_ICONS) to use one of default icons provided by the plugin.

If this property is not defined, its value is inherited from the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) addressed in the name property.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L672)

<a id="member-isDefault">

### `isDefault?: boolean`

When set, the style will be used as the default one for the model elements listed in the `modelElements` property. A default style does not apply any CSS class to the view element.

If this property is not defined, its value is inherited from the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) addressed in the name property.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L661)

<a id="member-modelElements">

### `modelElements: Array<string>`

The list of the names of the model elements that are supported by the style. The possible values are:

* `[ 'imageBlock' ]` if the style can be applied to the image type introduced by the [`ImageBlockEditing`](module_image_image_imageblockediting-ImageBlockEditing.md) plugin,
* `[ 'imageInline' ]` if the style can be applied to the image type introduced by the [`ImageInlineEditing`](module_image_image_imageinlineediting-ImageInlineEditing.md) plugin,
* `[ 'imageInline', 'imageBlock' ]` if the style can be applied to both image types introduced by the plugins mentioned above.

This property determines which model element names work with the style. If the model element name of the currently selected image is different, upon executing the [`imageStyle`](module_image_imagestyle_imagestylecommand-ImageStyleCommand.md#function-execute) command the image type (model element name) will automatically change.

If this property is not defined, its value is inherited from the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) addressed in the name property.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L710)

<a id="member-name">

### `name: string`

The unique name of the styling option. It will be used to:

* refer to one of the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) or define the custom style,
* store the chosen style in the model by setting the `imageStyle` attribute of the model image element,
* as a value of the [`imageStyle` command](module_image_imagestyle_imagestylecommand-ImageStyleCommand.md#function-execute),
* when registering a button for the style in the following manner: (`'imageStyle:{name}'`).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L652)

<a id="member-title">

### `title: string`

The styles's title. Setting `title` to one of [`localizedDefaultStylesTitles`](module_image_imagestyle_imagestyleui-ImageStyleUI.md#member-localizedDefaultStylesTitles) will automatically translate it to the language of the editor.

If this property is not defined, its value is inherited from the [default styling options](module_image_imagestyle_utils.md#constant-DEFAULT_OPTIONS) addressed in the name property.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imageconfig.ts#L682)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)