# 🚀 Guide de démarrage rapide

## Installation rapide

1. Activez le plugin dans WordPress
2. C'est tout ! Le plugin fonctionne automatiquement 🎉

## Utilisation

### Pour l'éditeur classique (avec ACF)

1. **Éditez un article/page** avec une image mise en avant
2. **Trouvez la meta box "Image mise en avant"** dans la sidebar
3. **Le focal point picker apparaît sous l'image** automatiquement
4. **Cliquez sur l'image** pour définir le point focal
5. **Enregistrez** votre article

```
┌─────────────────────────────────┐
│  Image mise en avant            │
├─────────────────────────────────┤
│  [Image de la thumbnail]        │
│         ┌─┴─┐                   │
│         │ + │  ← Point focal    │
│         └───┘                   │
│                                 │
│  ─────────────────────────      │
│  Point focal de recadrage       │
│  [Picker interactif]            │
│  Position : 65% / 40%           │
└─────────────────────────────────┘
```

### Pour l'éditeur Gutenberg

1. **Définissez une image mise en avant**
2. **Ouvrez le panneau "Point focal de la miniature"** dans la sidebar
3. **Cliquez sur l'image** pour définir le focal point
4. Le point focal est **sauvegardé automatiquement**

## Utilisation dans vos templates

### Méthode simple

```php
<?php
// Récupérer la position CSS directement
$focal_position = get_thumbnail_focal_point_css();

// Utiliser avec object-position
the_post_thumbnail('large', [
    'style' => 'object-fit: cover; object-position: ' . $focal_position
]);
?>
```

### Avec background-image

```php
<div style="
    background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);
    background-size: cover;
    background-position: <?php echo get_thumbnail_focal_point_css(); ?>;
    height: 400px;
">
    <h1><?php the_title(); ?></h1>
</div>
```

## Fonctions disponibles

| Fonction                                  | Retour                       | Exemple                    |
| ----------------------------------------- | ---------------------------- | -------------------------- |
| `get_thumbnail_focal_point($post_id)`     | `['x' => 0.65, 'y' => 0.40]` | Valeurs brutes (0 à 1)     |
| `get_thumbnail_focal_point_css($post_id)` | `"65% 40%"`                  | Format CSS prêt à l'emploi |

**Note** : `$post_id` est optionnel. Si omis, utilise l'article courant.

## Exemples de cas d'usage

### 1. Cards d'articles

```php
<article class="card">
    <?php
    the_post_thumbnail('medium', [
        'class' => 'card-image',
        'style' => 'width: 100%; height: 200px; object-fit: cover; object-position: ' . get_thumbnail_focal_point_css()
    ]);
    ?>
    <h2><?php the_title(); ?></h2>
</article>
```

### 2. Hero banner

```php
<section class="hero" style="
    background-image: url(<?php echo get_the_post_thumbnail_url(null, 'full'); ?>);
    background-position: <?php echo get_thumbnail_focal_point_css(); ?>;
    background-size: cover;
">
    <div class="hero-content">
        <h1><?php the_title(); ?></h1>
    </div>
</section>
```

### 3. Grille responsive

```php
<div class="image-grid">
    <?php while (have_posts()): the_post(); ?>
        <div class="grid-item">
            <?php
            the_post_thumbnail('large', [
                'style' => 'object-fit: cover; object-position: ' . get_thumbnail_focal_point_css()
            ]);
            ?>
        </div>
    <?php endwhile; ?>
</div>
```

## Format des données

Les données sont stockées dans la table `wp_postmeta` :

```json
{
	"x": 0.65,
	"y": 0.4
}
```

Où :

- `x: 0` = gauche, `x: 0.5` = centre, `x: 1` = droite
- `y: 0` = haut, `y: 0.5` = milieu, `y: 1` = bas

## Support

Pour plus de détails, consultez le fichier `README.md` ou `example-usage.php`.