Canvas Focal Point Widget

Widget to set focal point and image scale within canvas editor interface.

I have used the great Focal Point module in the past however that module set the focal point globally for an image. Also the focal point is set at generation and editing of the media entity. I wanted the ability to set focal point per instance in Canvas interface. For example, the same media entity is used on a hero component with a specific focal point and then used in a card with a different focal point.

*Work in Progress and generated with the help of AI*

Features

Provides a visual focal point picker and image scale slider for
Canvas component image props.

- Drag-and-drop focal point dot overlaid on a live image thumbnail
- Optional scale slider (100–200 %) when a `{prefix}_scale` prop is present
- Auto-discovers any prop pair following the `{prefix}_focal_x` /
`{prefix}_focal_y` naming convention — no per-component configuration needed

Example props:

media_focal_x:
      type: number
      title: Image Focal Point X (%)
      description: Horizontal focal point as a percentage (0 = left, 50 = center, 100 = right).
      default: 50
      minimum: 0
      maximum: 100
      examples:
        - 50
media_focal_y:
      type: number
      title: Image Focal Point Y (%)
      description: Vertical focal point as a percentage (0 = top, 50 = center, 100 = bottom).
      default: 50
      minimum: 0
      maximum: 100
      examples:
        - 50
media_scale:
      type: number
      title: Image Scale (%)
      description: Scale the image within its container (100 = fit, 200 = 2× zoom).
      default: 100
      minimum: 100
      maximum: 200
      examples:
        - 100

Corresponding example twig

{% set media_img_style = 'object-fit:cover;object-position:' ~ focal_x ~ '% ' ~ focal_y ~ '%;transform:scale(' ~ scale_css ~ ');transform-origin:' ~ focal_x ~ '% ' ~ focal_y ~ '%' %}

      {% block media %}
        <img
          src="{{ media.src }}"
          alt="{{ media.alt|default('') }}"
          class="absolute inset-0 h-full w-full"
          style="{{ media_img_style }}"
          width="{{ media.width }}"
          height="{{ media.height }}"
          loading="lazy"
        />
      {% endblock %}

Additional Requirements

- Drupal 11 or later
- Canvas module

Similar projects

Focal Point sets the focal point globally for an image. Also the focal point is set at generation and editing of the media entity. Canvas Focal Point Widget sets the focal point per media instance in Canvas editor interface.