Image Dialog

The image dialog allows users to select and edit images directly within the Uhuu Editor.

Parameters

The editDialog method is configured with the following options for image actions:

• type: Set to 'image', indicating that the field being edited is an image.
• path: Specifies the data path to the image, here 'url' within the payload.
• ratio: Defines the crop aspect ratio (4/3 in this case) for the image within the editor.
• subPath (optional): A sub-path relative to path, for more targeted editing within the data structure.
• imagePath (optional): Acts as an alias for subPath specifically for images, eliminating the need for an extra type definition when editing images.

Example Setup

Configure and open an image dialog with a sample JSON payload:

{ 
    "title": "Photos by Sven",
    "message": "Amazing shots",
    "url": "https://images.unsplash.com/photo-1531062537542-0308d14d35c3?w=1200"
}

In your template, you can set up an editable image field as follows:

export default ({payload}) => {
  return (    
    <div onClick={() => $uhuu.editDialog({
          path: "url", 
          type: "image", 
          ratio: 4 / 3
        })}>
        <img src={payload.url} alt="Image" />
    </div>
  );
}

Example Gallery

To handle multiple images within a template, Uhuu can be configured to display an image gallery. In this example, the payload includes an images array:

{ 
    "title": "Photos by Sven",
    "message": "Amazing shots",
    "url": "https://images.unsplash.com/photo-1531062537542-0308d14d35c3?w=1200",
    "images": [
        "https://images.unsplash.com/photo-1530878902700-5ad4f9e4c318?w=1200",
        "https://images.unsplash.com/photo-1531062470344-16b9d0460ffc?w=1200",
        "https://images.unsplash.com/photo-1622036255449-ba090f54c6bd?w=1200"
    ]
}

To enable the image gallery, set the imageGalleryPath option to specify where the gallery images are located within the payload:

$uhuu.templateSetup({
    options: {
        imageGalleryPath: 'images'
    }
});

Example Usage

Below are examples of configuring $uhuu.editDialog for editing an image field:

// Edit an image with a specified ratio, using `subPath`
$uhuu.editDialog({
  path: 'cover_image',
  subPath: 'url',
  type: 'image',
  ratio: 16 / 9
});

// Using `imagePath` as a direct alias for `subPath` for image editing
$uhuu.editDialog({
  path: 'cover_image',
  imagePath: 'url',
  ratio: 16 / 9
});