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`	`undefined`	The size options to show in the size dropdown. When not set no dropdown is rendered.
`resizeWidthPresetOptions`	`undefined`	The width options to show in the width dropdown. When not set no dropdown is rendered.
`resizeHeightPresetOptions`	`undefined`	The height options to show in the height dropdown. When not set no dropdown is rendered.
`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}

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeSizePresetOptions={[
                    [undefined, 'Auto'],
                    [128, 128],
                    [256, 256],
                    [512, 256],
                    [1024, 1024],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeSizePresetOptions="resizeSizePresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [128, 128],
                [256, 256],
                [512, 256],
                [1024, 1024],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeSizePresetOptions={[
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeSizePresetOptions]="resizeSizePresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [128, 128],
                [256, 256],
                [512, 256],
                [1024, 1024],
            ],
        });
    });
</script>

Or when using custom labels.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [[128, 128], 'Small'],
            [[512, 512], 'Medium'],
            [[1024, 1024], 'Large'],
        ],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeSizePresetOptions={[
                    [undefined, 'Auto'],
                    [[128, 128], 'Small'],
                    [[512, 512], 'Medium'],
                    [[1024, 1024], 'Large'],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeSizePresetOptions="resizeSizePresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [[128, 128], 'Small'],
                [[512, 512], 'Medium'],
                [[1024, 1024], 'Large'],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeSizePresetOptions={[
            [undefined, 'Auto'],
            [[128, 128], 'Small'],
            [[512, 512], 'Medium'],
            [[1024, 1024], 'Large'],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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'],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeSizePresetOptions]="resizeSizePresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [[128, 128], 'Small'],
                [[512, 512], 'Medium'],
                [[1024, 1024], 'Large'],
            ],
        });
    });
</script>

Options can be supplied in groups as well.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [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'],
                ],
            ],
        ],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeSizePresetOptions={[
                    [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'],
                        ],
                    ],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeSizePresetOptions="resizeSizePresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeSizePresetOptions: [
                [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'],
                    ],
                ],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeSizePresetOptions={[
            [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'],
                ],
            ],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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'],
            ],
        ],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeSizePresetOptions]="resizeSizePresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeSizePresetOptions: [
                [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'],
                    ],
                ],
            ],
        });
    });
</script>

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.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeSizePresetOptions: [
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ],
        imageTargetSize: { width: 512, height: 256 },
        imageCropAspectRatio: 512 / 256,
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeSizePresetOptions={[
                    [undefined, 'Auto'],
                    [128, 128],
                    [256, 256],
                    [512, 256],
                    [1024, 1024],
                ]}
                imageTargetSize={{ width: 512, height: 256 }}
                imageCropAspectRatio={512 / 256}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeSizePresetOptions="resizeSizePresetOptions"
            :imageTargetSize="imageTargetSize"
            :imageCropAspectRatio="512 / 256"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [128, 128],
                [256, 256],
                [512, 256],
                [1024, 1024],
            ],
            imageTargetSize: { width: 512, height: 256 },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeSizePresetOptions={[
            [undefined, 'Auto'],
            [128, 128],
            [256, 256],
            [512, 256],
            [1024, 1024],
        ]}
        imageTargetSize={{ width: 512, height: 256 }}
        imageCropAspectRatio={512 / 256}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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 };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeSizePresetOptions]="resizeSizePresetOptions"
    [imageTargetSize]="imageTargetSize"
    [imageCropAspectRatio]="512 / 256"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeSizePresetOptions: [
                [undefined, 'Auto'],
                [128, 128],
                [256, 256],
                [512, 256],
                [1024, 1024],
            ],
            imageTargetSize: { width: 512, height: 256 },
            imageCropAspectRatio: 512 / 256,
        });
    });
</script>

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.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeWidthPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeWidthPresetOptions={[[undefined, 'Auto'], 200, 400, 800]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeWidthPresetOptions="resizeWidthPresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeWidthPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeWidthPresetOptions={[[undefined, 'Auto'], 200, 400, 800]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeWidthPresetOptions]="resizeWidthPresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeWidthPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
        });
    });
</script>

Using custom labels

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeWidthPresetOptions: [
            [undefined, 'Auto'],
            [200, 'Narrow'],
            [400, 'Normal'],
            [800, 'Wide'],
        ],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeWidthPresetOptions={[
                    [undefined, 'Auto'],
                    [200, 'Narrow'],
                    [400, 'Normal'],
                    [800, 'Wide'],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeWidthPresetOptions="resizeWidthPresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeWidthPresetOptions: [
                [undefined, 'Auto'],
                [200, 'Narrow'],
                [400, 'Normal'],
                [800, 'Wide'],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeWidthPresetOptions={[
            [undefined, 'Auto'],
            [200, 'Narrow'],
            [400, 'Normal'],
            [800, 'Wide'],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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'],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeWidthPresetOptions]="resizeWidthPresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeWidthPresetOptions: [
                [undefined, 'Auto'],
                [200, 'Narrow'],
                [400, 'Normal'],
                [800, 'Wide'],
            ],
        });
    });
</script>

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.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeHeightPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeHeightPresetOptions={[[undefined, 'Auto'], 200, 400, 800]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeHeightPresetOptions="resizeHeightPresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeHeightPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeHeightPresetOptions={[[undefined, 'Auto'], 200, 400, 800]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeHeightPresetOptions]="resizeHeightPresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeHeightPresetOptions: [[undefined, 'Auto'], 200, 400, 800],
        });
    });
</script>

Using custom labels

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        resizeHeightPresetOptions: [
            [undefined, 'Auto'],
            [200, 'Short'],
            [400, 'Normal'],
            [800, 'Tall'],
        ],
    });
</script>

App.jsx
App.css

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 (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                resizeHeightPresetOptions={[
                    [undefined, 'Auto'],
                    [200, 'Short'],
                    [400, 'Normal'],
                    [800, 'Tall'],
                ]}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :resizeHeightPresetOptions="resizeHeightPresetOptions"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            resizeHeightPresetOptions: [
                [undefined, 'Auto'],
                [200, 'Short'],
                [400, 'Normal'],
                [800, 'Tall'],
            ],
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();
</script>

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        resizeHeightPresetOptions={[
            [undefined, 'Auto'],
            [200, 'Short'],
            [400, 'Normal'],
            [800, 'Tall'],
        ]}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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'],
    ];
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [resizeHeightPresetOptions]="resizeHeightPresetOptions"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            resizeHeightPresetOptions: [
                [undefined, 'Auto'],
                [200, 'Short'],
                [400, 'Normal'],
                [800, 'Tall'],
            ],
        });
    });
</script>

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 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.

index.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="./pintura.css" />
</head>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, createNode } from './pintura.js';

    let amount = 0;

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        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
                        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: 'USD ' + amount * 10,
                }),
            ];
        },
    });
</script>

App.jsx
App.css

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: 'USD ' + amount * 10,
            }),
        ];
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                willRenderToolbar={willRenderToolbar}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            :willRenderToolbar="willRenderToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults, createNode } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),

            amount: 0,

            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: 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: 'USD ' + this.amount * 10,
                    }),
                ];
            },
        };
    },

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

.pintura-editor {
    height: 600px;
}
</style>

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults, createNode } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    let amount = 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
                    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: 'USD ' + amount * 10,
            }),
        ];
    };
</script>

<div>
    <PinturaEditor {...editorDefaults} src={'image.jpeg'} {willRenderToolbar} />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

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: 'USD ' + this.amount * 10,
            }),
        ];
    };
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    [willRenderToolbar]="willRenderToolbar"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="./pintura/pintura.css" />
</head>

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { createNode } = $.fn.pintura;

        var amount = 0;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            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
                            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: 'USD ' + amount * 10,
                    }),
                ];
            },
        });
    });
</script>

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.