README

为您的 WordPress 网站提供零依赖的焦点选择器。也适用于旧版本安装。

安装

通过 Composer（推荐）

1. 安装插件

composer require hirasso/focal-point-picker

1. 手动激活插件或使用 WP CLI

wp plugin activate hirasso/focal-point-picker

手动

1. 下载并解压插件
2. 将 focal-point-picker 文件夹复制到您的 wp-content/plugins 文件夹
3. 通过插件管理页面激活插件 – 完成！
4. 通过 afragen/git-updater 处理更新

数据结构

您可以像这样检索图像的焦点点

$focalPoint = fcp_get_focalpoint($imageID);
var_dump($focalPoint);

输出

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)
}

在您的模板中使用

对象位置

<?php

$imageID = 1234;
$imageSRC = wp_get_attachment_image_src($imageID)['large'];
$focus = fcp_get_focalpoint($imageID);

?>

<style>
#my-image {
  height: 300px;
  width: 600px;
  position: relative;
}
#my-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<div id="my-image">
  <img
    src="<?= $imageSRC[0] ?>"
    style="object-position: <?= $focus->leftPercent ?? 50 ?>% <?= $focus->topPercent ?? 50 ?>%;">
</div>

背景位置

<?php

$imageID = 1234;
$imageSRC = wp_get_attachment_image_src($imageID)['large'];
$focus = fcp_get_focalpoint($imageID);

?>

<style>
#my-image {
  background-image: url('<?php echo $imageSRC[0]; ?>');
  background-size: cover;
  height: 300px;
  width: 600px;
}
</style>

<div
  id="my-image"
  style="background-position: <?= $focus->leftPercent ?? 50 ?>% <?= $focus->topPercent ?? 50 ?>%;">
</div>

使用 wp_get_attachment_image

如果您正在使用 WordPress 函数 wp_get_attachment_image()，则插件将自动注入一个类 focal-point-image 和两个自定义 CSS 属性供您使用

<img
  width="150"
  height="150"
  src="http://example.com/wp-content/uploads/bear-150x150.png"
+ class="attachment-thumbnail size-thumbnail focal-point-image"
  alt=""
  decoding="async"
  loading="lazy"
+ style="--focal-point-left: 0.46; --focal-point-top: 0.2"
>

您可以使用它，例如这样

.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%);
}