Canvas Focal Point Widget

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

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 %}