特色
- 可选择插入图片的尺寸
- 自动根据屏幕尺寸适配调用合适尺寸的图片显示
- 设置图片描述内容
- 使用灯箱效果放大图片
配置选项
基本设置
全局样式
Select
区块对应的全局块样式。
文件
Select
从媒体库中选择或上传图片文件。
图片尺寸
Select
选择该图片需要的尺寸显示到页面中。
替代文本
String
为图片元素添加 alt 属性,详细说明可参考 HTML 标签: img。
显示描述
Boolean
图片是否添加描述信息。
描述文本
Select
开启显示描述后有效,为图片设置描述内容显示在页面中。
点击展开
Boolean
启用后,点击图片可采用灯箱形式放大显示。
链接
链接地址
string
设置链接地址,可设置为媒体文件地址或附件页面地址,也可输入绝对地址或输入关键字查找网站内的页面地址。支持的形式包括:
- 以 http 或 https 开头的固定链接
- 以 # 开头的锚点
- 以 mailto 开头的邮箱地址
- 以 tel 开头的电话地址
新窗口打开
Boolean
是否在新窗口打开链接页面。
辅助描述
String
为链接添加 aria-label 属性,详细说明可参考 HTML 属性: aria-label。
Rel 属性
Select
为链接标签添加 Rel 属性,详细说明可参考 HTML 属性: rel。
元素
<figure class="mk-image">
<img ...设置的图片信息>
<figcaption>...设置的图片描述内容</figcaption>
</figure>
- 主容器
.mk-image
- 图像
img
- 描述
figcaption
其他
- 图片区块添加固定链接与启用的“点击展开”效果尽量不要同时设置。