Topics

All topics

Image gallery widget

Use this widget to display a gallery of image thumbnails, where each image can be opened individually. You can choose images from the already uploaded or upload new images.

After you have dragged the Image gallery widget on your page you must configure it to display images.

To do this, click Edit button in the upper-right corner of the widget.
The Image Gallery window appears, containing two tabs.

Images tab

On Images tab you select which images to display in the gallery.

NOTE: If you are using multiple site management and the Libraries module uses data sources from more than one site, you must first choose the source from which you want to display images.
For more information, see Multisite: Manage multiple sites.

  1. Select one of the following:
    • All published images
      All images that are uploaded and published are displayed in the gallery.
    • From selected library…
      The Image gallery displays images only from a certain library.
      1. To select a library, click Choose.
        The Choose Image Library window appears
      2. Select the library, whose images you want to display, and click Done selecting.
    • Upload new images…
      To upload new images, click Upload and perform procedure Upload images » Step 5 to Step 10.
  2. Under Narrow selection you can further specify which images to display by choosing one of the following:
    • All published images from selected library
      This is selected by default and displays all posts from the blogs selected in the previous step.
    • Selection of images:
      You can narrow the displayed images, using categories, tags, and dates.
      Select one or more of the following:
      • by Categories…
        Click the Select button to select the categories from which you want to display images and click Done.
      • by Tags…
        Click Select button to select the tags, so that images tagged with those particular tags will be displayed and click Done.
      • by Dates…
        Click Select button.
        Select one of the predefined time intervals, so that images uploaded during that interval will be displayed or choose Custom range… and use the From and To input fields to select a time interval. When finished click Done.
  3. In Sort images, select a sorting criterion for the images in the gallery.

Settings tab

 On Settings tab you select the way the images in the gallery are displayed when opened.
Select one of the following:
Thumbnails + Detailed page

The image gallery displays the images as thumbnails. The description of the images is displayed in tooltip text. When clicked, the image is displayed in a bigger size in the same page together with image title, the user that has uploaded the image, the date of upload, and the description.

In Fine tune the selected type, perform the following:

  1. Select one of the following:
    • If you select Use paging radio button, the system divides the list of image thumbnails into pages.
      In the input field you specify how many image thumbnails per page you want to display.
    • If you select Use limit radio button, the system displays only a limited number of the image thumbnails.
      In the input field, you specify how many image thumbnails you want to display.
    • If you select No limit and paging radio button, the system displays thumbnails of all the images that you have selected in Images tab.
  2. Select the Size of thumbnails.
    In the dropdown box, all predefined thumbnail sizes appear. For more information, see Thumbnails.
  3. Select the Size of the image.
    In the dropdown box, all predefined image sizes appear.
    If you select Custom size… the Width input field appears where you enter the desired width in pixels.
  4. If you want to open the individual images in the same page, select Open Single item in existing page...
  5. If you want to display links to the previous and the next image, select Show links to the previous and next image as… checkbox.
    You use the radio buttons, which appear, to select how to display the links. Choose one of the following:
    • Text Links
    • Thumbnails of previous and next image

NOTE: You can edit the way the widget displays the list of images, by clicking Edit Thumbnail list template and the detailed display of an image by clicking Edit Detail page template. For more information, see Create and edit widget templates.

Thumbnails + Overlay (lightbox)

The image gallery displays the images as thumbnails. The description of the images is displayed in tooltip text. When clicked, the image is displayed in a bigger size as an overlay of the page together with its description.

In Fine tune the selected type, perform the following:

  1. Select one of the following:
    • If you select Use paging radio button, the system divides the list of image thumbnails into pages.
      In the input field you specify how many image thumbnails per page you want to display.
    • If you select Use limit radio button, the system displays only a limited number of the image thumbnails.
      In the input field, you specify how many image thumbnails you want to display.
    • If you select No limit and paging radio button, the system displays thumbnails of all the images that you have selected in Images tab.
  2. Select the Size of thumbnails.
    In the dropdown box, all predefined thumbnail sizes appear. For more information, see Thumbnails.
  3. Select the Size of the image.
    In the dropdown box, all predefined image sizes appear.
    If you select Custom size… the Width input field appears where you enter the desired width in pixels.

NOTE: You can edit the way the widget displays the list of images, by clicking Edit Thumbnail list template. For more information, see Create and edit widget templates.
Thumbnail strip + Image on the same page

The image gallery displays a horizontal strip of image thumbnails. When you click an image from the strip, a preview of the image is displayed above the thumbnail strip.

In Fine tune the selected type, perform the following:

  1. If you select Use limit checkbox, the system displays only a limited number of the images.
    In the input field, you specify how many images or files you want to display.
  2. Select the Size of thumbnails.
    In the dropdown box, all predefined thumbnail sizes appear. For more information, see Thumbnails.
  3. Select the Size of the image.
    In the dropdown box, all predefined image sizes appear.
    If you select Custom size… the Width input field appears where you enter the desired width in pixels.
  4. If you want to display links to the previous and the next image, select Show links to the previous and next image checkbox.

NOTE: You can edit the way the widget displays the list of images, by clicking Edit Thumbnail list template and the detailed display of an image by clicking Edit Detail page template. For more information, see Create and edit widget templates.
 Simple list

All images are displayed in a large size. The description of the images is displayed in tooltip text.

In Fine tune the selected type, select one of the following:

  • If you select Use paging radio button, the system divides the list of images into pages.
    In the input field you specify how many images per page you want to display.
  • If you select Use limit radio button, the system displays only a limited number of the images.
    In the input field, you specify how many images you want to display.
  • If you select No limit and paging radio button, the system displays all the images that you have selected on Images tab.

NOTE: You can edit the way the widget displays the list of images, by clicking Edit Thumbnail list template. For more information, see Create and edit widget templates.

Filter and sort the images

You can filter and sort the images, which the widget displays, using both the default and the For developers: Create custom fields of the images.

  1. To filter or sort the images, click Advanced button in the lower-right corner of the window.
    The advanced editing mode opens.
  2. In MasterViewName input field, check which view the widget uses.
  3. Click ControlDefinition » Views buttons.
  4. Choose for which view, you want to apply filtering or sorting by selecting the view that the widget uses.
  5. Filter or sort the images in the following way:
    • To filter the images, in FilterExpression input field, enter the desired filtering expression.
      You can use both default and custom fields. The field supports AND and OR Boolean operators.
      For example, enter Visible = true AND Status = Live
      For more information, see Filter expressions for content items.
    • To sort the images, in SortExpression input field, enter the desired sorting expression.
      You can use both default and custom fields. The field supports operators ASC for ascending and DESC for descending.
      For example, enter PublicationDate DESC

NOTE: To see all custom and default fields, perform procedure Create custom fields » Step 1 and Step 2.

For more information about advanced configuration options, see Advanced configuration of widgets.

When you are finished, click Save.
The Image Gallery window closes and the Image gallery widget is configured to display the images you have selected.

NOTE: If your site is multilingual and the page you are editing is synchronized with another translation, when you edit the widget, the Save to all translations button appears. If you click it, the current widget configuration will be saved to all translations, else, if you click Save, the widget configuration is saves only to the current translation, but the pages are still synchronized. If your pages are synchronized, you can have different widget configurations, but you cannot have different widgets.

Additional resources

ARTICLES

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

List widget