README

此包为 Ibexa 3.3+ 提供图像映射字段类型。

安装

添加依赖项

要安装此包，请运行以下命令

$ composer require onisep/ibexa-imagemap-bundle

注册包

在 config/bundles.php 文件中添加以下代码： Onisep\IbexaImageMapBundle\OnisepImageMapBundle::class => ['all' => true],

更新数据库

此包使用 Doctrine DBAL 将图像映射区域数据存储到数据库表（onisep_imagemap）中。

如果您使用 Doctrine 迁移包或 Phinx 或 Kaliop 迁移包或其他，您可以使用此命令生成的 SQL 查询添加新迁移

$ bin/console onisep:imagemap:dump-schema

如果您已经有了表，您可以使用此命令生成的更新 SQL 查询添加新迁移

$ bin/console onisep:imagemap:dump-schema --update

构建资源

构建管理端资源

yarn encore prod --config-name=ezplatform

对于前端资源，您需要在您的入口点中导入包文件。例如，如果您的入口点名为 app 并且在 assets/app.js 文件中定义，您需要在 assets/app.js 文件中添加以下行

import '../vendor/onisep/ibexa-imagemap-bundle/src/Resources/public/build/imagemap_styles.css';
import '../vendor/onisep/ibexa-imagemap-bundle/src/Resources/public/build/imagemap';

然后构建您的资源

yarn encore prod --config-name=app

用法

创建字段

首先，将图像映射字段添加到任何内容类型，就像为其他字段所做的那样。

您可以在图像映射中配置允许链接的内容类型。

创建图像映射

图像映射字段编辑 UI 看起来像这样

第一步是使用上传小部件上传图像文件。

然后，使用按钮绘制区域。您可以绘制矩形、圆形和多边形。单击其中一个按钮后，将显示有关如何绘制每种形状的帮助信息。

绘制后，可以通过拖放来移动和调整区域的大小。

每个区域都可以在图像下方进行配置。

链接类型
- 外部：只需在输入字段中输入目标 URL
- 内部：浏览并选择目标内容
目标
- 新标签页：在新标签页中打开链接
- 相同标签页：在同一标签页中打开链接
- 嵌入（仅内部链接）：在图像下方显示内容的嵌入视图
- 弹出（仅内部链接）：在弹出窗口中显示内容的嵌入视图
锚点（仅嵌入）：嵌入元素的自定义锚点
描述：此区域的 title HTML 属性

问题和功能请求

请在 https://github.com/onisep/ibexa-imagemap-bundle/issues 上报告问题并请求功能。

贡献

欢迎贡献。请参阅 CONTRIBUTING.md 以获取详细信息。感谢所有已经做出贡献的人。

许可证

此包根据 MIT 许可证许可。

onisep / ibexa-imagemap-bundle

维护者

详细信息