Using arrays to make a gallery

Last modified: January 15th, 2024

Create reusable components which content editors use to create their own feature-rich pages. To set up a structure, you define the different components available. CloudCannon then provides editors the option to select one of the components when adding an item to the array. This adds that component to the array where they can then fill out the inputs.

For example, set the structure for new items in a gallery array with:

Configuration
copied
_structures:
  gallery:
    style: modal
    values:
      - label: Image
        icon: image
        tags:
          - Media
          - Asset
        value:
          image: /uploads/placeholder.png
          caption: 
        preview:
          gallery:
            image: /path/to/source-image.png
      - label: External link
        icon: link
        tags:
          - Media
        value:
          url: 
          title: 
Configuration
copied
{
  "_structures": {
    "gallery": {
      "style": "modal",
      "values": [
        {
          "label": "Image",
          "icon": "image",
          "tags": [
            "Media",
            "Asset"
          ],
          "value": {
            "image": "/uploads/placeholder.png",
            "caption": null
          },
          "preview": {
            "gallery": {
              "image": "/path/to/source-image.png"
            }
          }
        },
        {
          "label": "External link",
          "icon": "link",
          "tags": [
            "Media"
          ],
          "value": {
            "url": null,
            "title": null
          }
        }
      ]
    }
  }
}
Configuration
copied
[_structures.gallery]
style = "modal"

  [[_structures.gallery.values]]
  label = "Image"
  icon = "image"
  tags = [ "Media", "Asset" ]

    [_structures.gallery.values.value]
    image = "/uploads/placeholder.png"

[_structures.gallery.values.preview.gallery]
image = "/path/to/source-image.png"

  [[_structures.gallery.values]]
  label = "External link"
  icon = "link"
  tags = [ "Media" ]

    [_structures.gallery.values.value]

Related Articles

Open in a new tab