--- title: "Integrate Acquia DAM with Focal Point" date: "2026-04-15T08:31:23+00:00" summary: image: type: "page" url: "/acquia-dam/integrate-acquia-dam-focal-point" id: "8d99dd49-a7a3-4b51-ba7e-07581aaa0620" --- 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 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. Select **Focal Point Crop** in the list.  ![Acquia-DAM_integration-focal-point](https://acquia.widen.net/content/1z9hg9dgyt/web/35a54_Acquia-DAM-integration-focal-point.png?v=2b06c370-0414-4049-a207-11f3d32d8e3d) 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_. ![Acquia-DAM_integration-focal-point](https://acquia.widen.net/content/mohtbamhmr/web/f3529_Acquia-DAM-integration-focal-point-dimensions.png?v=5e16d5f6-8c8f-43f8-bbca-0884470aa260) 4. Select **Add effect**. 5. Select **Update effect** to save. ### Step 3: Allow the image style for Acquia DAM 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 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 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: 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. ![Acquia-DAM_integration-focal-point-download-sync-crop-config](https://acquia.widen.net/content/ivbwzbqszz/web/74a2b_Acquia-DAM-integration-focal-point-download-sync-crop-config.png?h=720&v=3ec50e6d-285a-4b83-a7c6-f1c51eb802ff&itok=HEeFCaH7) To set 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 **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. Caution Focal point support depends on the asset render method. If you switch between Embed and Download and sync, Drupal may not apply existing focal point settings automatically. Embed uses a CDN URL, but Download and sync uses the Drupal file system. Save the image media again after you change the asset render method. Use Focal Point to insert media with CKEditor --------------------------------------------- Add an image from Acquia DAM: 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 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. ![Acquia-DAM_focal-point-styles-ckeditor](https://acquia.widen.net/content/sjqegsqhmd/web/fd5e8_Acquia-DAM-focal-point-styles-ckeditor.png?v=c27e2bcc-d3d2-405e-870b-066946cf33ae) 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. 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. ![Acquia-DAM_focal-point-selection-ckeditor](https://acquia.widen.net/content/pevlqcxlf9/web/75c54_Acquia-DAM-focal-point-selection-ckeditor.png?v=2746bb67-099a-4a48-9c90-fd5f9f47ee5e) 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. 5. Choose the version setting for the DAM asset: * Automatically update: The media updates when new finalized versions appear in Acquia DAM. * Manually update: You choose when to update to a new version. 6. Click **Insert selected** to add the image to your content. 7. Verify the image rendering with the _Embed_ method. ![Acquia-DAM-focal-pont-page-view](https://acquia.widen.net/content/ugcni5ds3r/web/9dde1_Acquia-DAM-focal-pont-page-view.png?v=f425b929-8904-4dfe-9c58-2329b5cb7167) Use Focal Point to insert media with a field -------------------------------------------- Add an image from Acquia DAM: 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 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. Note Currently, you cannot change the focal point from the content edit form after the media is inserted. To change the focal point, edit the media entity directly and set the focal point. 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. ![Acquia-DAM_focal-point-edit](https://acquia.widen.net/content/o64gkwzqfp/web/f59f7_Acquia-DAM_focal-point-edit.png?v=f9a85343-0827-446a-987c-2eb64dc743b9) 4. Select the preview image to set a new focal point. 5. Select **Save**. Note Focal point behavior may not carry over when you switch between **Embed** and **Download and sync**. 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