PHPackages                             hirasso/focal-point-picker - 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. hirasso/focal-point-picker

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

hirasso/focal-point-picker
==========================

Zero-dependency custom focal point picker for your WordPress images 🎯

v1.4.0(6mo ago)355.0k—7.2%2GPL-3.0-or-laterJavaScriptPHP >=8.2CI passing

Since Jul 19Pushed 6mo ago3 watchersCompare

[ Source](https://github.com/hirasso/focal-point-picker)[ Packagist](https://packagist.org/packages/hirasso/focal-point-picker)[ GitHub Sponsors](https://github.com/hirasso)[ RSS](/packages/hirasso-focal-point-picker/feed)WikiDiscussions main Synced 1mo ago

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

Focal Point Picker
==================

[](#focal-point-picker)

Zero-dependency custom focal point picker for your WordPress images 🎯

[![CleanShot 2024-06-24 at 15 18 15@2x](https://private-user-images.githubusercontent.com/869813/342352865-3717cedb-d1db-4192-b24d-9997e48432c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTU1ODIsIm5iZiI6MTc3NDY1NTI4MiwicGF0aCI6Ii84Njk4MTMvMzQyMzUyODY1LTM3MTdjZWRiLWQxZGItNDE5Mi1iMjRkLTk5OTdlNDg0MzJjOS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMzQ4MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MDkxOTdlZDg5ZjExYTg0MzZiYWYwNzBkZmYxOTdmOGZkZDkxMWRjMjEzYTJmNmZiMzY1N2IyNDcxNzJkZjlhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.6DpToCLE2JV5EtAZLIhfAcym36F7NHP6rK4KpWkhL9k)](https://private-user-images.githubusercontent.com/869813/342352865-3717cedb-d1db-4192-b24d-9997e48432c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ2NTU1ODIsIm5iZiI6MTc3NDY1NTI4MiwicGF0aCI6Ii84Njk4MTMvMzQyMzUyODY1LTM3MTdjZWRiLWQxZGItNDE5Mi1iMjRkLTk5OTdlNDg0MzJjOS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMyN1QyMzQ4MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MDkxOTdlZDg5ZjExYTg0MzZiYWYwNzBkZmYxOTdmOGZkZDkxMWRjMjEzYTJmNmZiMzY1N2IyNDcxNzJkZjlhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.6DpToCLE2JV5EtAZLIhfAcym36F7NHP6rK4KpWkhL9k)

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

[](#installation)

### Via Composer (recommended):

[](#via-composer-recommended)

1. Install the plugin:

```
composer require hirasso/focal-point-picker
```

1. Activate the plugin manually or using WP CLI:

```
wp plugin activate focal-point-picker
```

### Manually:

[](#manually)

1. Download and extract the plugin
2. Copy the `focal-point-picker` folder into your `wp-content/plugins` folder
3. Activate the plugin via the plugins admin page – Done!
4. Handle updates via [afragen/git-updater](https://github.com/afragen/git-updater)

Data structure
--------------

[](#data-structure)

You can retrieve the focal point for an image like this:

```
$focalPoint = fcp_get_focalpoint($imageID);
var_dump($focalPoint);
```

### Output:

[](#output)

```
object(FocalPointPicker\FocalPoint)#2796 (4) {
  ["left"]=>
  float(0.5)
  ["top"]=>
  float(0.5)
  ["leftPercent"]=>
  float(50)
  ["topPercent"]=>
  float(50)
  ["x"]=>
  float(0.5)
  ["y"]=>
  float(0.5)
  ["xPercent"]=>
  float(50)
  ["yPercent"]=>
  float(50)
}

```

Usage in your templates
-----------------------

[](#usage-in-your-templates)

### Object Position

[](#object-position)

```