The Image Gallery widget allows you to easily add and style complex and beautiful image galleries on your page.
Show any combination of content as part of the gallery: incorporate the title, caption, alt, description or keep it clean. You can adjust just about anything with the style and layout of the content, with full control of typography and positioning. Use CSS filters and blend modes to give your gallery a consistent stylish look.
Add a Gallery control
Firstly, find the Gallery control in the controls adding panel,. Then, drag and drop it into a section or container on your page.
Select data source
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application. Please be sure that the data list you selected includes at least one image field. The gallery control will display the images stored in this image field as gallery.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Set the Primary Order and Secondary Order to sort your data properly.
Pro Tip: If the records in the selected data list do not have images uploaded on the selected Image Field, these records will not be displayed in this Gallery control.
Set content of the Gallery
Move on to the Content section. The Image Field option allows you to choose which field to use as the image of this Gallery control.
Picture Size: Set the size of the image, from thumbnail to full, or enter a custom size.
Select the fields for Overlay Title and Overlay Description to set the title and description which will show up when mouse over.
Link: select the detail page of each item (row) in this data table. Detail pages are the forms created in the data list. Select Default Layout will show the default view page you set in the data list. If you've created other custom list forms, those forms will show after the default layout (Like, the new form, view form, and edit form are customize list forms in the following example).
Select Custom URL will allow you to create a dynamic URL. Select Media File if you want to show the image itself with full screen model. Select None if you just want to show the data in this data table, and data rows are set as unclickable.
Select how would you like to open the detail page with Open in settings. Pop-up window means the detail page will show as a pop-up window, Full Screen means once you click each row, the page will be redirect to the detail page. And New window will open another windows and show the detail page.
Settings of the Gallery control
Layout Type: Select from Grid, 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 24. 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.
Limit Records: Turn this ON if you just want to display certain items in this data table. By default, this option is OFF, which means all records of the selected data source will be displayed in this Data Table. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.
Styling the Gallery Control
It is now time to define the style of the Gallery. Go forward to the Style block, where you are able to make your Gallery look more eye-candy.
- Padding: Change the padding settings of the image inside in each gallery cell.
- Border Type: Select the type of border to use around the gallery cell.
- Radius: Set the border radius to control corner roundness.
- Shadow: Set options to apply a box shadow on each gallery cell.
- Content Alignment: Align the content to the left, right, or center.
- Background Type: Select the overlay’s background color. You may use a solid or gradient color.
- Padding: Set the padding settings of the content inside in the overlay.
- Align: Align the Title to the left, right, or center.
- Text Color: Choose the Title’s color.
- Typography: Set the typography options for the Title.
- Padding: Adjust the Title’s padding.
- Margin: Adjust the Title’s margin.
- Align: Align the Description to the left, right, or center.
- Text Color: Choose the Description’s color.
- Typography: Set the typography options for the Description.
- Padding: Adjust the Description’s padding.
- Margin: Adjust the Description’s margin.
- Typography: Change the default typography options for the text of pagination.
- Normal / Hover / Active: Switch to set different style of pagination.
- Color: Set the text color of the pagination for Normal, Normal and Active states.
- Space Between: Set the space for each number of the paging.
- Spacing: Set the space between the table content and the pagination.
Set the Advanced options that are applicable to this control.