Image editor - Edit images in your site

With Joomlatools Connect you can easily resize, crop, or add a filter to your images right inside the browser, all without leaving your site in DOCman, FILEman, or TEXTman.

Features

Transform images

Resize images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Transform tab from the bottom toolbar.
  3. Right above the bottom toolbar you will see the image size in a box. Click Lock resolution if you would like to preserve aspect ratio.
  4. Enter the desired image size in the width or height boxes.
  5. Click the blue check mark next to the height box to save the image.
  6. Click Save & close on upper right.

Crop images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Transform tab from the bottom toolbar.
  3. Either select one of the prefixes, circle or 16x9, above the bottom toolbar, or click on custom and drag the highlighted box on the image by dragging it from the sides and corners.
  4. Click the blue check mark next to the 16x9 selector to save the image.
  5. Click Save & close on upper right.

Change image orientation

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Transform tab from the bottom toolbar.
  3. Locate the buttons in the below screenshot at the top of the image.
  4. Flip the image using the first two buttons.
  5. Rotate the image using the last two buttons.
  6. Click Save & close on upper right.

Add filters to images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Filters tab from the bottom toolbar.
  3. Select one of the pre-programmed filters to adjust the image. You can choose from twelve different filters; Sepia, Black & White, Kodachrome, Polaroid, Brownie, Technicolor, Vintage, Autumn, Blue Ocean, Ice Cold, Milkyway and Vanilla Sky.
  4. Click Save & close on upper right.

Adjust images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Adjustments tab from the bottom toolbar.
  3. Select what you want to adjust in the image, you can choose from; Blur, Brightness; Contrast, Gamma, Hue, Noise, Pixelate and Saturation.
  4. Adjust the slider above the bottom toolbar to your desired setting.
  5. Click Save & close on upper right.

Add text to images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Text tab from the bottom toolbar.
  3. Click on the Add text button above the bottom toolbar, then click anywhere on your image. You can then adjust the text settings, including; font-family, font-size, font-colour, font-variant and text alignment.
  4. Click Save & close on upper right.

Add a border to images

  1. Select an image to edit.
    (refer to the extension screenshots below to see how to select an image in DOCman, FILEman and TEXTman).
  2. Select the Border tab from the bottom toolbar.
  3. From the options above the bottom toolbar, you can then set the border width, colour and transparency.
  4. Click Save & close on upper right.

DOCman

  • When you edit a document linked to an image file, you will see an Edit image button in the uploader.
  • The featured image field in every document has an Edit button to edit the featured image.

DOCman photo editor animated gif

FILEman

  • In the backend, you can select an image and click the Edit image button in the toolbar to edit it.
  • In the frontend, you will see a new edit icon button on the bottom right of a file if you have editing permissions.

FILEman photo editor animated gif

TEXTman

  • If you right click an image in the editor, you will see a menu entry called Edit image.
  • The featured image field in every document has an Edit button to edit the featured image.

TEXTman photo editor animated gif

Installation

Please see: Getting started with Connect