Gallery Particle Documentation
Gallery Particle is a powerful and customizable grid based image gallery. Create responsive and adaptive galleries on your website. See how Gallery can be designed beautifully on Demo Page.
# Gallery Package contents
| Files | Description |
|---|---|
| jlgallery.yaml | Contains the Gallery particle settings. |
| jlgallery.html.twig | The Twig file to pull information, settings. |
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements Gallery requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.
Go to Template/Theme Settings > select the Layout to add Gallery particle (i.e: Home) -> Layout tab -> Drag and drop the Gallery Particle from Particles panel (left corner) to the section you want to display the gallery.
Settings
Content Tab – Items
| Settings | Description |
|---|---|
| Items | List Gallery items to display. You can add new items to the collection using the plus + icon |
Items You can add new items to the collection using the plus + icon
| Settings | Description |
|---|---|
| Image | An image field with an image picker. |
| Image Alt | Enter the image’s alt attribute. |
| Title | Customize the title. |
| Meta | Customize the meta text. |
| Content | Customize the content. |
| Link | Specify the image link. Note: Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior. |
| Hover Image | Select an optional image that appears on hover. |
| Item Color | Set light or dark color mode for text, buttons and controls. |
Gallery Settings Common settings for gallery particle
| Settings | Description |
|---|---|
| Enable Masonry | The masonry effect creates a layout free of gaps even if grid cells have different heights. |
| Parallax | The parallax effect moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels. |
| Column Gap | Set the size of the gap between the grid columns. |
| Row Gap | Set the size of the gap between the grid rows. |
| Center columns | Use this option to center the grid cell columns |
| Center rows | Use this option to center the grid row columns |
| Show dividers | Display dividers between grid cells |
Columns Settings Common settings for Grid columns layout.
| Settings | Description |
|---|---|
| Phone Portrait | Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size. |
| Phone Landscape | |
| Tablet Landscape | |
| Desktop | |
| Large Screens |
Lightbox Settings Enable/Disable lightbox control.
| Settings | Description |
|---|---|
| Enable Lightbox | Use this option to enable lightbox images. |
| Show Title | Display the title inside the overlay, as the lightbox caption or both. |
| Show Content | Display the content inside the overlay, as the lightbox caption or both. |
Item Settings Common settings for item.
| Settings | Description |
|---|---|
| Max Width | Set the maximum width. |
| CSS Classes | CSS class name for the particle. |
Tab Style
Image Settings Common settings for images.
| Settings | Description |
|---|---|
| Transition | Select an image transition. If the hover image is set, the transition takes place between the two images. If None is selected, the hover image fades in. |
| Box Shadow | Select the image’s box shadow size. |
| Hover Box Shadow | Select the image’s box shadow size on hover. |
Title Settings Common settings for title.
| Settings | Description |
|---|---|
| Transition | Select a transition for the title when the overlay appears on hover. |
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font. |
| Link title | Link the title if a link exists. |
| Hover Style | Set the hover style for a linked title. Enable link title to use this option. |
| Decoration | Decorate the headline with a divider, bullet or a line that is vertically centered to the heading. |
| Predefined Color | Select a predefined text color. |
| Custom Color | Customize the title color instead using predefined title color mode. You need to set the predefined color to None to use the customize color option. |
| Font Size | Customize the title text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| HTML Element | Choose one of the elements to fit your semantic structure. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
Meta Settings Common settings for meta.
| Settings | Description |
|---|---|
| Transition | Select a transition for the meta text when the overlay appears on hover. |
| Style | Select a predefined meta text style, including color, size and font-family. |
| Predefined Color | Select the predefined meta color. |
| Custom Color | Customize the meta color. Set Predefined Color for Meta to None before using this feature. |
| Font Size | Customize the title text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Alignment | Align the meta text. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
Content Settings Common settings for content.
| Settings | Description |
|---|---|
| Transition | Select a transition for the content when the overlay appears on hover. |
| Style | Select a predefined text style, including color, size and font-family. |
| Predefined Color | Select the predefined meta color. |
| Content Color | Customize the content color instead using predefined text color. You need to set the predefined color to None to use the customize color option. |
| Font Size | Customize the content text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Margin Top | Set the top margin. Note that the margin will only apply if the content field immediately follows another content field. |
Link Settings Common settings for link.
| Settings | Description |
|---|---|
| Transition | Select a transition for the link when the overlay appears on hover. |
| Target | Target browser window when item is clicked. |
| Style | Set the button style. |
| Button Size | Set the button size. |
| Margin Top | Set the top margin. |
Overlay Tab
| Settings | Description |
|---|---|
| Mode | When using cover mode, you need to set the text color manually. |
| Overlay on hover | Display content overlay on hover. |
| Animate background only | Animate background only on hover. |
| Overlay Style | Select the style for the overlay. |
| Color | Set light or dark color mode for text, buttons and controls. |
| Padding | Set the padding between the overlay and its content. |
| Position | Select the overlay or content position. |
| Margin | Apply a margin between the overlay and the image container if the overlay style is Selected. |
| Max Width | Set the maximum content width. |
| Overlay Transition | Select a transition for the overlay when it appears on hover (support 15 transition effects). |
| Link overlay | Link the whole overlay if a link exists. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments