# image/image/utils

module

<a id="functions">

## Functions

<a id="function-createBlockImageViewElement">

### `createBlockImageViewElement( writer ) → ViewContainerElement` _(internal)_

Creates a view element representing the block image.

```html
<figure class="image"><img></img></figure>
```

Note that `alt` and `src` attributes are converted separately, so they are not included.

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

#### Parameters

* `writer: ViewDowncastWriter`

#### Returns

* `ViewContainerElement`

<a id="function-createInlineImageViewElement">

### `createInlineImageViewElement( writer ) → ViewContainerElement` _(internal)_

Creates a view element representing the inline image.

```html
<span class="image-inline"><img></img></span>
```

Note that `alt` and `src` attributes are converted separately, so they are not included.

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

#### Parameters

* `writer: ViewDowncastWriter`

#### Returns

* `ViewContainerElement`

<a id="function-determineImageTypeForInsertionAtSelection">

### `determineImageTypeForInsertionAtSelection( schema, selection ) → 'imageBlock' | 'imageInline'` _(internal)_

Considering the current model selection, it returns the name of the model image element (`'imageBlock'` or `'imageInline'`) that will make most sense from the UX perspective if a new image was inserted (also: uploaded, dropped, pasted) at that selection.

The assumption is that inserting images into empty blocks or on other block widgets should produce block images. Inline images should be inserted in other cases, e.g. in paragraphs that already contain some text.

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

#### Parameters

* `schema: ModelSchema`
* `selection: ModelSelection | ModelDocumentSelection`

#### Returns

* `'imageBlock' | 'imageInline'`

<a id="function-getImgViewElementMatcher">

### `getImgViewElementMatcher( editor, matchImageType ) → MatcherPattern` _(deprecated)_

A function returning a `MatcherPattern` for a particular type of View images.

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

#### Parameters

* `editor: Editor`

* `matchImageType: 'imageBlock' | 'imageInline'`

  The type of created image.

#### Returns

* `MatcherPattern`

<a id="function-getSizeValueIfInPx">

### `getSizeValueIfInPx( size ) → number | null` _(internal)_

Returns parsed value of the size, but only if it contains unit: px.

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

#### Parameters

* `size: string | undefined`

#### Returns

* `number | null`

<a id="function-getViewImageType">

### `getViewImageType( element, imageUtils ) → 'imageBlock' | 'imageInline'` _(internal)_

Resolves the model image type (`'imageBlock'` or `'imageInline'`) that a given `<img>` view element represents, based purely on its view structure.

An `<img>` is treated as a block image when it has a `display: block` style or is wrapped in a block image figure (`<figure class="image">`, also `<figure class="image"><a>...</a></figure>` added by the `LinkImage` plugin). Otherwise it is treated as an inline image.

Note that this only reflects the view representation - it does not check whether the resolved type is allowed by the schema at the insertion position.

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

#### Parameters

* `element: ViewElement`

  The `<img>` view element to resolve the type for.

* `imageUtils: ImageUtils`

  The `ImageUtils` plugin instance.

#### Returns

* `'imageBlock' | 'imageInline'`

<a id="function-isImageTypePlaceable">

### `isImageTypePlaceable( schema, position, imageType ) → boolean` _(internal)_

Checks whether the given image type can be placed at the specified position - either directly (or after hoisting to an allowed ancestor) or, for inline images, wrapped in an auto-created paragraph.

This is the predicate that decides whether a block image may land at a position or must degrade to an inline image (for example, inside an `$inlineRoot` that disallows block content) and, symmetrically, whether an inline image may become a block image. `isParagraphable()` is always `false` for `imageBlock` (a block object never fits in a paragraph), so the auto-paragraph relaxation only applies to the inline target.

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

#### Parameters

* `schema: ModelSchema`

  The model schema to check against.

* `position: ModelPosition`

  The position at which the image type should be placed.

* `imageType: 'imageBlock' | 'imageInline'`

  The image type to check.

#### Returns

* `boolean`

<a id="function-widthAndHeightStylesAreBothSet">

### `widthAndHeightStylesAreBothSet( viewElement ) → boolean` _(internal)_

Returns true if both styles (width and height) are set.

If both image styles: width & height are set, they will override the image width & height attributes in the browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles. That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.

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

#### Parameters

* `viewElement: ViewElement`

#### Returns

* `boolean`

---

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