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.
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. The Data Filters feature in Yeeflow allows you to refine the data displayed in your views by using Query Conditions and the Sorting Filter. These tools enable the creation of customized views by applying specific filters and sorting to connected datasets. Below is a detailed explanation:
Query Conditions
Query conditions define the rules for filtering data, which can be configured through the following components:
Add Condition
Use the Add Condition button to create a new filtering rule. A condition includes the following parts:Field Selection: The first dropdown allows you to select the field to filter (e.g., "Status" or any other available field in your dataset).
Condition Selection: The second dropdown specifies the filtering logic, such as "Equals," "Not Equals," "Contains," etc.
Value Input: The third input field allows you to define the value to filter by. You can enter a static value or use the Expression Editor for dynamic variables or formulas.
Add Condition Group
If you need to configure multiple conditions, use the Add Condition Group button. This feature enables you to group conditions with logical operators (AND/OR) for complex filtering scenarios.Edit or Delete Conditions
Edit Conditions: Modify existing conditions by changing the selected field, logic, or value.
Delete Conditions: Use the delete icon to remove unnecessary conditions.
Sorting Filter
The Sorting Filter is used to sort and display data. By selecting the variable associated with the Sorting Filter in the input field, you can set sorting rules. Detailed sorting configurations can be made by clicking on the Sorting Filter control. For further details, refer to the Sorting Filter control settings.
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.
Pagination Settings
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.
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.
Picture
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.
Overlay
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.
Title
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.
Description
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.
Pagination
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.
Advanced Settings
Set the Advanced options that are applicable to this control.