Login
Home CMS Documentation Home CMS 10 Authoring Basics Completing Page and Component Elements XHTML Editor Image Manipulator Resizing Images

Resizing Images

Prerequisites:
  • Ingeniux CMS 10.6 must be installed. See CMS Statistics to check the site version.
    Troubleshooting
    In CMS 10.0–10.5, an issue prevents users from saving resized images via the Ingeniux Image Manipulator. See Resizing Images via Assets Manager to resize images in CMS 10.0–10.5.
  • The image asset must be checked out to the current user.
  • The current user must have asset editing permissions.
Users can adjust the dimensions of images by resizing them.

Rather than navigating to the Assets Manager to resize images, users can use this shortcut tool to resize images without leaving the Site area.

Resize as needed to fit images within given spaces. Smaller dimensions can also decrease the image download duration.

Note
Changes saved in the Ingeniux Image Manipulator register under the current checked-out version of the asset in the Assets Manager.
To resize images via the Ingeniux Image Manipulator:
  1. Navigate to Site > Site Tree.
  2. Click a page or component that contains an XHTML editor element.
  3. Check out the content item, and expand the XHTML editor element.
  4. Choose one of the following steps:
    • Select an area in the XHTML editor, and click Insert > Image... in the XHTML editor toolbar.
    • Select an area in the XHTML editor, and click the Insert/Edit image icon in the XHTML editor toolbar.
      Note
      If the Insert/Edit Image icon doesn't initially display, then click the More... icon to access the icon in the toolbar.

      Insert/Edit Image Icon

    • Right-click an area in the XHTML editor and click Image... in the context menu.
    The Insert/Edit Image dialog displays.

    Insert/Edit Image Dialog

  5. Click the Source icon button.
    The Choose File dialog displays.
  6. Navigate to the image asset and choose one of the following steps:
    Tip
    To change views, select the DetailsDetails Button or ThumbnailsThumbnails Button button in the dialog toolbar.
    • Select the image in the Thumbnails view, and click Edit Image in the image details that display.

      Edit Image

    • Double-click the image in the Details or Thumbnails view.
    The Ingeniux Image Manipulator dialog displays.

    Resize Button

  7. Click Resize in the toolbar.
    The Resize Image dialog displays.

    Resize Image Dialog

  8. Use the following fields to set the dimensions that suit your needs.
    Tip
    The Original Dimensions field displays the image's original height and width values.
    FieldDescription
    Constrain By drop-down list
    • Select Width to automatically scale the height value to the width value so that the image remains proportional.
    • Select Height to automatically scale the width value to the height value so that the image remains proportional.
    • Select None to manually set the width and height values of the images.
    WidthSets the image width value in pixels.
    HeightSet the image height value in pixels.
  9. Click Resize to confirm the new dimensions and close the Resize Image dialog.
  10. Click Save Changes when you finish all image edits.
    The system saves the edits to the current checked-out version of the image asset in the Assets Manager.
    Tip
    To undo saved edits, you can revert the image to its previous asset version by undoing the image's current checked-out state. To undo the checkout, navigate to the image asset in the Assets Tree, right-click the asset, and click Undo Checkout.