Resizing images within the Edit interface

Resizing images within the Edit interface

Resizing images within the Edit interface

Recent upgrades now make it possible to resize an image directly within the Squiz Edit+ interface. You can create dynamic or custom image sizes from your original image using the variety property of an image. Read on to find out more.

You can use the image varieties in the details screen of an image asset to create new sizes or shapes of the original image.

Click the Add variety link to add a new variety of your image. There are two types of image that you can create: dynamic and custom.

Creating dynamic varieties of your image

Dynamic: allows you to create a variety based on the original Image adhering to one of the following constraints:

  • Width: allows you to set the width, the height will be auto adjusted
  • Height: allows you to set the height, the width will be auto adjusted
  • Both: set the maximum pixel value that will be used for both width and height.
  • Square Centred Crop: set the width of the square used for cropping from the centre of the image.
  • Custom: set the width and height of the variety.

Make your image smaller

For example, this image of a garden hose is 1125 pixels wide x 750 pixels high. To create a variety of this image that is 600 pixels wide:

  1. give your variety a name
  2. choose the Constrain size by width option and type in 600.
  3. click the 'Add Variety' button then
  4. save your work.:

You'll see a new variety of your image has been created that is 600 x 400 pixels in size.

Create a square version of your image

To create a 600 pixel square selection from the centre of your image:

  1. select the Add Variety button
  2. give your variety a name
  3. choose the Square Centred Crop option and type in 600.
  4. click the 'Add Variety' button then
  5. save your work.

Creating custom image varieties

  • Custom: allows you to create a variety from the following options
    • Edit Image: allows you to edit the image, .
    • New image from original: creates a new image based on the original image.
    • Upload a new image: allows you to upload a new image,

Create a custom-resized variety of your image

This is the really cool part. You can resize your image to any dimensions using the Custom variety section.

  1. select the Add Variety button
  2. give your variety a name
  3. click on the Custom tab
  4. choose the Edit image button.

This fantastic image editing screen will open up:

You can make all sorts of changes to the image using this screen. You can choose preset aspect ratios, or create a particular size for your image and move it around on the screen.

In the example below, the image has been set to a 4:3 aspect ratio and rotated through 45 degrees:

Once you're happy with your image, click the Finish Editing button. You'll return to the image varieties screen. Click SAVE and you're done.

Inserting an image variety in your content

It's easy to insert a variety of the original image,  When inserting an image in your content page, just select the insert image icon from the wysiwyg toolbar as usual:

Click the asset selection icon in the image popup:

You'll be taken to the asset finder. You'll see the original image, and it now has children. You can choose any one of these children to include in your content:

This is the 600 x 400 resized variety of the image:

This is the 600 pixel square cropped variety of the image:

This is the resized and rotated image:

That's it - happy image resizing!

Back to the top of this page