name: JL Articles Gallery
description: Display multiple Joomla article items with gallery.
type: particle
icon: fa-joomla

form:
  overrideable: false
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable to the particles.
      default: true
    _tabs:
      type: container.tabs
      fields:
        _tab_articles:
          label: Articles
          overridable: false
          fields:
            article.filter.categories:
              type: joomla.categories
              label: Categories
              description: Select the categories the articles should be taken from.
              overridable: false
            article.filter.articles:
              type: input.text
              label: Articles
              description: Enter the Joomla articles that should be shown. It should be a list of article IDs separated with a comma (i.e. 1,2,3,4,5).
              overridable: false
            article.filter.featured:
              type: select.select
              label: Featured Articles
              description: Select how Featured articles should be filtered.
              default: ''
              options:
                include: Include Featured
                exclude: Exclude Featured
                only: Only Featured
              overridable: false
            article.limit.total:
              type: input.text
              label: Number of Articles
              description: Enter the maximum number of articles to display.
              default: 3
              pattern: '\d{1,2}'
              overridable: false
            article.limit.start:
              type: input.text
              label: Start From
              description: Enter offset specifying the first article to return. The default is '0' (the first article).
              default: 0
              pattern: '\d{1,2}'
              overridable: false
            article.sort.orderby:
              type: select.select
              label: Order By
              description: Select how the articles should be ordered by.
              default: publish_up
              options:
                publish_up: Published Date
                created: Created Date
                modified: Last Modified Date
                title: Title
                ordering: Ordering
                hits: Hits
                id: ID
                alias: Alias
              overridable: false
            article.sort.ordering:
              type: select.select
              label: Ordering Direction
              description: Select the direction the articles should be ordered by.
              default: ASC
              options:
                ASC: Ascending
                DESC: Descending
              overridable: false
            article_settings:
              type: separator.note
              class: alert alert-info
              content: 'Display'
            article.display.image.enabled:
              type: select.select
              label: Image
              description: Select if and what image of the article should be shown.
              default: intro
              options:
                intro: Intro
                full: Full
                '': None
            article.display.text.type:
              type: select.select
              label: Article Text
              description: Select if and how the article text should be shown.
              default: ''
              options:
                intro: Introduction
                full: Full Article
                '': Hide                
            article.display.text.limit:
              type: input.text
              label: Text Limit
              description: Type in the number of characters the article text should be limited to.
              default: '100'
              pattern: '\d+'
            article.display.text.formatting:
              type: select.select
              label: Text Formatting
              description: Select the formatting you want to use to display the article text.
              default: text
              options:
                text: Plain Text
                html: HTML
            article.display.text.prepare:
              type: input.checkbox
              label: Prepare Content
              description: Use Joomla Content Plugins
              default: false

            article.display.edit:
              type: input.checkbox
              label: Show Edit Link
              description: Display a link to the article edit form
              default: false                
            article.display.title.enabled:
              type: select.select
              label: Title
              description: Select if the article title should be shown.
              default: show
              options:
                show: Show
                '': Hide
            article.display.title.limit:
              type: input.text
              label: Title Limit
              description: Enter the maximum number of characters the article title should be limited to.
              pattern: '\d+(\.\d+){0,1}'
            gallery_info:
              type: separator.note
              class: alert alert-info
              content: 'Gallery Settings'
            gallery_masonry:
              type: input.checkbox
              label: Enable Masonry
              description: The masonry effect creates a layout free of gaps even if grid cells have different heights.
              overridable: false
              default: false
            gallery_parallax:
              type: input.number
              label: Parallax
              description: The parallax effect moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.
              min: 0
              max: 600
              placeholder: 300
            grid_column_gap:
              type: select.select
              label: Column Gap
              description: Set the size of the gap between the grid columns.
              default: default
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: None  
            grid_row_gap:
              type: select.select
              label: Row Gap
              description: Set the size of the gap between the grid rows.
              default: default
              options:
                small: Small
                medium: Medium
                default: Default
                large: Large
                collapse: None
            center_columns:
              type: input.checkbox
              label: Center columns
              default: false
            center_rows:
              type: input.checkbox
              label: Center rows
              default: false
            divider:
              type: input.checkbox
              label: Dividers
              description: Display dividers between grid cells.
              overridable: false
              default: false
            note2:
              type: separator.note
              class: alert alert-info
              content: 'Column Settings'
            phone_portrait:
              type: select.select
              label: Phone Portrait
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: 1
              options:
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            phone_landscape:
              type: select.select
              label: Phone Landscape
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            tablet_landscape:
              type: select.select
              label: Tablet Landscape
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: 3
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            desktop:
              type: select.select
              label: Desktop
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            large_desktop:
              type: select.select
              label: Large Screens
              description: Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
              default: inherit
              options:
                inherit: Inherit
                1: 1 Column
                2: 2 Columns
                3: 3 Columns
                4: 4 Columns
                5: 5 Columns
                6: 6 Columns
            css.class:
              type: input.selectize
              label: CSS Classes
              description: CSS class name for the particle.
            extra:
              type: collection.keyvalue
              label: Tag Attributes
              description: Extra Tag attributes.
              key_placeholder: Key (data-*, style, ...)
              value_placeholder: Value
              exclude: ['id', 'class']
        _tab_display:
          label: Style
          fields:
            lightbox_info:
              type: separator.note
              class: alert alert-info
              content: 'Lightbox Settings'
            gallery_lightbox:
              type: select.select
              label: Lightbox Icons
              description: Create a responsive lightbox gallery with images.
              default: show
              options:
                show: Show
                '': Hide
            icons_transition:
              type: select.select
              label: Icons Transition
              description: Select an icon transition.
              default: none
              options:
                none: None
                fade: Fade
                scale-up: Scale Up
                scale-down: Scale Down
                slide-top-small: Slide Top Small
                slide-bottom-small: Slide Bottom Small
                slide-left-small: Slide Left Small
                slide-right-small: Slide Right Small
                slide-top-medium: Slide Top Medium
                slide-bottom-medium: Slide Bottom Medium
                slide-left-medium: Slide Left Medium
                slide-right-medium: Slide Right Medium
                slide-top: Slide Top 100%
                slide-bottom: Slide Bottom 100%
                slide-left: Slide Left 100%
                slide-right: Slide Right 100%
            show_title:
              type: select.select
              label: Lightbox Title
              description:  Display the title as the lightbox caption.
              default: show
              options:
                show: Show
                '': Hide
            show_content:
              type: select.select
              label: Lightbox Content
              description: Display the content as the lightbox caption.
              default: show
              options:
                show: Show
                '': Hide
            icon_margin_top:
              type: select.select
              label: Icon Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            image_info:
              type: separator.note
              class: alert alert-info
              content: 'Image Settings'
            image_transition:
              type: select.select
              label: Transition
              description: Select an image transition.
              default: ''
              options:
                '': None
                scale-up: Scale Up
                scale-down: Scale Down
            box_shadow:
              type: select.select
              label: Box Shadow
              description: Select the image's box shadow size.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            box_shadow_hover:
              type: select.select
              label: Hover Box Shadow
              description: Select the image's box shadow size on hover.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            title_info:
              type: separator.note
              class: alert alert-info
              content: 'Title Settings'
            title_transition:
              type: select.select
              label: Transition
              description: Select a transition for the title when the overlay appears on hover.
              default: none
              options:
                none: None
                fade: Fade
                scale-up: Scale Up
                scale-down: Scale Down
                slide-top-small: Slide Top Small
                slide-bottom-small: Slide Bottom Small
                slide-left-small: Slide Left Small
                slide-right-small: Slide Right Small
                slide-top-medium: Slide Top Medium
                slide-bottom-medium: Slide Bottom Medium
                slide-left-medium: Slide Left Medium
                slide-right-medium: Slide Right Medium
                slide-top: Slide Top 100%
                slide-bottom: Slide Bottom 100%
                slide-left: Slide Left 100%
                slide-right: Slide Right 100%
            title_style:
              type: select.select
              label: Style
              description: Title styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            link_title:
              type: input.checkbox
              label: Link title
              description: Link the title if a link exists.
              default: true
            title_hover:
              type: select.selectize
              label: Hover Style
              description: Set the hover style for a linked title. Enable link title to use this option.
              default: reset
              selectize:
                  allowEmptyOption: true              
              options:
                 reset: None
                 heading: Heading
                 '': Default Link
            title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            title_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
                 background: Background
            customize_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using predefined title color mode. You need to set the Predefined Color to None before using the color customization.
            customize_title_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the title text font size
            title_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            title_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            meta_info:
              type: separator.note
              class: alert alert-info
              content: 'Meta Settings'
            meta_transition:
              type: select.select
              label: Transition
              description: Select a transition for the meta text when the overlay appears on hover.
              default: none
              options:
                none: None
                fade: Fade
                scale-up: Scale Up
                scale-down: Scale Down
                slide-top-small: Slide Top Small
                slide-bottom-small: Slide Bottom Small
                slide-left-small: Slide Left Small
                slide-right-small: Slide Right Small
                slide-top-medium: Slide Top Medium
                slide-bottom-medium: Slide Bottom Medium
                slide-left-medium: Slide Left Medium
                slide-right-medium: Slide Right Medium
                slide-top: Slide Top 100%
                slide-bottom: Slide Bottom 100%
                slide-left: Slide Left 100%
                slide-right: Slide Right 100%
            meta_styles:
              type: select.select
              label: Style
              description: Display the meta text in a sentence or a horizontal list.
              default: sentence
              options:
                 sentence: Sentence
                 list: List
            meta_subnav_style:
              type: select.select
              label: Subnav Style
              description: Select the subnav style for Meta List Style.
              default: divider
              options:
                 default: Default
                 divider: Divider
            article.display.author.enabled:
              type: select.select
              label: Author
              description: Select if the article author should be shown.
              default: ''
              options:
                show: Show
                '': Hide
            author_meta:
              type: input.text
              label: Author Meta
              placeholder: Written by
            article.display.date.enabled:
              type: select.select
              label: Date
              description: Select if the article date should be shown.
              default: ''
              options:
                created: Show Created Date
                published: Show Published Date
                modified: Show Modified Date
                '': Hide
            article.display.date.format:
              type: select.date
              label: Date Format
              description: Select preferred date format. Leave empty not to display a date.
              default: F d, Y
              selectize:
                  allowEmptyOption: true
              options:
                  'l, F d, Y': Date1
                  'l, d F': Date2
                  'D, d F': Date3
                  'F d': Date4
                  'd F': Date5
                  'd M': Date6
                  'D, M d, Y': Date7
                  'D, M d, y': Date8
                  'l': Date9
                  'l j F Y': Date10
                  'j F Y': Date11
                  'F d, Y': Date12
            date_meta:
              type: input.text
              label: Date Meta
              placeholder: 'on'

            article.display.category.enabled:
              type: select.select
              label: Category
              description: Select if and how the article category should be shown.
              default: ''
              options:
                show: Show
                link: Show with Link
                '': Hide
            category_meta:
              type: input.text
              label: Category Meta
              placeholder: Posted in
            article.display.hits.enabled:
              type: select.select
              label: Hits
              description: Select if the article hits should be shown.
              default: ''
              options:
                show: Show
                '': Hide
            pre_meta_color:
              type: select.select
              label: Predefined Color
              description: Select the predefined meta color.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            meta_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the meta color. You need to set the Predefined Color to None before using the color customization.
            meta_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the meta text font size.
            meta_alignment:
              type: select.select
              label: Alignment
              description: Align the meta text.
              default: bottom
              options:
                top: Above Title
                bottom: Below Title
                content: Below Content
            meta_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
            content_settings:
              type: separator.note
              class: alert alert-info
              content: 'Content Settings'
            content_transition:
              type: select.select
              label: Transition
              description: Select a transition for the content when the overlay appears on hover.
              default: none
              options:
                none: None
                fade: Fade
                scale-up: Scale Up
                scale-down: Scale Down
                slide-top-small: Slide Top Small
                slide-bottom-small: Slide Bottom Small
                slide-left-small: Slide Left Small
                slide-right-small: Slide Right Small
                slide-top-medium: Slide Top Medium
                slide-bottom-medium: Slide Bottom Medium
                slide-left-medium: Slide Left Medium
                slide-right-medium: Slide Right Medium
                slide-top: Slide Top 100%
                slide-bottom: Slide Bottom 100%
                slide-left: Slide Left 100%
                slide-right: Slide Right 100%
            content_style:
              type: select.select
              label: Style
              description: Select a predefined meta text style, including color, size and font-family.
              default: default
              options:
                 default: None
                 lead: Lead
            content_text_color:
              type: select.select
              label: Predefined Text Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            customize_content_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the content color instead using predefined text color.
            customize_content_fontsize:
              type: input.number
              label: Font Size
              min: 0
              description: Customize the content text font size.
            content_text_transform:
              type: select.select
              label: Transform
              description: The following options will transform text into uppercased, capitalized or lowercased characters.
              default: ''
              options:
                 '': Inherit
                 uppercase: Uppercase
                 capitalize: Capitalize
                 lowercase: Lowercase
            content_margin_top:
              type: select.select
              label: Margin Top
              description: Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.
              default: default
              options:
                 small: Small
                 default: Default
                 medium: Medium
                 large: Large
                 xlarge: X-Large
                 remove: None
        _tab_overlay:
          label: Overlay
          overridable: false
          fields:
            overlay_info:
              type: separator.note
              class: alert alert-info
              content: 'Overlay Settings'
            overlay_transition:
              type: select.select
              label: Transition
              description: Select a transition for the overlay when it appears on hover.
              default: fade
              options:
                fade: Fade
                scale-up: Scale Up
                scale-down: Scale Down
                slide-top-small: Slide Top Small
                slide-bottom-small: Slide Bottom Small
                slide-left-small: Slide Left Small
                slide-right-small: Slide Right Small
                slide-top-medium: Slide Top Medium
                slide-bottom-medium: Slide Bottom Medium
                slide-left-medium: Slide Left Medium
                slide-right-medium: Slide Right Medium
                slide-top: Slide Top 100%
                slide-bottom: Slide Bottom 100%
                slide-left: Slide Left 100%
                slide-right: Slide Right 100%
            overlay_mode:
              type: select.select
              label: Mode
              description: When using cover mode, you need to set the text color manually.
              default: cover
              options:
                cover: Cover
                caption: Caption
            overlay_hover:
              type: input.checkbox
              label: Overlay On Hover
              description: Display content overlay on hover.
              default: false
            animate_background:
              type: input.checkbox
              label: Animate background only
              default: false
            overlay_style:
              type: select.select
              label: Overlay Style
              description: Select the style for the overlay.
              default: jl-overlay-primary
              options:
                none: None
                jl-overlay-default: Overlay Default
                jl-overlay-primary: Overlay Primary
                jl-tile-default: Tile Default
                jl-tile-muted: Tile Muted
                jl-tile-primary: Tile Primary
                jl-tile-secondary: Tile Secondary
            overlay_color:
              type: select.select
              label: Color
              description: Set light or dark color mode for text, buttons and controls.
              default: light
              options:
                default: None
                light: Light
                dark: Dark
            overlay_padding:
              type: select.select
              label: Padding
              description: Set the padding between the overlay and its content.
              default: default
              options:
                default: Default
                small: Small
                large: Large
                remove: None
            overlay_position:
              type: select.select
              label: Position
              description: Select the overlay or content position.
              default: center
              options:
                top: Top
                bottom: Bottom
                left: Left
                right: Right
                top-left: Top Left
                top-center: Top Center
                top-right: Top Right
                bottom-left: Bottom Left
                bottom-center: Bottom Center
                bottom-right: Bottom Right
                center: Center Center
                center-left: Center Left
                center-right: Center Right
            overlay_margin:
              type: select.select
              label: Margin
              description: Apply a margin between the overlay and the image container.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
            overlay_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
        _tab_general:
          label: General
          overridable: false
          fields:
            particle_title_info:
              type: separator.note
              class: alert alert-info
              content: 'Particle Title Style'
            particle_title:
              type: input.text
              label: Title
              description: Add an optional particle title.
              placeholder: Enter particle title
            particle_title_style:
              type: select.select
              label: Style
              description: Heading styles differ in font-size but may also come with a predefined color, size and font.
              default: h3
              options:
                 default: None
                 heading-2xlarge: 2XLarge
                 heading-xlarge: XLarge
                 heading-large: Large
                 heading-medium: Medium
                 heading-small: Small
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
            particle_title_decoration:
              type: select.select
              label: Decoration
              description: Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
              default: none
              options:
                 none: None
                 divider: Divider
                 bullet: Bullet
                 line: Line
            particle_title_align:
              type: select.select
              label: Alignment
              description: Center, left and right alignment for Particle title.
              default: inherit
              options:
                  inherit: Inherit
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            particle_predefined_color:
              type: select.select
              label: Predefined Color
              description: Select the text color. If the Background option is selected, styles that don't apply a background image use the primary color instead.
              default: default
              options:
                 default: None
                 muted: Muted
                 emphasis: Emphasis
                 primary: Primary
                 secondary: Secondary
                 success: Success
                 warning: Warning
                 danger: Danger
            particle_title_color:
              type: input.colorpicker
              label: Custom Color
              description: Customize the title color instead using predefined color mode. Set the Predefined color to None before using this color customization mode.
            particle_title_fontsize:
              type: input.number
              label: Font Size
              description: Customize the particle title font size.
              min: 0
            particle_title_element:
              type: select.select
              label: HTML Element
              description: Choose one of the elements to fit your semantic structure.
              default: h3
              options:
                 h1: H1
                 h2: H2
                 h3: H3
                 h4: H4
                 h5: H5
                 h6: H6
                 div: div
            general_content_info:
              type: separator.note
              class: alert alert-info
              content: 'General Settings'
            align:
              type: select.select
              label: Text Alignment
              description: Center, left and right alignment may depend on a breakpoint and require a fallback.
              default: center
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            breakpoint:
              type: select.select
              label: Alignment Breakpoint
              description: Define the device width from which the alignment will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            fallback:
              type: select.select
              label: Alignment Fallback
              description: Define an alignment fallback for device widths below the breakpoint.
              default: inherit
              options:
                  inherit: None
                  left: Left
                  center: Center
                  right: Right
                  justify: Justify
            g_maxwidth:
              type: select.select
              label: Max Width
              description: Set the maximum content width.
              default: inherit
              options:
                  inherit: None
                  small: Small
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  xxlarge: XX-Large
            g_maxwidth_alignment:
              type: select.select
              label: Max Width Alignment
              description: Define the alignment in case the container exceeds the element's max-width.
              default: left
              options:
                  left: Left
                  center: Center
                  right: Right
            g_maxwidth_breakpoint:
              type: select.select
              label: Max Width Breakpoint
              description: Define the device width from which the element's max-width will apply.
              default: always
              options:
                  always: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            margin:
              type: select.select
              label: Margin
              description: Set the vertical margin.
              default: inherit
              options:
                  inherit: Keep existing
                  small: Small
                  default: Default
                  medium: Medium
                  large: Large
                  xlarge: X-Large
                  remove-vertical: None
            visibility:
              type: select.select
              label: Visibility
              description: Display the element only on this device width and larger.
              default: inherit
              options:
                  inherit: Always
                  s: Small (Phone Landscape)
                  m: Medium (Tablet Landscape)
                  l: Large (Desktop)
                  xl: X-Large (Large Screens)
            general_animation_info:
              type: separator.note
              class: alert alert-info
              content: 'Animation Settings'
            animation:
              type: select.select
              label: Animation
              description: Apply an animation to particles once they enter the viewport.
              default: inherit
              options:
                  inherit: None
                  fade: Fade
                  scale-up: Scale Up
                  scale-down: Scale Down
                  slide-top-small: Slide Top Small
                  slide-bottom-small: Slide Bottom Small
                  slide-left-small: Slide Left Small
                  slide-right-small: Slide Right Small
                  slide-top-medium: Slide Top Medium
                  slide-bottom-medium: Slide Bottom Medium
                  slide-left-medium: Slide Left Medium
                  slide-right-medium: Slide Right Medium
                  slide-top: Slide Top 100%
                  slide-bottom: Slide Bottom 100%
                  slide-left: Slide Left 100%
                  slide-right: Slide Right 100%
                  parallax: Parallax
            animation_delay:
              type: input.number
              label: Delay
              description: Set the delay animations for particle. Delay time in ms.
              min: 0
              placeholder: 200
            animation_repeat:
              type: select.select
              label: Repeat
              description: Repeat an animation to particle once it enter the viewport.
              default: disabled
              options:
                enabled: Enable
                disabled: Disable
            delay_element_animations:
              type: input.checkbox
              label: Delay Element
              description: Delay element animations so that animations are slightly delayed and don't play all at the same time. Slide animations can come into effect with a fixed offset or at 100% of the element’s own size.
              default: false
        _tab_parallax_animation:
          label: Parallax
          overridable: false
          fields:
            parallax_info:
              type: separator.note
              class: alert alert-info
              content: 'To configure a parallax animation, make sure to set the Animation to Parallax in the <i>General</i> tab. <a href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-settings" target="_blank">Learn more</a>'
            pa_horizontal_start:
              type: input.number
              label: Horizontal Start
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_horizontal_end:
              type: input.number
              label: Horizontal End
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_vertical_start:
              type: input.number
              label: Vertical Start
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            pa_vertical_end:
              type: input.number
              label: Vertical End
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              placeholder: 0
            scale_start:
              type: input.number
              label: Scale Start
              description: Animate the scaling. 100 means 100% scale, 200 means 200% scale, and 50 means 50% scale. Min 50 and Max 200
              min: 50
              max: 200
              placeholder: 100
            scale_end:
              type: input.number
              label: Scale End
              description: Animate the scaling. 100 means 100% scale, 200 means 200% scale, and 50 means 50% scale. Min 50 and Max 200
              min: 50
              max: 200
              placeholder: 100
            rotate_start:
              type: input.number
              label: Rotate Start
              description: Animate the rotation clockwise in degrees. Min 0 and Max 360
              min: 0
              max: 360
              placeholder: 0
            rotate_end:
              type: input.number
              label: Rotate End
              description: Animate the rotation clockwise in degrees. Min 0 and Max 360
              min: 0
              max: 360
              placeholder: 0
            opacity_start:
              type: input.number
              label: Opacity Start
              description: Animate the opacity. 100 means 100% opacity, 0 means 0% opacity and 50 means 50%. Min 0 and Max 100
              min: 0
              max: 100
              placeholder: 100
            opacity_end:
              type: input.number
              label: Opacity End
              description: Animate the opacity. 100 means 100% opacity, 0 means 0% opacity and 50 means 50%. Min 0 and Max 100
              min: 0
              max: 100
              placeholder: 100
            easing:
              type: input.number
              label: Easing
              description: Determine how the speed of the animation behaves over time. A value below 100 is faster in the beginning and slower towards the end while a value above 100 behaves inversely. Min 10 and Max 200
              min: 10
              max: 200
              placeholder: 10
            pa_viewport:
              type: input.number
              label: Viewport
              description: Set the animation end point relative to viewport height, e.g. 50 for 50% of the viewport. Min 10 and Max 100
              min: 10
              max: 100
              placeholder: 50
            pa_breakpoint:
              type: select.select
              label: Breakpoint
              description: Display the parallax effect only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
        _tab_parallax:
          label: Parallax Background
          overridable: false
          fields:
            parallax_bg_info:
              type: separator.note
              class: alert alert-info
              content: 'The Parallax Background settings allow you to animate a background image depending on the scroll position of the document. <a href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-background-settings" target="_blank">Learn more</a>'
            parallax_image:
              type: input.imagepicker
              label: Background Image
              description: Select parallax background image for particle.
              placeholder: Pick an image
            background_image_size:
              type: select.select
              label: Image Size
              description: Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color.
              default: auto
              options:
                auto: Auto
                cover: Cover
                contain: Contain
            background_image_position:
              type: select.select
              label: Image Position
              description: Set the initial background position, relative to the section layer.
              default: center-center
              options:
                top-left: Top Left
                top-center: Top Center
                top-right: Top Right
                center-left: Center Left
                center-center: Center Center
                center-right: Center Right
                bottom-left: Bottom Left
                bottom-center: Bottom Center
                bottom-right: Bottom Right
            parallax_bg_breakpoint:
              type: select.select
              label: Parallax Breakpoint
              description: Display the parallax effect only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            parallax_bg_visibility:
              type: select.select
              label: Image Visibility
              description: Display the image only on this device width and larger.
              default: always
              options:
                always: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
                xl: X-Large (Large Screens)
            parallax_bg_color:
              type: input.colorpicker
              label: Background Color
              description: Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section.
            blendmode:
              type: select.select
              label: Blend Mode
              description: Determine how the image will blend with the background color.
              default: inherit
              options:
                  inherit: Normal
                  multiply: Multiply
                  screen: Screen
                  overlay: Overlay
                  darken: Darken
                  lighten: Lighten
                  color-dodge: Color-dodge
                  color-burn: Color-burn
                  hard-light: Hard-light
                  soft-light: Soft-light
                  difference: Difference
                  exclusion: Exclusion
                  hue: Hue
                  saturation: Saturation
                  color: Color
                  luminosity: Luminosity
            parallax_bg_overlay:
              type: input.colorpicker
              label: Overlay Color
              description: Set an additional transparent overlay to soften the image.
            horizontal_start:
              type: input.number
              label: Horizontal Start
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            horizontal_end:
              type: input.number
              label: Horizontal End
              description: Animate the horizontal position (translateX) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            vertical_start:
              type: input.number
              label: Vertical Start
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            vertical_end:
              type: input.number
              label: Vertical End
              description: Animate the vertical position (translateY) in pixels. Min -600 and Max 600.
              min: -600
              max: 600
              default: 0
            parallax_easing:
              type: input.number
              label: Parallax Easing
              description: Set the animation easing. Zero transitions at an even speed, a positive value starts off quickly while a negative value starts off slowly. Min -20 Max 20
              min: -20
              max: 20
            container_maxwidth:
              type: select.select
              label: Max Width
              description: Set the Fullwidth (Flushed Content) for parent section then use this option to define the container width for the particles inside this section.
              default: default
              options:
                default: Default
                xsmall: X-Small
                small: Small
                large: Large
                xlarge: X-Large
                expand: Expand
                none: None
            viewport_height:
              type: select.select
              label: Height
              description: Enabling viewport height on a section that directly follows the header will subtract the header's height from it. On short pages, a section can be expanded to fill the browser window.
              default: none
              options:
                none: None
                full: Viewport
                percent: Viewport (Minus 20%)
                section: Viewport (Minus 50%)
                expand: Expand
            padding:
              type: select.select
              label: Padding
              description: Set the vertical padding.
              default: default
              options:
                default: Default
                xsmall: X-Small
                small: Small
                large: Large
                xlarge: X-Large
                none: None
            vertical_alignment:
              type: select.select
              label: Vertical Alignment
              description: Align the section content vertically, if the section height is larger than the content itself.
              default: none
              options:
                none: Top
                middle: Middle
                bottom: Bottom
            parallax_text_color:
              type: select.select
              label: Inverse Color
              description: Set light or dark color mode for text, buttons and controls.
              default: default
              options:
                default: None
                light: Light
                dark: Dark
    copyright:
      type: separator.note
      class: alert alert-success
      content: 'Article Gallery Joomla <strong>Version: 2.1.3</strong> Copyright (C) <a href="https://joomlead.com/" target="_blank">https://joomlead.com</a> | <a href="https://joomlead.com/g5/docs/articles-posts-gallery-documentation/" target="_blank">Documentation</a>'