Directory:~$ /home/lmsyaran/public_html/templates/g5_hydrogen/custom/particles/

Upload File

[Home] [System Details] [Kill Me]

name: Hotspots
description: Display Places.
type: particle

configuration:
  caching:
    type: static

form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable Hotspots 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>'

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

    introtext:
      type: textarea.textarea
      label: Intro Text
      description: Type in the intro text.
      placeholder: 'Enter Intro Text'
      default: ''

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

    image:
      type: input.imagepicker
      label: Image
      description: Select the main image for the hotspots.

    alt:
      type: input.text
      label: Image Alt Tag
      description: Type in the image alt tag.
      placeholder: Enter alt tag

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

    imagebottom:
      type: select.select
      label: Image at the bottom
      description: Set the image at the bottom of the section. Recommended
for an image of a person.
      placeholder: 'Select...'
      default: no
      options:
        yes: Yes
        no: No

    animation:
      type: select.select
      label: Animation
      description: Select the content animation.
      placeholder: 'Select...'
      default: fade
      options:
        none: None
        fade: Fade
        scale: Scale
        slide-top: Slide Top
        slide-bottom: Slide Bottom
        slide-left: Slide Left
        slide-right: Slide Right
        slide-horizontal: Slide Horizontal
        slide-vertical: Slide Vertical

    lightbox:
      type: select.select
      label: Lightbox
      description: Enable or disable the image lightbox/popup.
      placeholder: 'Select...'
      default: enable
      options:
        enable: Enabled
        disable: Disabled
        disablelink: Disabled (Item Link)

    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']

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

      fields:

        .top:
          type: input.text
          label: Top
          description: Type in the top offset for the hotspot (in
percentage). It must be a digit between 0 and 100 (do NOT type in the
'%' sign, type in just the number). This is how you define where
the hotspot should be placed.

        .left:
          type: input.text
          label: Left
          description: Type in the left offset for the hotspot (in
percentage). It must be a digit between 0 and 100 (do NOT type in the
'%' sign, type in just the number). This is how you define where
the hotspot should be placed.

        .toggleicon:
          type: input.icon
          label: Toggle Icon
          description: Select the toggle icon.
          default: 'fa fa-plus'

        .defaultitem:
          type: input.checkbox
          label: Default Item
          description: Make this hotspot default (it will be selected when
the page loads). There must be ONLY one default hotspot. If there is no
default hotspot selected, the first hotspots will become the default one.
          default: 0

        .image:
          type: input.imagepicker
          label: Image
          description: Select an image for this hotspot. It must be a
squared image and it must be 270x270 pixels or bigger.

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

        .title:
          type: input.text
          label: Title

        .link:
          type: input.text
          label: Title Link

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

        .description:
          type: textarea.textarea
          label: Description

        .specialtext:
          type: input.text
          label: Special Text

        .specialicon:
          type: input.icon
          label: Special Icon
          description: Choose an icon to be placed in front of
'Special Text'.

        .bottomlink:
          type: input.text
          label: Bottom Link
          description: Enter the clickable text you want to be shown. The
link is the URL you enter in the 'Title Link' field above.

        .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']