Focal Point Image

A Vue 3 image component that resolves and applies a WordPress-managed focal point (object-position) for responsive, art-directed image cropping. Works in any environment where Vue is supported, including Astro.js.

Companion npm package to the nsz-focal-point WordPress plugin, which lets editors pick a focal point per image in the media library and exposes it on REST API responses as image.focal_point.

Setup Guide

• Install and activate the 970 Design Focal Point plugin on your headless WordPress site.
• Install this package in your front-end project:
  • npm install @970design/focal-point-image
• Import and use the Image component, passing an image object shaped like a core WP/REST or ACF image field (must include sizes, width, height, alt, and optionally focal_point).

This package ships its Vue SFC source directly (no build step) and is resolved through your app's own Vite/Astro pipeline, so it's currently distributed as a local file: dependency rather than published to npm.

Example Usage (with Astro.js)

<script setup>
import Image from '@970design/focal-point-image';
</script>

<template>
  <Image :image="fields.image" sizes="(min-width: 800px) 800px, 100vw" />
</template>

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | image | object | Yes | Image object with sizes, width, height, alt, and optionally focal_point (as provided by the nsz-focal-point plugin). | | loading | string | No | Native loading attribute. Defaults to lazy. | | classes | string | No | CSS classes applied to the rendered <img>. | | sizes | string | No | Explicit sizes attribute. If omitted, calculated from coverHeight or defaults to 100vw. | | focalPoint | string | No | Explicit "X% Y%" override. Falls back to image.focal_point, then "50% 50%". | | coverHeight | object | No | { default, lg, max } rendered CSS heights (px or rem) for object-fit: cover containers, used to calculate an accurate sizes attribute. |