README

一个灵活的Craft CMS字段类型，允许内容编辑器创建和管理交互式图像，用于位置地图、产品提示、功能提示等。

字段配置截图

内容编辑器界面截图

前端示例截图

特性

• 创建和管理交互式图像
• 向图像添加多个标记
• 易于使用的拖放界面
• 向单个图像添加多个元素类型的标记
• 通过标记面板轻松查看哪些元素被标记，哪些未被标记
• 前端使用简单

即将推出

• 前端JavaScript助手，使其在前端使用更加方便
• 前端Twig助手，使其在前端使用更加方便

前端示例使用

<div class="backdrop">
	<img src="{{ entry.<pinBoardField>.backdrop.url }}"/>
	
  {# loop over our pins, setting their top and left CSS attributes to position them #}
  {% for pin in entry.<pinBoardField>.pins %}

		{% set pinStyle = "top:" ~ pin.y ~ "%; left:" ~ pin.x ~ "%; ;transform: translate(-50%, -50%)" %}
		{% set labelStyle = "top:" ~ pin.y ~ "%; left:" ~ pin.x ~ "%; ;transform: translate(-50%, calc(-100% + -20px))" %}

		<div class="pin" style="{{pinStyle}}"></div>
		<div class="pinLabel" style="{{labelStyle}}">
			{{ pin.title }}
		</div>
	{% endfor %}
</div>


<!-- You'll usually place your styles in a seperate file but this works for a demo -->
<style>

	.backdrop {
		width: 80%;
		position: relative;
	}

  {# it is important to set the image with to no more than 100% #}
	.backdrop img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.pin {
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: black;
		border: 2px solid white;
		border-radius: 50%;
	}

	.pinLabel {
		position: absolute;
		background-color: white;
		padding: 5px;
		border-radius: 5px;
	}
</style>