The Dynamic Image control enables users to effortlessly select image fields from the data list to display within a collection, ensuring the field type is specified as "image" for seamless integration and optimal presentation.
Add Dynamic image control to Collection
Firstly, find the Dynamic image control in the controls add panel. Then, drag and drop it into Collection.
Content of the Dynamic image
Open the Content > Content block to set the content of this Dynamic image control.
Source: Select the source from which the field comes.
Note:
If the source is set to 'dynamic,' users can import multiple images as needed.
Object fields: Choose the User Field you want to displayed.
Show Items: Specifies the number of images to be displayed.
Image Size: Specifies the size of the image after clicking on the thumbnail.
Preview: Set whether clicking the thumbnail enlarges the image.
Hide if value is empty: Toggle to choose whether to hide empty values.
Fallback: Defalut image.
Open the Content > Setting block to set the appearance and layout of this Dynamic Image control.
Layout Type: Select from Grid, List, Justified, or Masonry. The Grid is based on an aspect ratio of your choosing. Justified lets you set the height for each row, and adjusts to different widths per image. Masonry maintains the same image width and adjust to varying heights.
Columns: Set how many columns will be displayed per row, from 1 to 6. Not available if Justified Layout is chosen.
Items Height: Set the height of each row, in pixels. Only available if Justified Layout is chosen.
Items Gap: Control the amount of space between each image in a row.
Open the Content > Appearance
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Style of the Dynamic Image
Value:
Padding: Change the padding settings of the image inside in each image cell.
Border Type: Select the type of border to use around the image cell.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on each image cell.
Advanced Settings
Set the Advanced Settings Tab that are applicable to this control.