Spade
Mini Shell
| Directory:~$ /home/lmsyaran/www/j3/templates/g5_hydrogen/custom/particles/ |
| [Home] [System Details] [Kill Me] |
name: JL Content Grid
description: Display Joomla Articles with Grid Layout.
type: particle
icon: fa-joomla
form:
overrideable: false
fields:
enabled:
type: input.checkbox
label: Enabled
description: Globally enable Joomla Articles 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: intro
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}'
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:
title_settings:
type: separator.note
class: alert alert-info
content: 'Title Settings'
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 a predefined text color.
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.<br>You need to set the predefined color
to None to use the customize color option.
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_settings:
type: separator.note
class: alert alert-info
content: 'Meta Settings'
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: show
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: published
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: link
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 a predefined text 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: Meta Color
description: Customize the meta color.<br>You need to
set the predefined color to None to use the customize color option.
meta_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the meta text font size
meta_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
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_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
meta: Meta
content_text_color:
type: select.select
label: Predefined Color
description: Select a predefined text color.
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. <br>You need to set the predefined color to
None to use the customize color option.
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
link_settings:
type: separator.note
class: alert alert-info
content: 'Link Settings'
article.display.read_more.enabled:
type: select.select
label: Read More
description: Select if the article 'Read More'
button should be shown.
default: show
options:
show: Show
'': Hide
article.display.read_more.label:
type: input.text
label: Link Text
description: Type in the label for the 'Read More'
button.
placeholder: 'Read More...'
buttontarget:
type: select.selectize
label: Target
description: Target browser window when item is clicked.
placeholder: 'Select...'
default: _self
options:
_self: Self
_blank: New Window
article.display.read_more.button_styles:
type: select.select
label: Style
description: Set the button style.
default: default
options:
default: Button Default
primary: Button Primary
secondary: Button Secondary
danger: Button Danger
text: Button Text
link: Link
link-muted: Link Muted
link-text: Link Text
link_button_size:
type: select.select
label: Button Size
description: Set the button size.
default: default
options:
small: Small
default: Default
large: Large
link_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_settings:
label: Layout
overridable: false
fields:
card_settings:
type: separator.note
class: alert alert-info
content: 'Card Settings'
style:
type: select.select
label: Style
description: Select one of the boxed card styles or a blank
panel.
default: default
overrideable: false
options:
blank: None
default: Card Default
primary: Card Primary
secondary: Card Secondary
hover: Card Hover
link_card:
type: input.checkbox
label: Link card
description: Link the whole card if a link exists.
default: false
cardsize:
type: select.select
label: Size
description: Define the card's size by selecting the
padding between the card and its content.
default: small
options:
default: Default
small: Small
large: Large
card_maxwidth:
type: select.select
label: Max Width
description: Set the maximum width.
default: none
options:
none: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
grid_info:
type: separator.note
class: alert alert-info
content: 'Grid Settings'
grid_masonry:
type: input.checkbox
label: Enable Masonry
description: The masonry effect creates a layout free of gaps
even if grid cells have different heights.
default: false
grid_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
grid_divider:
type: input.checkbox
label: Dividers
description: Display dividers between grid cells.
default: false
grid_match_height:
type: input.checkbox
label: Match Height
description: To match the height of the direct child of each
cell.
default: true
center_columns:
type: input.checkbox
label: Center columns
default: false
center_rows:
type: input.checkbox
label: Center rows
default: false
column_settings:
type: separator.note
class: alert alert-info
content: 'Columns'
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
_tab_images:
label: Image
fields:
image_settings:
type: separator.note
class: alert alert-info
content: 'Image Settings'
image_padding:
type: input.checkbox
label: Align image without padding
description: Top, left or right aligned images can be
attached to the card's edge. If the image is aligned to the left or
right, it will also extend to cover the whole space.
default: false
image_width:
type: input.number
label: Width
description: Set the width of the image.
min: 0
placeholder: auto
image_height:
type: input.number
label: Height
description: Set the height of the image.
min: 0
placeholder: auto
link_image:
type: input.checkbox
label: Link image
description: Link the image if a link exists.
default: false
image_transition:
type: select.select
label: Hover Transition
description: Select a hover transition for a linked image.
default: none
options:
none: None
scale-up: Scale Up
scale-down: Scale Down
image_border:
type: select.select
label: Image Border
description: Select the image's border style.
default: none
options:
none: None
circle: Circle
rounded: Rounded
pill: Pill
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
image_alignment:
type: select.select
label: Image Alignment
description: Align the image to the top,left, right or place
it between the title and the content.
default: top
options:
top: Top
bottom: Bottom
left: Left
right: Right
between: Between
image_grid_width:
type: select.select
label: Grid Width
description: Define the width of the image within the grid.
default: 1-2
options:
auto: Auto
1-2: 50%
1-3: 33%
1-4: 25%
1-5: 20%
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
image_grid_column_gap:
type: select.select
label: Grid Column Gap
description: Set the size of the gap between the image and
the content.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
image_grid_row_gap:
type: select.select
label: Grid Row Gap
description: Set the size of the gap if the grid items stack.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
image_grid_breakpoint:
type: select.select
label: Grid Breakpoint
description: Set the breakpoint from which grid cells will
stack.
default: m
options:
default: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
image_vertical_alignment:
type: input.checkbox
label: Vertical Alignment
description: Vertically center grid cells.
default: false
image_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_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: 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
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: inherit
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%
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
copyright:
type: separator.note
class: alert alert-success
content: 'Joomla Content Grid <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/joomla-content-grid-particle/"
target="_blank">Documentation</a>'