Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hirasso/focal-point-picker
Zero-dependency custom focal point picker for your WordPress images 🎯
https://github.com/hirasso/focal-point-picker
focal-point wordpress
Last synced: about 1 month ago
JSON representation
Zero-dependency custom focal point picker for your WordPress images 🎯
- Host: GitHub
- URL: https://github.com/hirasso/focal-point-picker
- Owner: hirasso
- Created: 2024-06-24T12:42:58.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-25T08:22:14.000Z (4 months ago)
- Last Synced: 2024-09-19T23:29:51.820Z (2 months ago)
- Topics: focal-point, wordpress
- Language: JavaScript
- Homepage:
- Size: 85 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# focal-point-picker
Zero-dependency [focal point](<[url](https://en.wikipedia.org/wiki/Focus_(optics))>) picker for your WordPress website. Works with older installs, too.
## Installation
### Via Composer (recommended):
1. Install the plugin:
```shell
composer require hirasso/focal-point-picker
```
1. Activate the plugin manually or using WP CLI:
```shell
wp plugin activate hirasso/focal-point-picker
```
### 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
You can retrieve the focal point for an image like this:
```php
$focalPoint = fcp_get_focalpoint($imageID);
var_dump($focalPoint);
```
### 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
### Object Position
```php
#my-image {
height: 300px;
width: 600px;
position: relative;
}
#my-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
```
### Background Position
```php
#my-image {
background-image: url('<?php echo $imageSRC[0]; ?>');
background-size: cover;
height: 300px;
width: 600px;
}
```
### Using `wp_get_attachment_image`
If you are making use of the WordPress function [`wp_get_attachment_image()`](https://developer.wordpress.org/reference/functions/wp_get_attachment_image/), the plugin will automatically inject a class `focal-point-image` and two custom css properties for you to use:
```diff
```
You can use that like this, for example:
```css
.focal-point-image {
aspect-ratio: 16/7; /** or whatever you like */
height: auto;
object-fit: cover;
object-position:
calc(var(--focal-point-left, 0.5) * 100%)
calc(var(--focal-point-top, 0.5) * 100%);
}
```