Image Particle Documentation
The Image particle adds an image with an optional link to your layout. By default, the link opens in a window. Alternatively, it can open in a modal. Demo Page.
# Image Package contents
| Files | Description |
|---|---|
| jlimage.yaml | Contains the Image particle settings. |
| jlimage.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 Image particle 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 Image particle (i.e: Home) -> Layout tab -> Drag and drop the Image Particle from Particles panel (left corner) to the section you want to display the particle.
Settings
| Settings | Description |
|---|---|
| Image | An image field with an image picker. |
| Image Alt | Enter the image’s alt attribute. |
| Link | Specify the link for image. Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior. |
| Target | Open the link in a same, new window or modal. |
| Image Style | Common settings for Image |
| Border | Select the image’s border style. |
| Box Shadow | Select the image’s box shadow size. |
| Hover Box Shadow | Select the image’s box shadow size on hover if the Link orModal mode is set for the image. |
| Extra bottom shadow | Add Extra bottom shadow below the image. |
| Image Transition | Select an image transition if the Link orModal mode is set. |
| Note | Setting just one value preserves the original proportions. The image will be resized automatically. |
| Width | Set the width of the image. |
| Height | Set the height of the image. |
| CSS Classes | CSS class name for the particle. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments