name: Gallery Feature
description: Display a gallery feature.
type: particle

configuration:
  caching:
    type: static

form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable gallery feature particles.
      default: true

    _note:
      type: separator.note
      class: alert alert-info
      content: '<strong>This Particle requires the "UIkit for Gantry5" Atom to be loaded.</strong>'

    layout:
      type: select.select
      label: Layout
      description: Select the layout for this particle.
      placeholder: 'Select...'
      default: left
      options:
        right: Gallery on the right
        left: Gallery on the left

    gallerywidth:
      type: input.text
      label: Gallery Width
      description: Type in the width of the Gallery block in percentage. It must be a digit between 0 and 100. The default is '50'.
      default: 50

    columns:
      type: select.select
      label: Gallery Columns
      description: Select the number of images per row (columns).
      placeholder: 'Select...'
      default: 3
      options:
        1: 1
        2: 2
        3: 3
        4: 4
        5: 5
        6: 6

    gutter:
      type: select.select
      label: Gallery Gutter
      description: Enable or disable the Gallery gutter (to have space between the items or not).
      placeholder: 'Select...'
      default: enabled
      options:
        enabled: Enabled
        disabled: Disabled

    items:
      type: collection.list
      array: true
      label: Gallery Items
      description: Create each gallery item to display.
      value: name
      ajax: true

      fields:

        .image:
          type: input.imagepicker
          label: Image

        .alt:
          type: input.text
          label: Image Alt Tag

        .title:
          type: input.text
          label: Title

        .class:
          type: input.selectize
          label: CSS Class

        .extra:
          type: collection.keyvalue
          label: Tag Attributes
          description: Extra Tag attributes.
          key_placeholder: Key (data-*, style, ...)
          value_placeholder: Value
          exclude: ['id', 'class']

    title:
      type: input.text
      label: Title
      description: Type in the title text.
      placeholder: Enter title

    description:
      type: textarea.textarea
      label: Description
      description: Type in the description text.
      placeholder: Enter description

    link:
      type: input.text
      label: Button Link
      description: Type in the URL.

    buttontext:
      type: input.text
      label: Button Text
      description: Type in the button text.

    buttonicon:
      type: input.icon
      label: Button Icon
      description: Select an icon for the button.

    target:
      type: select.select
      label: Target
      description: Target browser window when item is clicked.
      placeholder: 'Select...'
      default: _parent
      options:
          _parent: Self
          _blank: New Window

    css.class:
      type: input.selectize
      label: General CSS Classes
      description: CSS class name for the whole particle.
      default: 

    css.left:
      type: input.selectize
      label: Left CSS Classes
      description: CSS class name for the left element.
      default:

    css.right:
      type: input.selectize
      label: Right CSS Classes
      description: CSS class name for the right element.
      default:

    extra:
      type: collection.keyvalue
      label: General Tag Attributes
      description: Extra Tag attributes for the whole particle.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']

    extra_left:
      type: collection.keyvalue
      label: Left Tag Attributes
      description: Extra Tag attributes for the left element.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']

    extra_right:
      type: collection.keyvalue
      label: Right Tag Attributes
      description: Extra Tag attributes for the right element.
      key_placeholder: Key (data-*, style, ...)
      value_placeholder: Value
      exclude: ['id', 'class']
