# Image Cadre & Crop

**Category:** Products  ·  **Min plan:** Free  ·  **Slug:** `image-cadre`

Adds a visual crop tool when uploading product images. Crop each photo to a fixed 1:1 square inside your browser, before anything is sent to DZBuild.

## Video tutorial

[Image Cadre & Crop](https://www.youtube-nocookie.com/embed/xFkezkpKHPo)

## Features

* Visual crop tool on product image upload
* Fixed 1:1 square crop frame
* Drag, zoom, and rotate in 90° steps
* Cropping happens in the browser, before upload
* Skip / Skip all buttons for quick uploads
* Works on both create and edit pages

## Why use it

Most DZBuild themes show product cards as squares. If you upload a 4:3 photo, the storefront centre-crops it and cuts off the top and bottom, usually exactly the part you wanted to show.

This add-on lets you choose *which* square before the file is uploaded: drag, zoom, and rotate until the framing is right. No more re-uploading because the thumbnail looks wrong.

Three themes are the exception. Bloom, Prestige and Promobi draw product cards slightly taller than they are wide, so a square crop is scaled up to fill the card and a thin strip is lost on the left and the right. Leave a bit of margin around the subject and the same crop reads correctly on every theme.

## How to activate

1. Open **Dashboard → Add-ons** at [`/dashboard/addons`](https://dzbuild.com/dashboard/addons).

2. Find **Image Cadre & Crop** under *Products*.

3. Click **Activate** (Free plan).

4. The settings panel exposes:

   <!-- -->

   * **Open cropper automatically** (on by default) — this is the on/off switch for the whole feature, not just its timing. With it **off** the crop modal never opens and there is no manual way to launch it: files upload uncropped.
   * **Output quality (75-100)** — WebP/JPEG encoder quality for the 1500×1500 output (default 90).

## Using the cropper

After activating, every product image upload at [`/dashboard/products/create`](https://dzbuild.com/dashboard/products/create) and `/dashboard/products/{id}/edit` opens a modal with:

* The image you just picked
* A fixed **1:1 square** crop frame, the same one whatever theme your store runs
* Drag to reposition
* Pinch / scroll wheel to zoom, or the **Zoom in** / **Zoom out** buttons
* **Rotate** — turns the image 90° counter-clockwise per click (fixed quarter-turns; you cannot straighten a slightly tilted photo)
* **Reset** — back to the original framing
* **قص وتأكيد** (*Crop & confirm*) to keep the cropped version
* **تخطي** (*Skip*) to use the image as-is
* **تخطي الكل** (*Skip all*) — appears only when more than one image is still queued

note

The cropper dialog currently renders in Arabic only, even when your dashboard language is French.

Cropping happens entirely **in your browser, before the upload**. The cropped canvas replaces the picked file in the upload queue, so when you crop, only the cropped version is sent to DZBuild. A WebP crop is uploaded as is; a JPEG crop is converted to WebP on upload, like any other JPEG. Skipping an image uploads the original, which DZBuild handles like any other upload.

## Output format

Cropped images are always re-encoded at **1500×1500 px**, as **WebP** where your browser supports it and **JPEG** otherwise. The uploaded filename's extension changes accordingly (`photo.png` becomes `photo.webp`). **Output quality** is the quality setting for that encoder.

## What it changes about the upload flow

* The add-on takes over the product page's image picker (the upload area and the file input).
* It still enforces the page's **maximum images per product** — when you are at the cap it shows an alert instead of queueing more files.
* Each file still passes the page's normal validation; rejected files are listed in an alert and skipped.
* If the crop tool cannot load — a blocked or very poor connection, for example — the add-on silently steps aside: no modal appears and the normal image picker keeps working.

## Tips

* Set **Output quality** to 90 by default: file size drops with no visible quality loss. Push to 95-100 only for hero/cover images on premium-priced products.
* The crop frame is a fixed 1:1 square and does not follow the theme, whatever the add-on card says about detecting a theme ratio. On Bloom, Prestige and Promobi the card is a little taller than a square, so keep the subject away from the left and right edges.
* Shot came out sideways? Use the **Rotate** button — it saves you a round trip to your photo editor. It only does 90/180/270° turns, though.
* Pairs naturally with the `image_text` variant type (small image + label) — the variant thumbnails inherit the cropped framing.