Popover Particle Documentation
# Popover Package contents
| Files | Description |
|---|---|
| jlpopover.yaml | Contains the Popover particle settings. |
| jlpopover.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 Popover 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 Popover particle (i.e: Home) -> Layout tab -> Drag and drop the Popover Particle from Particles panel (left corner) to the section you want to display the Popover.
Settings
| Settings | Description |
|---|---|
| Image | An image field with an image picker. |
| Image ALT | Enter the image’s alt attribute. |
| Image Width | Enter the popover image’s width. |
| Image Height | Enter the popover image’s height. |
| Items | List marker items on image. You can add new items to the collection using the plus + icon. Here the tutorial using Using particle collections. |
| CSS Classes | CSS class name for the particle. |
Items Click Items field to enable it, then you can add new items to the
collection using the plus + icon
| Settings | Description |
|---|---|
| Left | Enter the horizontal and vertical position of the marker in percent. |
| Top | Enter the horizontal and vertical position of the marker in percent. |
| Title | A text field for headings |
| Meta | A text field for meta text like the author or published date. |
| Content | A text area for the main text |
| Image | An image field which opens the image picker. |
| Image ALT | Enter the image’s alt attribute. |
| Link Text | Specify the button text. |
| Link | Specify the link for button. Note: Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior. |
| Position | Select a different position for this item. |
Style Tab
| Settings | Description |
|---|---|
| Mode | Display the popover on click or hover. |
| Position | Select the popover’s alignment to its marker. If the popover doesn’t fit its container, it will flip automatically. |
| Width | Enter a width for the popover in pixel. |
| Style | Select a card style. |
| Animation | Select animation on hover/click. |
| Size | Define the card’s size by selecting the padding between the card and its content. |
| Title/Meta/Content Settings | Common settings for title/meta/content (provide multiple options for designing.) |
| Image Settings | Common settings for image. |
| Width | Enter the image’s width |
| Height | Enter the image’s height |
| Remove Padding | Align image without padding. |
| Border | Select the image’s border style. This option won’t have any effect if Padding is enabled |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments