Field Type Usage

# Getting To Know Ansel

Ansel 2 features an intuitive drag and drop interface. Content editors can open Finder (Macintosh) or Explorer (Windows) and drag image right onto the field. If an image does meet a field’s specified minimum dimension requirements (if applicable) the image will be rejected.

Additionally, if the user knows the source image they want is already in Craft, they can choose an image from existing files.

Ansel Field Type
Ansel Field Type

# Adding Images

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

To reorder images in the field, simply drag them around.

# Editing Image Fields

If a field has any additional fields enabled (title, caption, and/or cover), each image will feature an edit icon at the top left of the image. Clicking this icon will display the image’s field editor. If any of the fields are required and not yet filled in, the icon will pulse a redish orange color.

Ansel Field Image Editor
Ansel Field Image Editor

# Cropping/Sizing Images

Sometimes users and content editors have images that only have a particular point of relevance. Let’s face it, most of those folks are not going to know how to use Photoshop, nor should they have to. That’s why Ansel provides the wonderful little crop button for every image in a field. Click that magical button, and users can select the portion of the image they want. And of course, all within the developer defined specs.

Cropping an Image in Ansel
Cropping an Image in Ansel

# Focal Points

Cropping and sizing images is great, but often an image may be used in many different contexts, cropped to different sizes, and more. In order for images to work in the maximum amount of contexts, Ansel works with Craft’s native focal point system. Just click the focal point icon and you can set the focal point anywhere on the cropped image. Then in your templates, if you specify dimensions on the Asset that result in cropping, Craft will use the focal point to crop the image.

Focal Points in Ansel
Focal Points in Ansel