Craft-FocusPoint 插件使用教程

Craft-FocusPoint 插件使用教程

1. 项目的目录结构及介绍

Craft-FocusPoint 插件的目录结构如下：

Craft-FocusPoint/
├── focuspoint/
│   ├── screenshots/
│   ├── gitignore
│   ├── LICENSE.md
│   ├── README.md
│   ├── changelog.json
│   └── ...
├── .gitignore
├── LICENSE.md
├── README.md
└── ...

• focuspoint/：插件的主要文件夹，包含插件的核心代码和资源。
  • screenshots/：存放插件的截图文件。
  • gitignore：Git 忽略文件。
  • LICENSE.md：插件的许可证文件。
  • README.md：插件的说明文档。
  • changelog.json：插件的更新日志。
• .gitignore：Git 忽略文件。
• LICENSE.md：插件的许可证文件。
• README.md：插件的说明文档。

2. 项目的启动文件介绍

Craft-FocusPoint 插件的启动文件主要是 focuspoint/ 目录下的文件。具体来说，插件的初始化和加载主要依赖于 Craft CMS 的插件机制。

3. 项目的配置文件介绍

Craft-FocusPoint 插件的配置文件主要是 focuspoint/ 目录下的文件。具体来说，插件的配置主要通过 Craft CMS 的后台管理界面进行设置。

配置步骤

1. 安装插件：

   • 下载最新版本的插件并解压。
   • 将 focuspoint/ 文件夹复制到 Craft CMS 的插件目录中。
   • 在 Craft CMS 的后台管理界面中启用插件。

2. 创建焦点点字段：

   • 在 Craft CMS 的后台管理界面中创建一个新的字段，类型选择为 "Focus Point"。
   • 在内容中选择每个上传资产的坐标。

3. 在前端模板中使用：

   • 在模板中访问焦点点数据，示例如下：

{% set image = entry.image.first() %}
<div class="focuspoint" data-focus-x="{{ image.focusX }}" data-focus-y="{{ image.focusY }}" data-image-w="{{ image.width }}" data-image-h="{{ image.height }}">
    <img src="{{ image.url }}">
</div>

通过以上步骤，您可以在 Craft CMS 中使用 Craft-FocusPoint 插件来管理图片的焦点点。