# Resize plugin
Use the Resize plugin to enable width and height input controls to enable the user to determine an image output size.
| Property | Default value | Description |
| ------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------- |
| resizeAspectRatioLocked | false | Controls the state of the resize lock. |
| resizeEnableButtonLockAspectRatio | true | Toggle the resize lock button on/off. |
| resizeMinSize | { width: 1, height: 1 } | The minimum image size the user can set. |
| resizeMaxSize | { width: 9999, height: 9999 } | The maximum image size the user can set. |
| [resizeSizePresetOptions](#resizesizepresetoptions) | undefined | The size options to show in the size dropdown. When not set no dropdown is rendered. |
| [resizeWidthPresetOptions](#resizewidthpresetoptions) | undefined | The width options to show in the width dropdown. When not set no dropdown is rendered. |
| [resizeHeightPresetOptions](#resizeheightpresetoptions) | undefined | The height options to show in the height dropdown. When not set no dropdown is rendered. |
| [resizeWillRenderFooter](#resizewillrenderfooter) | undefined | Can be used to adjust the items and fields in the resize footer. |
## resizeSizePresetOptions
Don't set `resizeMinSize` and `resizeMaxSize` when using preset options.
When this option is set it will replace the default number input fields.
Options can be either `[width, height]` or `[[width, height], 'My label']`. When the option is set to `[width, height]` the label will automatically be set to `${width} × ${height}`
* [ JavaScript](#javascript-panel-8)
* [ React](#react-panel-8)
* [ Vue](#vue-panel-8)
* [ Svelte](#svelte-panel-8)
* [ Angular](#angular-panel-8)
* [ jQuery](#jquery-panel-8)
* [index.html](#index-html-panel-8)
`
`
* [App.jsx](#App-jsx-panel-8)
* [App.css](#App-css-panel-8)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-8)
`
`
* [App.svelte](#App-svelte-panel-8)
`
`
* [app.component.ts](#app-component-ts-panel-8)
* [app.component.html](#app-component-html-panel-8)
* [app.component.css](#app-component-css-panel-8)
* [app.module.ts](#app-module-ts-panel-8)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeSizePresetOptions: any = [
[undefined, 'Auto'],
[128, 128],
[256, 256],
[512, 256],
[1024, 1024],
];
}
`
`
`
Or when using custom labels.
* [ JavaScript](#javascript-panel-9)
* [ React](#react-panel-9)
* [ Vue](#vue-panel-9)
* [ Svelte](#svelte-panel-9)
* [ Angular](#angular-panel-9)
* [ jQuery](#jquery-panel-9)
* [index.html](#index-html-panel-9)
`
`
* [App.jsx](#App-jsx-panel-9)
* [App.css](#App-css-panel-9)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-9)
`
`
* [App.svelte](#App-svelte-panel-9)
`
`
* [app.component.ts](#app-component-ts-panel-9)
* [app.component.html](#app-component-html-panel-9)
* [app.component.css](#app-component-css-panel-9)
* [app.module.ts](#app-module-ts-panel-9)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeSizePresetOptions: any = [
[undefined, 'Auto'],
[[128, 128], 'Small'],
[[512, 512], 'Medium'],
[[1024, 1024], 'Large'],
];
}
`
`
`
Options can be supplied in groups as well.
* [ JavaScript](#javascript-panel-10)
* [ React](#react-panel-10)
* [ Vue](#vue-panel-10)
* [ Svelte](#svelte-panel-10)
* [ Angular](#angular-panel-10)
* [ jQuery](#jquery-panel-10)
* [index.html](#index-html-panel-10)
`
`
* [App.jsx](#App-jsx-panel-10)
* [App.css](#App-css-panel-10)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-10)
`
`
* [App.svelte](#App-svelte-panel-10)
`
`
* [app.component.ts](#app-component-ts-panel-10)
* [app.component.html](#app-component-html-panel-10)
* [app.component.css](#app-component-css-panel-10)
* [app.module.ts](#app-module-ts-panel-10)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeSizePresetOptions: any = [
[undefined, 'Auto'],
[
'Twitter',
[
[[400, 400], 'Profile picture'],
[[1500, 500], 'Header'],
[[1200, 675], 'Post image size'],
],
],
[
'Facebook',
[
[[400, 400], 'Profile picture'],
[[1125, 633], 'Cover photo'],
[[1200, 630], 'Post image size'],
],
],
];
}
`
`
`
When selecting an option the editor will set both the `imageTargetSize` and `imageCropAspectRatio` properties. To preselect an option you have to set these properties as well.
In this example we automatically select the 512 × 256 option.
* [ JavaScript](#javascript-panel-11)
* [ React](#react-panel-11)
* [ Vue](#vue-panel-11)
* [ Svelte](#svelte-panel-11)
* [ Angular](#angular-panel-11)
* [ jQuery](#jquery-panel-11)
* [index.html](#index-html-panel-11)
`
`
* [App.jsx](#App-jsx-panel-11)
* [App.css](#App-css-panel-11)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-11)
`
`
* [App.svelte](#App-svelte-panel-11)
`
`
* [app.component.ts](#app-component-ts-panel-11)
* [app.component.html](#app-component-html-panel-11)
* [app.component.css](#app-component-css-panel-11)
* [app.module.ts](#app-module-ts-panel-11)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeSizePresetOptions: any = [
[undefined, 'Auto'],
[128, 128],
[256, 256],
[512, 256],
[1024, 1024],
];
imageTargetSize: any = { width: 512, height: 256 };
}
`
`
`
## resizeWidthPresetOptions
Don't set `resizeMinSize` and `resizeMaxSize` when using preset options.
Cannot be used in combination with `resizeSizePresetOptions`.
When set this will replace the default number input fields.
Options can either be `[width, 'My label']` or `width`. When set to `width` the value will also be used for the label.
* [ JavaScript](#javascript-panel-12)
* [ React](#react-panel-12)
* [ Vue](#vue-panel-12)
* [ Svelte](#svelte-panel-12)
* [ Angular](#angular-panel-12)
* [ jQuery](#jquery-panel-12)
* [index.html](#index-html-panel-12)
`
`
* [App.jsx](#App-jsx-panel-12)
* [App.css](#App-css-panel-12)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-12)
`
`
* [App.svelte](#App-svelte-panel-12)
`
`
* [app.component.ts](#app-component-ts-panel-12)
* [app.component.html](#app-component-html-panel-12)
* [app.component.css](#app-component-css-panel-12)
* [app.module.ts](#app-module-ts-panel-12)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeWidthPresetOptions: any = [[undefined, 'Auto'], 200, 400, 800];
}
`
`
`
Using custom labels
* [ JavaScript](#javascript-panel-13)
* [ React](#react-panel-13)
* [ Vue](#vue-panel-13)
* [ Svelte](#svelte-panel-13)
* [ Angular](#angular-panel-13)
* [ jQuery](#jquery-panel-13)
* [index.html](#index-html-panel-13)
`
`
* [App.jsx](#App-jsx-panel-13)
* [App.css](#App-css-panel-13)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-13)
`
`
* [App.svelte](#App-svelte-panel-13)
`
`
* [app.component.ts](#app-component-ts-panel-13)
* [app.component.html](#app-component-html-panel-13)
* [app.component.css](#app-component-css-panel-13)
* [app.module.ts](#app-module-ts-panel-13)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeWidthPresetOptions: any = [
[undefined, 'Auto'],
[200, 'Narrow'],
[400, 'Normal'],
[800, 'Wide'],
];
}
`
`
`
## resizeHeightPresetOptions
Don't set `resizeMinSize` and `resizeMaxSize` when using preset options.
Cannot be used in combination with `resizeSizePresetOptions`.
When set this will replace the default number input fields.
Options can either be `[height, 'My label']` or `height`. When set to `height` the value will also be used for the label.
* [ JavaScript](#javascript-panel-14)
* [ React](#react-panel-14)
* [ Vue](#vue-panel-14)
* [ Svelte](#svelte-panel-14)
* [ Angular](#angular-panel-14)
* [ jQuery](#jquery-panel-14)
* [index.html](#index-html-panel-14)
`
`
* [App.jsx](#App-jsx-panel-14)
* [App.css](#App-css-panel-14)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-14)
`
`
* [App.svelte](#App-svelte-panel-14)
`
`
* [app.component.ts](#app-component-ts-panel-14)
* [app.component.html](#app-component-html-panel-14)
* [app.component.css](#app-component-css-panel-14)
* [app.module.ts](#app-module-ts-panel-14)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeHeightPresetOptions: any = [[undefined, 'Auto'], 200, 400, 800];
}
`
`
`
Using custom labels
* [ JavaScript](#javascript-panel-15)
* [ React](#react-panel-15)
* [ Vue](#vue-panel-15)
* [ Svelte](#svelte-panel-15)
* [ Angular](#angular-panel-15)
* [ jQuery](#jquery-panel-15)
* [index.html](#index-html-panel-15)
`
`
* [App.jsx](#App-jsx-panel-15)
* [App.css](#App-css-panel-15)
`import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
return (
);
}
export default App;
`
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-15)
`
`
* [App.svelte](#App-svelte-panel-15)
`
`
* [app.component.ts](#app-component-ts-panel-15)
* [app.component.html](#app-component-html-panel-15)
* [app.component.css](#app-component-css-panel-15)
* [app.module.ts](#app-module-ts-panel-15)
`import { Component } from '@angular/core';
import { getEditorDefaults } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
resizeHeightPresetOptions: any = [
[undefined, 'Auto'],
[200, 'Short'],
[400, 'Normal'],
[800, 'Tall'],
];
}
`
`
`
## resizeWillRenderFooter
The `resizeWillRenderFooter` hook receives the current footer definition and editor environment parameters. The hook allows injecting custom controls into the tools list using the [createNode](../../ui/exports/#createnode) helper function.
The third parameter of the hook is a `redraw` function, you can call this function to redraw the UI. Only needed when adjusting external parameters.
In the example below we add an amount dropdown and a price label.
* [ JavaScript](#javascript-panel-16)
* [ React](#react-panel-16)
* [ Vue](#vue-panel-16)
* [ Svelte](#svelte-panel-16)
* [ Angular](#angular-panel-16)
* [ jQuery](#jquery-panel-16)
* [index.html](#index-html-panel-16)
```html
```
* [App.jsx](#App-jsx-panel-16)
* [App.css](#App-css-panel-16)
```jsx
import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults, createNode } from '@pqina/pintura';
const editorDefaults = getEditorDefaults();
function App() {
const [amount, setAmount] = useState(0);
const willRenderToolbar = (footer, env, redraw) => {
console.log(footer);
// logs: [ Array(4), Array(4), Array(4) ]
console.log(env);
// logs: { orientation: "landscape", verticalSpace: "short", … }
// insert your item
return [
// Our custom dropdown
createNode('Dropdown', 'amount', {
id: 'amount',
label: amount,
selectedIndex: amount - 1,
options: [
[1, '1'],
[2, '2'],
[3, '3'],
],
onchange: (item) => {
// Update our external amount variable
setAmount(item.value);
// The editor doesn't know about our external amount
// variable so the price label won't update if we
// don't tell it to redraw the UI
redraw();
},
}),
// Existing footer items
...footer,
// A price label
createNode('span', 'price', {
textContent: 'EUR ' + amount * 10,
}),
];
};
return (
);
}
export default App;
```
```css
.pintura-editor {
height: 600px;
}
```
* [App.vue](#App-vue-panel-16)
```html
```
* [App.svelte](#App-svelte-panel-16)
```svelte
```
* [app.component.ts](#app-component-ts-panel-16)
* [app.component.html](#app-component-html-panel-16)
* [app.component.css](#app-component-css-panel-16)
* [app.module.ts](#app-module-ts-panel-16)
```javascript
import { Component } from '@angular/core';
import { getEditorDefaults, createNode, PinturaNode } from '@pqina/pintura';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
editorDefaults: any = getEditorDefaults();
amount: number = 0;
willRenderToolbar = (
footer: PinturaNode[],
env: any,
redraw: () => void
): PinturaNode[] => {
console.log(footer);
// logs: [ Array(4), Array(4), Array(4) ]
console.log(env);
// logs: { orientation: "landscape", verticalSpace: "short", … }
// insert your item
return [
// Our custom dropdown
createNode('Dropdown', 'amount', {
id: 'amount',
label: this.amount,
selectedIndex: this.amount - 1,
options: [
[1, '1'],
[2, '2'],
[3, '3'],
],
onchange: (item) => {
// Update our external amount variable
this.amount = item.value;
// The editor doesn't know about our external amount
// variable so the price label won't update if we
// don't tell it to redraw the UI
redraw();
},
}),
// Existing footer items
...footer,
// A price label
createNode('span', 'price', {
textContent: 'EUR ' + this.amount * 10,
}),
];
};
}
```
```html
```
### Resize plugin exports
The core editor module exports the following Resize plugin objects.
| Export | Description |
| ------------------------------ | ------------------------ |
| plugin\_resize | The resize util view. |
| plugin\_resize\_locale\_en\_gb | The resize util locales. |