Alchemy cms

Nesting elements in a gallery

June 16, 2026 ยท The Alchemy Team

Photo-03

Nestable Elements let editors build galleries and other repeating structures.

config/alchemy/elements.yml
- name: post_header
  unique: true
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :post_header_headline
      settings:
        levels: [1, 2]
        sizes: [1, 2]
    - role: published_at
      type: Datetime
      hint: true
    - role: author
      type: Text
      hint: true
      default: :post_header_author
    - role: image
      type: Picture
      hint: true
      settings:
        crop: true
        fixed_ratio: true
        size: "800x450"
        srcset:
          - "400x225"
          - "800x450"
          - "1200x675"
        sizes:
          - "(min-width: 768px) 720px"
          - "100vw"
    - role: intro
      type: Richtext
      hint: true
      default: :post_header_intro
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]

Parents, children and the admin

Any Element can be declared nestable, which lets it contain child Elements of the types it names. A gallery is nothing more than that: an image_gallery parent whose children are gallery_image Elements.

The parent carries whatever applies to the whole group โ€” a headline, and an appearance Select that switches between a grid and a masonry layout. Each child carries one Picture and one caption. Editors add, remove and reorder children by dragging them in the admin, and the frontend simply renders whichever children it finds.

Nesting is not just for galleries. Every content band on the tour pages is a section Element nesting the blocks inside it, which is how one page mixes backgrounds and spacing without a separate page layout per variation.

See all three layouts on the Galleries page.

config/alchemy/elements.yml
- name: prose
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :prose_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: text
      type: Richtext
      hint: true
      default: :prose_text
      settings:
        tinymce:
          toolbar: "bold italic | bullist numlist | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a, ul, ol, li]
          attributes: [href, target, rel, title]