# Usage

### Getting To Know Ansel

Ansel will feel very familiar to use in the publishing workflow because it builds on the basic ExpressionEngine control panel styles.

There are two options for getting an image into your field:

* Drag and drop an image to the drop area or click it to select an image to upload
* Choose an existing image in the file manager (or use the file manager to upload an image)

One of the advantages to using the drag and drop interface is the image will never be uploaded if it does not meet requirements — whereas if you go through the file manger interface and upload from there, the image will be uploaded by EE then evaluated by Ansel.

<figure><img src="/files/38XGK30NMi9qX5qXce1r" alt=""><figcaption><p>Tile view with meta fields toggled</p></figcaption></figure>

### Adding Images

When you drag and drop an image over the upload area in a field (or choose one from the existing images in the file manager), Ansel will automatically select the largest portion of the image possible given the constraints set up for the field and add an image row.

You can use the re-order handles to change the order of the images in the field.

To change the selected area and/or crop of the image, click the image thumbnail which will bring up the cropping interface with a lasso to select the relevant portion of the image. When you have selected the area of the image you want, click the green check mark or press the enter key.

If you wish to cancel the crop operation, click the red X, or press escape.

### Using metadata fields

Title, Description, and Cover fields are optional metadata that can be enabled in the field's settings. Ansel saves these values into it's own table along with the cropped images, but it also sync's the Tile and Description fields to ExpressionEngine's native Files storage. The Cover field has no equivalent in ExpressionEngine, so it is not synced. If you use the `ansel_sync_meta_fields` config value this will be a two way sync. Read more about this in the [Upgrading guide](/ansel/docs/upgrading.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boldminded.com/ansel/docs/usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.