You use this widget to display a gallery of image thumbnails, where each image can be opened individually. You choose an image from the images already uploaded in libraries.
PREREQUISITES: You uploaded at least one image. For more information, see Upload images.
After you place the Image gallery widget on your page, you configure it to display images. To do this, click the Edit button in the upper-right corner of the widget. The Image gallery window contains a few tab pages, described in the following sections.
On the Content tab page, you select which images to display in the gallery. Choose one of the following options:
From all libraries
All images that are uploaded and published will be displayed in the gallery.
From selected libraries only...
A custom selection of libraries is displayed.
To select one or more libraries from which you want to display images, click the Select button.
From currently opened library
All published images from the currently opened library will be displayed in the gallery.
Under Narrow selection by..., you can further specify which images to display by choosing one of the following:
All published images
This is selected by default and displays all images selected in the previous step.
Selection of images...
You can narrow down the displayed images using categories, tags, and dates. Select one or more of the following:
List settings define how the Image gallery widget display images. Choose one of the following options:
Single item settings define how individual images are displayed. Choose one of the following options:
Open single item in...
Select one of the following options:
When you click an image, it is displayed in an automatically generated page with the same layout as the list page.
Selected existing page...
Select a page from the list of existing pages that has the desired layout. When you click on the image, it is displayed in this specific page.
NOTE: The page on which you want the image displayed must have an Image gallery widget added.
Provides an option for configuring the size of the image. In the dropdown box, all predefined image sizes appear.
Select the template you want to use to display the image's details on the webpage.
Expand More options section to apply additional CSS classes to the Image gallery widget when the image details are opened.
In Advanced settings, you specify individual properties of the widget:
Gets the ID of the page you have selected in the Selected existing page... option in the Single item settings tab.
Gets the template you have selected in the Detail template dropdown in the Single item settings tab.
Gets the template you have chosen in the List template dropdown in the List settings tab.
Defines whether when you click on an image thumbnail to open the detail view in a new window. The default value is False.
Model settings display all properties directly bound to the Image Gallery widget model. Access these properties by clicking the Model button in Advanced settings.
NOTE: If you leave this property value empty, the default image provider is used.
When you use the Image gallery widget, Sitefinity CMS generates a series of img tags in the HTML of the page. In these tags, Sitefinity CMS automatically generates the loading="lazy" attribute.
This attribute instructs the browser not to load images that are off-screen until immediately before the moment they become visible. Thus, lazy loading of images improves performance.
Sitefinity CMS automatically uses width and height attributes within the img tag. This has the following benefits.
Sitefinity: Image gallery widget
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important