README

简短视频介绍

安装插件

在克隆插件后，您仍然需要安装 npm 依赖项。转到位于 PLUGIN/src/Resources/app/administration 的管理插件文件夹，并运行 npm install。

现在您可以构建管理界面了。

如何使用热点显示自定义媒体字段

还可以在通过自定义字段生成的媒体类型上显示图像热点。

首先，当然您需要创建自定义媒体类型。

因为自定义字段中的媒体类型仅支持紧凑型媒体上传器，所以我们需要在媒体库中直接设置热点。

转到您的媒体库，然后转到热点图像文件夹 媒体 > 热点图像 并上传您的图像。

打开上下文菜单并点击 设置图像热点。

接下来，会弹出一个新窗口，您可以在这里添加热点。只需在图像上的某个位置左键单击即可创建新的热点。

添加所有热点后，点击保存保存您的新图像热点文件，您现在可以选择用于自定义字段：例如，在产品中。

店面集成

最后，您需要一些代码来在店面中显示带有图像热点的自定义媒体字段。

为此，以下代码将获取自定义媒体字段并显示热点

{# get the media ID of the custom field #}
{% set hotspotMediaId = page.product.customFields.your_media_custom_field %}

# fetch media as batch - optimized for performance #}
{% set mediaCollection = searchMedia([hotspotMediaId], context.context) %}

{# extract single media object #}
{% set hotspotMedia = mediaCollection.get(hotspotMediaId) %}

{# generate the thumbnail and passing the hotspotEnabled option  #}
{% sw_thumbnails 'hotspot-image' with {
    media: hotspotMedia,
    hotspotEnabled: true
} %}

sas / image-hotspot

维护者

详细信息

README

简短视频介绍

安装插件

如何使用热点显示自定义媒体字段

店面集成