README

Donkeytail是一个Craft CMS 4字段类型，允许您快速轻松地管理图像上的元素点。您可以用于伪地图上的位置、在图像中展示多个产品，甚至是在驴尾巴上固定。

关注simplygoodwork的Twitter账号以获取更新@simplygoodwork。

要求

此插件需要Craft CMS 4.0.0-alpha或更高版本。

安装

要安装此插件，请按照以下说明操作。

1. 打开您的终端并转到您的Craft项目

   cd /path/to/project
   

2. 然后告诉Composer加载插件

   composer require simplygoodwork/craft-donkeytail
   

3. 在控制面板中，转到设置 → 插件，然后点击Donkeytail的“安装”按钮。

使用

术语

在Donkeytail中，您要添加点的图像资产称为画布，您要添加的点称为图钉。

模板化

以下属性可以从您的donkeytail字段中获取

• canvas: 画布资产元素。

• pins: 附加到画布的图钉数组

  • element: 图钉元素。

  • x: 图钉锚点的左百分比值相对于画布（不带%后缀）。

  • left: 图钉锚点的左百分比值相对于画布（带%后缀）。

  • y: 图钉锚点的顶部百分比值相对于画布（不带%后缀）。

  • top: 图钉锚点的顶部百分比值相对于画布（带%后缀）。

  • style: 返回顶部和左边的百分比作为CSS样式属性和值。

    • 例如 top: 42.121%; left: 88.1337%;。

GraphQL

以下属性可以通过graphql访问您的donkeytail字段

• canvas: 画布资产元素。

• pins: 附加到画布的图钉

  • x: 图钉锚点的左百分比值相对于画布（不带%后缀）。

  • y: 图钉锚点的顶部百分比值相对于画布（不带%后缀）。

• {entry, asset, user, category, product, variant}: 图钉元素。

实际案例

您需要像通常在模板中一样自行渲染画布资产。

实际案例可能有一个包含画布的父容器，具有position: relative。然后可以将点设置为position: absolute，并使用内联样式属性和{{ entry.donkeytailField.style }}输出其位置。别忘了使用负边距或类似的方法将您的前端标记的点移动到与点匹配的锚点，并将{donkeytailField}替换为您的Donkeytail字段句柄

<div style="width: 50%; position: relative;">
  <img src="{{ entry.{donkeytailField}.canvas.url }}">
  {% for pin in entry.{donkeytailField}.pins %}
    <div style="position: absolute; z-index: 10; width: 10px; height: 10px; background-color: red; top:{{ pin.y }}%;left:{{ pin.x }}%;"></div>
  {% endfor %}
</div>

或者，如果您想默认显示字幕

<div style="width: 50%; position: relative;">
  <img src="{{ entry.{donkeytailField}.canvas.url }}">
  {% for pin in entry.{donkeytailField}.pins %}
    <div style="position: absolute; z-index: 10; width: 10px; height: 10px; background-color: red; top:{{ pin.y }}%;left:{{ pin.x }}%;"></div>
    <div style="position: absolute; z-index: 10; background-color: rgba(0,0,0,.8); color: white; top:{{ pin.y }}%;left:{{ pin.x }}%;transform:translate(-50%, 100%);">
      {{ pin.element.title }}
    </div>
  {% endfor %}
</div>

由Good Work提供。快乐地固定吧！