PHPackages                             ncla/statamic-focal-point-fieldtype - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ncla/statamic-focal-point-fieldtype

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

ncla/statamic-focal-point-fieldtype
===================================

Standalone asset focal point fieldtype for Statamic

v5.1.0(1mo ago)24.6k↓12.5%1[1 issues](https://github.com/ncla/statamic-focal-point-fieldtype/issues)MITVue

Since Feb 1Pushed 2mo ago2 watchersCompare

[ Source](https://github.com/ncla/statamic-focal-point-fieldtype)[ Packagist](https://packagist.org/packages/ncla/statamic-focal-point-fieldtype)[ RSS](/packages/ncla-statamic-focal-point-fieldtype/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (2)Versions (10)Used By (0)

Focal Point Fieldtype
=====================

[](#focal-point-fieldtype)

[![GitHub release (latest by date)](https://camo.githubusercontent.com/58a0d9065cf8008b207759f4edc97bcdd7417c4f903afdf8bd21e712e2df6dd7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6e636c612f73746174616d69632d666f63616c2d706f696e742d6669656c6474797065)](https://github.com/ncla/statamic-focal-point-fieldtype/releases)[![Supported Statamic version](https://camo.githubusercontent.com/290c205d494bd45c1477cc41f6ba9e772e4b830e153c935a7ad1b3ff78abed14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d342e302532422d464632363945)](https://github.com/statamic/cms/releases)[![justforfunnoreally.dev badge](https://camo.githubusercontent.com/b0f5d7fdff28bb80e7b9af7defa6127235728037cb9cd0f13e191a1fe1d57aaa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a757374666f7266756e6e6f7265616c6c792d6465762d396666)](https://justforfunnoreally.dev)

The Statamic control panel has very useful focal point selection tool, unfortunately you can only set one focal point only for one asset. Fortunately this addon provides a fieldtype that allows you to set focal point in a separate field for an asset that has been linked in an assets field.

This addon can be useful in situations such as:

- You want to change focal point between responsive breakpoints
- Your site has the same asset appearing in multiple places and you do not want them all to share the same focal point
- You want to add "pins" to an image e.g. a map with interest points

 [![](https://user-images.githubusercontent.com/5507083/216421793-3250d185-de63-49a2-a97f-27f875601a02.gif)](https://user-images.githubusercontent.com/5507083/216421793-3250d185-de63-49a2-a97f-27f875601a02.gif)

Installation
------------

[](#installation)

Require it using Composer.

```
composer require ncla/statamic-focal-point-fieldtype

```

Fieldtype
---------

[](#fieldtype)

As any fieldtype, you can add it through control panel interface. You will find the fieldtype in the "Media" category. In field options, you will just have to define "Assets Field Handle" and that is it.

Alternatively if you are feeling hacker vibes, you can of course add this fieldtype to your fields by editing blueprint file directly:

```
-
    handle: focal_point_field
    field:
        display: 'Focal Point'
        type: focalpoint
        icon: assets
        listable: hidden
        instructions_position: above
        visibility: visible
        always_save: false
        # Here you specify the handle of the asset field that we will be getting image from for focal point setter
        assets_field_handle: assets_field
-
    handle: assets_field
    field:
        # ..
```

Templating
----------

[](#templating)

Once focal point is set, you can pass it in your templates to Glide tag like this:

```
{{
    glide
    :src="assets_field"
    fit="crop-{ focal_point_field }"
}}
```

If you are using [Responsive Images addon](https://github.com/spatie/statamic-responsive-images) then here is an example of having two different focal points for two breakpoints:

```
{{
    responsive:assets_field
    glide:fit="crop-{ focal_point_mobile }"
    lg:glide:fit="crop-{ focal_point_desktop }"
}}
```

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance78

Regular maintenance activity

Popularity26

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 97.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~164 days

Recently: every ~262 days

Total

8

Last Release

51d ago

Major Versions

v1.0.1 → v2.0.02023-05-13

v2.1.0 → v3.0.02023-05-13

v3.0.0 → v4.0.02024-05-16

v4.0.0 → v5.0.02026-03-28

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5507083?v=4)[ncla](/maintainers/ncla)[@ncla](https://github.com/ncla)

---

Top Contributors

[![ncla](https://avatars.githubusercontent.com/u/5507083?v=4)](https://github.com/ncla "ncla (40 commits)")[![mikemartin](https://avatars.githubusercontent.com/u/414211?v=4)](https://github.com/mikemartin "mikemartin (1 commits)")

### Embed Badge

![Health badge](/badges/ncla-statamic-focal-point-fieldtype/health.svg)

```
[![Health](https://phpackages.com/badges/ncla-statamic-focal-point-fieldtype/health.svg)](https://phpackages.com/packages/ncla-statamic-focal-point-fieldtype)
```

###  Alternatives

[statamic/ssg

Generate static sites with Statamic.

254302.4k](/packages/statamic-ssg)[statamic/seo-pro

65440.7k](/packages/statamic-seo-pro)[jacksleight/statamic-bard-texstyle

17172.5k](/packages/jacksleight-statamic-bard-texstyle)[visuellverstehen/statamic-classify

A useful helper to add CSS classes to all HTML tags generated by the bard editor.

20116.8k](/packages/visuellverstehen-statamic-classify)[marcorieser/statamic-livewire

A Laravel Livewire integration for Statamic.

2381.5k10](/packages/marcorieser-statamic-livewire)[withcandour/aardvark-seo

Save time and get your Statamic site to rank better with the SEO addon for Statamic.

13128.3k](/packages/withcandour-aardvark-seo)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)