Bricks Schema 中文文档：图片

标签TAGS:

2026年8月30日

📄 原始资料（已截断） | 展开查看原始 JSON（image.json）{ “$schema”: “https://json-schema.org/draft/2020-12/schema”, “$id”: “bricks://elements/image”, “schemaVersion”: “2.3”, “type”: “object”, “title”: “Image”, “description”: “Schema for Bricks Image element”, “metadata”: { “name”: “image”, “category”: “b…

📄 原始资料（已截断） | 展开查看原始 JSON（image.json）

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "bricks://elements/image",
  "schemaVersion": "2.3",
  "type": "object",
  "title": "Image",
  "description": "Schema for Bricks Image element",
  "metadata": {
    "name": "image",
    "category": "basic",
    "tag": "figure",
    "nestable": false
  },
  "settings": {
    "image": {
      "valueSchema": {
        "type": "object",
        "description": "Image settings",
        "properties": {
          "id": {
            "type": [
              "string",
              "integer"
            ]
          },
          "filename": {
            "type": "string"
          },
          "url": {
            "type": "string"
          },
          "size": {
            "type": "string"
          },
          "full": {
            "type": "string"
          },
          "useDynamicData": {
            "type": "string"
          }
        },
        "descriptionZh": "图像设置。"
      },
      "controlType": "image"
    },
    "tag": {
      "label": "HTML tag",
      "options": {
        "figure": "figure",
        "picture": "picture",
        "div": "div",
        "custom": "Custom",
        "divZh": "div",
        "customZh": "自定义"
      },
      "hasRequired": true,
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "HTML 标签"
    },
    "customTag": {
      "label": "Custom tag",
      "hasRequired": true,
      "valueSchema": {
        "type": "string"
      },
      "controlType": "text",
      "labelZh": "自定义标签"
    },
    "sources": {
      "label": "Sources",
      "hasRequired": true,
      "valueSchema": {
        "type": "array",
        "items": {
          "type": "object"
        }
      },
      "controlType": "repeater",
      "labelZh": "来源"
    },
    "altText": {
      "label": "Custom alt text",
      "hasRequired": true,
      "valueSchema": {
        "type": "string"
      },
      "controlType": "text",
      "labelZh": "自定义替代文本"
    },
    "caption": {
      "label": "Caption type",
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "说明类型"
    },
    "captionCustom": {
      "label": "Custom caption",
      "hasRequired": true,
      "valueSchema": {
        "type": "string"
      },
      "controlType": "text",
      "labelZh": "自定义说明"
    },
    "loading": {
      "label": "Loading",
      "options": {
        "eager": "eager",
        "lazy": "lazy"
      },
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "加载"
    },
    "showTitle": {
      "label": "Show title",
      "hasRequired": true,
      "valueSchema": {
        "type": "boolean"
      },
      "controlType": "checkbox",
      "labelZh": "显示标题"
    },
    "stretch": {
      "label": "Stretch",
      "css": [
        {
          "property": "width",
          "value": "100%"
        }
      ],
      "valueSchema": {
        "type": "boolean"
      },
      "controlType": "checkbox",
      "labelZh": "拉伸"
    },
    "link": {
      "options": {
        "lightbox": "Lightbox",
        "attachment": "Attachment Page",
        "media": "Media File",
        "url": "Other (URL)",
        "lightboxZh": "灯箱",
        "attachmentZh": "附件页面",
        "mediaZh": "媒体文件",
        "urlZh": "其他（URL）"
      },
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select"
    },
    "lightboxImageSize": {
      "label": "Image size",
      "hasRequired": true,
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "图片尺寸"
    },
    "lightboxWidth": {
      "label": "Width",
      "hasRequired": true,
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Value with unit (e.g., \"10px\", \"50%\")",
            "descriptionZh": "带单位的值（例如 \"10px\"、\"50%\"）。"
          },
          {
            "type": "number"
          }
        ]
      },
      "controlType": "number",
      "labelZh": "宽度"
    },
    "lightboxHeight": {
      "label": "Height",
      "hasRequired": true,
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Value with unit (e.g., \"10px\", \"50%\")",
            "descriptionZh": "带单位的值（例如 \"10px\"、\"50%\"）。"
          },
          {
            "type": "number"
          }
        ]
      },
      "controlType": "number",
      "labelZh": "高度"
    },
    "lightboxAnimationType": {
      "label": "Animation",
      "options": {
        "none": "None",
        "fade": "Fade",
        "zoom": "Zoom",
        "noneZh": "无",
        "fadeZh": "淡入",
        "zoomZh": "缩放"
      },
      "hasRequired": true,
      "valueSchema": {
        "oneOf": [
          {
            "type": "string",
            "description": "Single selection",
            "descriptionZh": "单选。"
          },
          {
            "type": "array",
            "items": {
              "type": "string"
            },
            "description": "Multiple selection",
            "descriptionZh": "多选。"
          }
        ]
      },
      "controlType": "select",
      "labelZh": "动画"
    },
    "lightboxCaption": {
      "label": "Caption",
      "hasRequired": true,
      "valueSchema": {
        "type": "boolean"
      },
      "controlType": "checkbox",
      "labelZh": "标题"
    },
    "lightboxId": {
      "label": "ID",
      "hasRequired": true,
      "valueSchema": {
        "type": "string"
      },
      "controlType": "text",
      "labelZh": "ID"
    },
    "lightboxCropped": {
      "label": "Cropped",
      "hasRequired": true,
      "valueSchema": {
        "type": "boolean"
      },
      "controlType": "checkbox",
      "labelZh": "裁剪"
    },
    "lightboxPadding": {
      "label": "Padding",
      "hasRequired": true,
      "valueSchema": {
        "type": [
          "string",
          "object",
          "array",
          "boolean",
          "number"
        ]
      },
      "controlType": "dimensions",
      "labelZh": "内边距"
    },
    "newTab": {
      "label": "Open in new tab",
      "hasRequired": true,
      "valueSchema": {
        "type": "boolean"
      }

... (内容过长已截断，完整 JSON 见原始文件)

前言

Bricks Image 元素的 schema。

基本信息

英文名称：Image
中文名称：图片
Schema ID：bricks://elements/image
Schema 版本：2.3
类型：object
分类：basic
Tag：figure
内部名称：image

设置项

image — image (image)
tag — HTML 标签 (select)
customTag — 自定义标签 (text)
sources — 来源 (repeater)
altText — 自定义替代文本 (text)
caption — 说明类型 (select)
captionCustom — 自定义说明 (text)
loading — 加载 (select)
showTitle — 显示标题 (checkbox)
stretch — 拉伸 (checkbox)
link — link (select)
lightboxImageSize — 图片尺寸 (select)
lightboxWidth — 宽度 (number)
lightboxHeight — 高度 (number)
lightboxAnimationType — 动画 (select)
lightboxCaption — 标题 (checkbox)
lightboxId — ID (text)
lightboxCropped — 裁剪 (checkbox)
lightboxPadding — 内边距 (dimensions)
newTab — 在新标签页打开 (checkbox)
url — url (link)
lightboxAriaLabel — aria-label (text)
lightboxTitle — 标题 (text)
popupIconDisable — 禁用图标 (checkbox)
popupIcon — 图标 (icon)
popupIconBackgroundColor — 图标背景色 (color)
popupIconBorder — 图标边框 (border)
popupIconBoxShadow — 图标盒子阴影 (box-shadow)
popupIconTypography — 图标排版 (typography)
popupIconHeight — 图标高度 (number)
popupIconWidth — 图标宽度 (number)
popupIconTransition — 图标过渡 (text)
mask — 遮罩 (select)
maskCustom — maskCustom (image)
maskSize — 尺寸 (select)
maskSizeCustom — 自定义尺寸 (number)
maskPosition — 位置 (select)
maskRepeat — 重复 (select)
_content — 内容 (text)
_margin — 外边距 (spacing)
_padding — 内边距 (spacing)
_width — 宽度 (number)
_widthMin — 最小宽度 (number)
_widthMax — 最大宽度 (number)
_height — 高度 (number)
_heightMin — 最小高度 (number)
_heightMax — 最大高度 (number)
_aspectRatio — 宽高比 (text)
_position — 位置 (select)
_top — 顶部 (number)
_right — 右侧 (number)
_bottom — 底部 (number)
_left — 左侧 (number)
_zIndex — Z 索引 (number)
_order — 顺序 (number)
_display — 显示 (select)
_visibility — 可见性 (select)
_overflow — 溢出 (text)
_opacity — 不透明度 (number)
_cursor — 光标 (select)
_isolation — 隔离 (select)
_mixBlendMode — 混合模式 (select)
_pointerEvents — 指针事件 (text)
_perspective — 透视 (number)
_perspectiveOrigin — 透视原点 (text)
_gridItemJustifySelf — 自身水平对齐 (align-items)
_flexDirection — 方向 (direction)
_alignSelf — 自身对齐 (align-items)
_justifyContent — 主轴对齐 (justify-content)
_alignItems — 交叉轴对齐 (align-items)
_gap — 间距 (number)
_flexGrow — 放大比例 (number)
_flexShrink — 缩小比例 (number)
_flexBasis — 伸缩基准 (text)
_useMasonry — %s 布局 (checkbox)
_masonryColumn — 列数 (number)
_masonryGutter — 间距 (number)
_masonryHorizontalOrder — 水平顺序 (checkbox)
_masonryTransitionDuration — 过渡 (number)
_masonryTransitionMode — 显现动画 (select)
_typography — _typography (typography)
_background — _background (background)
_shapeDividers — 自定义形状 (repeater)
_gradient — _gradient (gradient)
_border — 边框 (border)
_boxShadow — 盒子阴影 (box-shadow)
_transform — 变换 (transform)
_transformOrigin — 变换原点 (text)
_motionElementParallax — 元素视差 (checkbox)
_motionElementParallaxSpeedX — 水平速度 (number)
_motionElementParallaxSpeedY — 垂直速度 (number)
_motionBackgroundParallax — 背景视差 (checkbox)
_motionBackgroundParallaxSpeed — 背景速度 (number)
_motionStartVisiblePercent — 视差起点 (number)
_cssCustom — 自定义 CSS (code)
_cssClasses — CSS 类 (text)
_cssId — CSS ID (text)
_cssFilters — CSS 滤镜 (filters)
_cssTransition — 过渡 (text)
_attributes — 姓名 (repeater)
_scrollSnapType — 类型 (select)
_scrollSnapAlign — 对齐 (select)
_scrollSnapStop — 停止 (select)

补充说明

更多细节可参考 Bricks 官方 Academy 文档。