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 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. There are several focal point effects that can be used; for example, select Focal Point Crop from 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.
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: Image media type

Embed for CDN delivery

To set a focal point style:

1. In the administrative menu, select Structure.
2. Select Acquia DAM: 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 the focal point image field:

1. In the administrative menu, select Structure.
2. Select Media types to view all media types.
3. Locate an Acquia DAM: 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. :

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. The specific focal point field is displayed based on your asset delivery method:

   1. Embed (CDN delivery): Locate the Focal point settings field for the image style (for example, Focal point selection for image style: Hero banner – Focal point 200x60).

      

   2. Download and sync: Locate the On-site stored asset image field.

      

4. Select Preview to open a modal that shows the focal point image styles effect with the original image.

   
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

Re-sync focal points to embed image styles

The acquia-dam:update-media-focal-point command(alias ad:umfp) iterates through existing Acquia DAM image media entities and copies the focal point of each entity from Download and sync (file) into its embed image style crops and vice-versa. The command flushes those derivatives so both delivery methods render the same focal point.

drush acquia-dam:update-media-focal-point [options]

This option restricts process scope to one DAM media type and the listed media IDs, forces a re-flush of styles that are already in sync, and processes them in batches of 75.

Options:

• --batch-size: Media items loaded per batch, 1 to 200. Default: 50.
• --limit: Maximum number of media items to process. Default: 0 (no limit).
• --offset: Number of media items to skip before processing. Default: 0.
• --media-type: Restrict process scope to one Acquia DAM image media type.
• --media-id: Restrict process scope to these media entity IDs, comma separated. Default: none.
• --resave-all: Force a re-flush of every focal point embed style, even when already in sync. Default: FALSE.

Examples:

# Re-sync focal points for all image media:
drush acquia-dam:update-media-focal-point

# Process one media type in batches of 100:
drush acquia-dam:update-media-focal-point --media-type=acquia_dam_image_asset --batch-size=100

# Skip the first 50 items and process the next 100:
drush acquia-dam:update-media-focal-point --limit=100 --offset=50

# Restrict process scope to specific media entities:
drush acquia-dam:update-media-focal-point --media-id=44,45,46

# Re-flush styles that are already in sync:
drush acquia-dam:update-media-focal-point --resave-all

Integrate Acquia DAM with Focal Point

drush en focal_point crop -y

drush acquia-dam:update-media-focal-point [options]

# Re-sync focal points for all image media:
drush acquia-dam:update-media-focal-point

# Process one media type in batches of 100:
drush acquia-dam:update-media-focal-point --media-type=acquia_dam_image_asset --batch-size=100

# Skip the first 50 items and process the next 100:
drush acquia-dam:update-media-focal-point --limit=100 --offset=50

# Restrict process scope to specific media entities:
drush acquia-dam:update-media-focal-point --media-id=44,45,46

# Re-flush styles that are already in sync:
drush acquia-dam:update-media-focal-point --resave-all

1. After you select an image style with Focal Point, the Focal point selection widget appears.
2. A preview of the image appears with a crosshair indicator.

3. Click the area of the image that you want to stay in focus. The crosshair moves to that position.

   
4. You can also double-click the image to manually enter coordinates in an x,y format, such as 50,25:
   • x is the horizontal position, such as 0–100, left to right.
   • y is the vertical position, such as 0–100, top to bottom.
   • 50,50 is the center of the image.

1. After you select an image style with Focal Point, the Focal point selection widget appears.
2. A preview of the image appears with a crosshair indicator.

3. Click the area of the image that you want to stay in focus. The crosshair moves to that position.

   
4. You can also double-click the image to manually enter coordinates in an x,y format, such as 50,25:
   • x is the horizontal position, such as 0–100, left to right.
   • y is the vertical position, such as 0–100, top to bottom.
   • 50,50 is the center of the image.