<?php

/**
 * Exemples d'utilisation du plugin Focal Point
 * 
 * Ces exemples peuvent être utilisés dans vos templates WordPress
 */

// ============================================
// EXEMPLE 1 : Utiliser object-position avec la thumbnail
// ============================================
?>

<!-- Dans votre template (ex: single.php, archive.php, etc.) -->
<article class="post-card">
	<?php if (has_post_thumbnail()): ?>
		<div class="post-thumbnail">
			<?php
			$focal_position = get_thumbnail_focal_point_css();
			the_post_thumbnail('large', [
				'style' => 'width: 100%; height: 300px; object-fit: cover; object-position: ' . esc_attr($focal_position) . ';'
			]);
			?>
		</div>
	<?php endif; ?>

	<h2><?php the_title(); ?></h2>
	<div class="excerpt"><?php the_excerpt(); ?></div>
</article>

<?php
// ============================================
// EXEMPLE 2 : Utiliser background-position
// ============================================
?>

<div class="hero-banner" style="
	background-image: url(<?php echo esc_url(get_the_post_thumbnail_url(null, 'full')); ?>);
	background-size: cover;
	background-position: <?php echo esc_attr(get_thumbnail_focal_point_css()); ?>;
	min-height: 400px;
">
	<h1><?php the_title(); ?></h1>
</div>

<?php
// ============================================
// EXEMPLE 3 : CSS externe avec variable personnalisée
// ============================================
$focal_point = get_thumbnail_focal_point();
?>

<div class="custom-image" style="
	--focal-x: <?php echo esc_attr($focal_point['x'] * 100); ?>%;
	--focal-y: <?php echo esc_attr($focal_point['y'] * 100); ?>%;
">
	<?php the_post_thumbnail('large'); ?>
</div>

<style>
	.custom-image img {
		width: 100%;
		height: 400px;
		object-fit: cover;
		object-position: var(--focal-x) var(--focal-y);
	}
</style>

<?php
// ============================================
// EXEMPLE 4 : Utilisation dans une boucle WP_Query
// ============================================
$query = new WP_Query([
	'post_type' => 'post',
	'posts_per_page' => 6
]);

if ($query->have_posts()):
	while ($query->have_posts()): $query->the_post();
?>
		<div class="grid-item">
			<?php
			$focal_position = get_thumbnail_focal_point_css(get_the_ID());
			if (has_post_thumbnail()):
			?>
				<div class="item-image">
					<?php
					the_post_thumbnail('medium', [
						'style' => 'width: 100%; height: 200px; object-fit: cover; object-position: ' . esc_attr($focal_position) . ';'
					]);
					?>
				</div>
			<?php endif; ?>
			<h3><?php the_title(); ?></h3>
		</div>
		<?php
	endwhile;
	wp_reset_postdata();
endif;

// ============================================
// EXEMPLE 5 : Avec ACF Repeater
// ============================================
if (have_rows('articles_slider')):
	while (have_rows('articles_slider')): the_row();
		$post_object = get_sub_field('article');
		if ($post_object):
			$post_id = $post_object->ID;
			$focal_position = get_thumbnail_focal_point_css($post_id);
		?>
			<div class="slide">
				<?php
				echo get_the_post_thumbnail($post_id, 'large', [
					'style' => 'object-fit: cover; object-position: ' . esc_attr($focal_position) . ';'
				]);
				?>
			</div>
<?php
		endif;
	endwhile;
endif;

// ============================================
// EXEMPLE 6 : Classes CSS avec attributs data
// ============================================
$focal_point = get_thumbnail_focal_point();
?>

<div
	class="responsive-image"
	data-focal-x="<?php echo esc_attr($focal_point['x']); ?>"
	data-focal-y="<?php echo esc_attr($focal_point['y']); ?>">
	<?php the_post_thumbnail('large'); ?>
</div>

<style>
	.responsive-image {
		position: relative;
		width: 100%;
		aspect-ratio: 16/9;
		overflow: hidden;
	}

	.responsive-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position:
			calc(var(--focal-x, 0.5) * 100%) calc(var(--focal-y, 0.5) * 100%);
	}
</style>

<script>
	// Appliquer les valeurs de focal point aux variables CSS
	document.querySelectorAll('.responsive-image').forEach(el => {
		const x = el.dataset.focalX || 0.5;
		const y = el.dataset.focalY || 0.5;
		el.style.setProperty('--focal-x', x);
		el.style.setProperty('--focal-y', y);
	});
</script>