🚀 Guide de démarrage rapide

Installation rapide

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

Utilisation

Pour l'éditeur classique (avec ACF)

Éditez un article/page avec une image mise en avant
Trouvez la meta box "Image mise en avant" dans la sidebar
Le focal point picker apparaît sous l'image automatiquement
Cliquez sur l'image pour définir le point focal
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

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

Utilisation dans vos templates

Méthode simple

<?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

<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

<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

<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

<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 :

{
	"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.

4.1 KiB Raw Blame History