加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
网页编辑器
MooKwai特色块图片

图片

在页面中插入一个图片元素,支持多种图片格式文件。

文章目录

特色

  • 可选择插入图片的尺寸
  • 自动根据屏幕尺寸适配调用合适尺寸的图片显示
  • 设置图片描述内容
  • 使用灯箱效果放大图片

配置选项

基本设置

全局样式

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

其他

  • 图片区块添加固定链接与启用的“点击展开”效果尽量不要同时设置。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧