Home / Widgets

Gallery Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

The Gallery widget allows you to display a collection of images, videos, or other media files in a visually appealing and organized manner. It provides a user-friendly way to showcase multiple visual items in a single view, allowing users to browse and interact with the content.

Adding a Gallery Widget

To add a Gallery widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the Widgets list on the Visual Editor Left Panel.
  3. Type the widget name in the search bar, or expand the Media grouping and select the Gallery widget.

  4. Drag and drop the Gallery widget from the list onto the desired craft area of the Layout Canvas.

Configuring the Gallery Widget

Once you have added the Gallery widget, click the widget to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.

To configure the Gallery widget:

  1. Go to Styles to modify the widget styling features:
  • Expand General to indicate the number of columns and rows and modify the spacing between the elements.

  • Configure the principal styling features (see Global Styles).

Tip: 

  • You can access the UI Elements available in the Design System.  To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
  • Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
  1. Click the Dotted Menu in the right corner of the Property Panel.
  2. Select Reset Styles to discard the changes made to the widget and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

2. Go to Content to make the necessary configuration of widget content:

  • Click + Manage Gallery and select the corresponding media content, or upload the media content from the computer, free stock (powered by Unsplash), or insert the URL and click Select.
  • Click and hold the uploaded image on the left side, then move it to the desired position to reorder the added images.

  • Click the Dotted Menu and select the corresponding option to view the detailed information on the image, replace, and delete the image.

3. Go to Settings to modify the settings of the widget:

  • Enable/disable Tags to display/hide the label assigned to an image or item within the gallery.
  • Enable/disable Image Preview to display/hide the preview of the content available in the gallery.
  • Select how the image is resized and fitted within its container from Image Behavior:
    • Cover - the image is scaled to cover the entire container, filling it without any letterboxing.
    • Contain - the image is scaled to fit within the container while maintaining its aspect ratio.
  • Select None/Button/Pagination to display or hide the Load More button/Pagination icon below the media content.
  • Indicate the number of loading media content in the Load by field.
  • Expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Modifying the Gallery Item Elements

Once you have configured the Gallery widget, you can modify its corresponding elements. This allows you to define the widget's appearance and functionality on your website.

The following elements are available:

Gallery Item

Allows you to modify a piece of content (image, video) on the Property Panel (see Global Styles).

Image

Allows you to modify the images inside the gallery that best suits your design. To do so:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content.
  • Select the image loading type:
    • Lazy Loading - ensures that images are only loaded when they are about to be displayed on the user's screen. When a customer visits a corresponding page, only the images initially visible or near the viewport are loaded immediately. As the user scrolls down or interacts with the page, additional images are loaded dynamically, typically as they come into view.
    • Preload - ensures that images are loaded in advance before they are actually needed. Image preload involves fetching and storing product images in the user's browser cache so that they can be quickly displayed when the user navigates to a corresponding page or interacts with a product gallery.
      Note: By default Lazy Load is selected.
  • Choose the image fetch priority if the Preload loading type is selected. The following options are available:
    • Low - These images aren't prioritized for immediate loading and may be fetched after higher-priority resources are loaded.
    • High - These images are prioritized for immediate loading and fetched as soon as possible to enhance user experience.
    • Auto - The system dynamically determines the fetch priority based on preload/lazy load settings.

3. Go to Settings and expand Visibility to modify the element visibility on your website. Select who can view the element according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Tip:

  • You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.

  • Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:

    1. Click the Dotted Menu in the right corner of the Property Panel.

    2. Select Reset Styles to discard the changes made to the widget and restore its default style.

    3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Pagination

Allows you to modify the style of the Pagination icon on the Property Panel (see Global Styles).

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.