Core concept

Nesting & Galleries

You can define any Element as nestable, so it holds child Elements. The slider and gallery below both nest gallery_image Elements, each a Picture served responsively; the same children are shown three ways: an autoplaying slider, a grid and a masonry.

Alchemy provides the nesting and the typed Ingredients. The three layouts are this demo's own frontend code — view partials, plus an <alchemy-slider> custom element for the carousel — not built-in widgets. Your application renders nested Elements however it likes.

config/alchemy/elements.yml

- name: concept_intro
  hint: true
  ingredients:
    - role: eyebrow
      type: Text
      hint: true
      default: :concept_intro_eyebrow
    - role: headline
      type: Headline
      as_element_title: true
      hint: true
      default: :concept_intro_headline
      settings:
        levels: [1, 2]
        sizes: [1, 2]
        anchor: from_value
    - role: lead
      type: Richtext
      hint: true
      default: :concept_intro_lead
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]

Edit this element in the admin →

Image slider

config/alchemy/elements.yml

- name: slider
  hint: true
  nestable_elements:
    - gallery_image
  autogenerate:
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :gallery_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: autoplay
      type: Boolean
      group: styling
      hint: true
      default: true
    - role: duration
      type: Number
      group: styling
      hint: true
      default: 4000
      settings:
        input_type: number
        min: 1000
        max: 10000
        step: 500
        unit: ms
    - role: transition
      type: Number
      group: styling
      hint: true
      default: 500
      settings:
        input_type: range
        min: 100
        max: 1500
        step: 100
        unit: ms
    - role: per_slide
      type: Select
      group: styling
      hint: true
      default: "1"
      settings:
        select_values:
          - ["One", "1"]
          - ["Two", "2"]
          - ["Three", "3"]

Edit this element in the admin →

Picture gallery

config/alchemy/elements.yml

- name: image_gallery
  hint: true
  nestable_elements:
    - gallery_image
  autogenerate:
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :gallery_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: appearance
      type: Select
      group: styling
      hint: true
      default: grid
      settings:
        select_values:
          - ["Grid", "grid"]
          - ["Masonry", "masonry"]

Edit this element in the admin →

Masonry gallery

config/alchemy/elements.yml

- name: image_gallery
  hint: true
  nestable_elements:
    - gallery_image
  autogenerate:
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
    - gallery_image
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :gallery_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: appearance
      type: Select
      group: styling
      hint: true
      default: grid
      settings:
        select_values:
          - ["Grid", "grid"]
          - ["Masonry", "masonry"]

Edit this element in the admin →