This module adds a widget to the Canvas editor that allows you to set a specific focal point and image scale for each instance of an image. This means the same image can be cropped and zoomed differently in various components on your website. It includes a visual picker for the focal point and an optional slider for scaling.
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.