@strnbrg

strnbrg → created an issue.

strnbrg → created an issue.

strnbrg → created an issue.

strnbrg → created an issue.

If anybody is still looking for a solution to get the values to the frontend to use it along with object position.

The preprocess function gets the relative values of the focal point and adds a custom property in the style attribute of the image.

function theme_preprocess_responsive_image_formatter(&$variables) {
  // Load the file entity from the original image.
  $file_entity = File::load($variables['item']->get('target_id')->getValue());

  // Get the focal point crop info.
  $crop = \Drupal::service('focal_point.manager')->getCropEntity($file_entity, 'focal_point');
  if ($crop) {
    // Get the x and y position from the crop.
    $fp_abs = $crop->position();
    $x = $fp_abs['x'];
    $y = $fp_abs['y'];

    // Get the original width and height from the image.
    $width = $variables['item']->get('width')->getValue();
    $height = $variables['item']->get('height')->getValue();

    // Convert the absolute x and y positions to relative values.
    $fp_rel = \Drupal::service('focal_point.manager')->absoluteToRelative($x, $y, $width, $height);

    // Set a custom property and add to the style attribute.
    $css_var = '--focal-point-position: ' . $fp_rel['x'] . '% ' . $fp_rel['y'] . '%;';
    $variables['responsive_image']['#attributes']['style'] = $css_var;
  }
}

You can use the custom property in your css with a 50% 50% fallback.

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-point-position, 50% 50%);
}