Before/after image

真实模板变体

Schema

{
  "name": "Before/after image",
  "class": "section-before-after",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Image Comparison"
    },
    {
      "type": "checkbox",
      "id": "heading_left",
      "default": false,
      "label": "Left align heading"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "<p>Add a short description for your image comparison</p>"
    },
    {
      "type": "select",
      "id": "desktop_height",
      "label": "Desktop height",
      "options": [
        {
          "value": "desktop-height-image",
          "label": "Adapt to image"
        },
        {
          "value": "desktop-height-450",
          "label": "450px"
        },
        {
          "value": "desktop-height-550",
          "label": "550px"
        },
        {
          "value": "desktop-height-650",
          "label": "650px"
        },
        {
          "value": "desktop-height-750",
          "label": "750px"
        }
      ],
      "default": "desktop-height-650"
    },
    {
      "type": "select",
      "id": "mobile_height",
      "label": "Mobile height",
      "options": [
        {
          "value": "mobile-height-image",
          "label": "Adapt to image"
        },
        {
          "value": "mobile-height-350",
          "label": "350px"
        },
        {
          "value": "mobile-height-400",
          "label": "400px"
        },
        {
          "value": "mobile-height-450",
          "label": "450px"
        },
        {
          "value": "mobile-height-500",
          "label": "500px"
        }
      ],
      "default": "mobile-height-500"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Make section full width",
      "default": true
    },
    {
      "type": "range",
      "id": "initial_position",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "Drag initial position",
      "default": 50
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "line_color",
      "label": "Lines",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_top_spacing",
      "default": false,
      "label": "Remove top spacing"
    },
    {
      "type": "checkbox",
      "id": "disable_bottom_spacing",
      "default": false,
      "label": "Remove bottom spacing"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "1340 x 650 .jpg recommended."
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image (optional)"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Column",
          "label": "Heading"
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "Heading size",
          "options": [
            {
              "value": "h1",
              "label": "Extra large"
            },
            {
              "value": "h2",
              "label": "Large"
            },
            {
              "value": "h3",
              "label": "Medium"
            },
            {
              "value": "h4",
              "label": "Small"
            }
          ],
          "default": "h3"
        },
        {
          "type": "select",
          "id": "heading_position",
          "label": "Heading position",
          "options": [
            {
              "value": "top",
              "label": "Top"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "bottom",
              "label": "Bottom"
            }
          ],
          "default": "top"
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text",
          "default": "#151515"
        },
        {
          "type": "color",
          "id": "overlay_color",
          "label": "Overlay",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Overlay opacity",
          "default": 0
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Before/after image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}