161 lines
4.2 KiB
PHP
161 lines
4.2 KiB
PHP
<?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>
|