The Focal Point feature allows you to specify the most important part of an image when it is cropped. This helps ensure that the subject of your image remains visible when the image appears at different sizes or aspect ratios.

Prerequisites

Before you use Focal Point with Acquia DAM (Widen) assets, make sure:

1. The Acquia DAM (Widen) module is enabled and configured.
2. The Crop API and Focal Point modules are enabled and functional.

To enable these modules with Drush, run:

drush en focal_point crop -y

Set up image styles with Focal Point

Step 1: Create or configure an image style

1. In Drupal, go to Configuration > Media > Image styles.
2. Select Add image style or edit an existing style.
3. Enter a descriptive name, such as Hero banner – Focal point 200x60.
4. Click Create new style.

Step 2: Add the Focal Point Crop effect

1. In your Image styles, click Select a new effect.

2. Select Focal Point Crop in the list. 

   
3. Configure the effect:
   • Crop type: Focal Point, such as default.
   • Width: Enter the width in pixels, such as 200.

   • Height: Enter the height in pixels, such as 60.

     
4. Select Add effect.
5. Select Update effect to save.

Step 3: Allow the image style for Acquia DAM (Widen)

1. Go to Configuration > Media > Acquia DAM (Widen).
2. In Allowed Image styles, select the image style that uses the Focal Point Crop effect.
3. Select Save configuration.

Setup Focal Point for Acquia DAM (Widen): Image media type

Embed for CDN delivery

To set focal point style:

1. In the administrative menu, select Structure.
2. Select Acquia DAM (Widen): Image media type, then click on Manage display tab.
3. Locate the Asset reference field.
4. In the Format column, select Embed code.
5. Select the gear icon to configure embed options.
6. In the Embed style list, select your preferred focal point style, such as Hero banner – Focal point 200x60.
7. Click Update, then click Save to store the display configuration.

Download and sync

To set focal point image field:

1. In the administrative menu, select Structure.
2. Select Media types to view all media types.
3. Locate a Acquia DAM (Widen): Image media type, then select Edit.
4. In the Media source configuration section, check the Download and sync assets checkbox.
5. In the Crop configuration section, for the Image field select On-site stored asset image option from dropdown list.

6. Click Save to store the configuration.

   

To set focal point style:

1. In the administrative menu, select Structure.
2. Select Acquia DAM (Widen): Image media type, then click on Manage display tab.
3. Locate the On-site stored asset image field.
4. In the Format column, select Image.
5. Select the gear icon to configure embed options.
6. In the Image style list, select your preferred focal point style, such as Hero banner – Focal point 200x60.
7. Click Update, then click Save to store the display configuration.

Use Focal Point to insert media with CKEditor

Add an image from Acquia DAM (Widen):

1. Open the Media Library:

   Select the Media Library icon in the CKEditor toolbar.

2. Select your image:
   1. Browse or search for the image in the Acquia DAM (Widen) tab of the Media Library.
   2. Select the asset and click Next: Select format.

3. Choose an embed code (image style):

   In the Embed code list, select an image style that includes the Focal Point Crop effect.

   
   Important

   You must select an image style that uses the Focal Point effect to see the focal point selector.

4. Set the focal point:
   1. After you select an image style with Focal Point, the Focal point selection widget appears.

Use Focal Point to insert media with a field

Add an image from Acquia DAM (Widen):

1. Open the Media Library:
   • Select Add media in the Drupal field.
2. Select your image:
   • Browse or search for the image in the Acquia DAM (Widen) tab of the Media Library.
   • Select the asset and click Insert selected.
3. Save page.
4. Follow the instructions in Edit the Focal Point on the existing media section below.

Edit the Focal Point on the existing media

1. Go to Content > Media.
2. Find the media item and click Edit.

3. Locate the Focal point selection field for the image style, such as Focal point selection for image style: Hero banner – Focal point 200x60.

   
4. Select the preview image to set a new focal point.
5. Select Save.

Understand Focal Point coordinates

Focal Point uses a percentage‑based coordinate system to define the important area of an image.

• X‑axis:
  • 0 = far left
  • 50 = horizontal center
  • 100 = far right
• Y‑axis:
  • 0 = top
  • 50 = vertical center
  • 100 = bottom

Some examples are:

• 50,50 – Center of the image
• 0,0 – Top‑left corner
• 100,100 – Bottom‑right corner
• 25,75 – Lower‑left area
• 75,25 – Upper‑right area

Integrate Acquia DAM with Focal Point

drush en focal_point crop -y