Image Particle Documentation

  • Tony
  • 6 April 2020
  • No comments
  • Docs
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

Leave a Reply

You must be logged in to post a comment.

JoomLead Gantry5 Particles 2.2.10 released, new features, bug fixes and more Learn more
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now