Showcase your images in the best possible way using the Gallery control. Switch between regular, masonry, or justified layouts to display the images exactly how you want.

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.

Firstly, find the Gallery

control in the controls adding panel,. Then, drag and drop it into a section or container on your page.

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.
​

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.

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.

Start at: Start displaying from which data record.

Limit Records: Turn this ON if you just want to display certain items in this control. By default, this option is OFF, which means all records of the selected data source will be displayed in this News control. 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.

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.

Set the Advanced options that are applicable to this control.

​