Image Edit Dialog

Image Editor

Let's open an image edit dialog with a simple template payload.
For instance, let's consider this JSON payload in the template.

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

React component takes the payload as a prop and displays an image with specific ratio and behavior:

export default ({payload}) => {
  return (    
    <div className="aspect-[4/3]"  onClick={()=>$uhuu.editDialog({path: 'url', type: 'image', ratio: 4/3})}>
        <img className="w-full h-full object-cover" src={payload.url} />
    </div>
  );
}

Click action invokes the uhuu editDialog with following parameters:

• path: specifies that the path to the image data in the payload is under the key 'url'.
• type: indicates that the data being edited is of type 'image'.
• ratio: defines the crop ratio '4/3' for cropping the image in the dialog.
• subPath (optional): Indicates a sub-path relative to the specified path.
• imagePath (optional): An alias for subPath when editing images, eliminating the need for an extra type definition.

Image Gallery

When you have multiple Images, enable image gallery to pick images from

{ 
    "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"
    ]
}

You can enable image gallery by setting up imageGalleryPath option and providing path to look for images in the payload.

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