Home
Tool Panel

Image Gallery Widget

The Image Gallery Widget displays a collection of images in a grid layout. Visitors can click on images to view them in a larger format. Use this widget to showcase photos, portfolios, or product images.

Common Tasks

Adding the Widget to a Page

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Image Gallery Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.

Editing Widget Content

  1. Click the edit icon on the Image Gallery Widget.
  2. Set the Image Aspect Ratio to control how gallery thumbnails are cropped.

Each gallery image is a separate Image Gallery Image child record.

  • Add a new image: In the advanced editor, navigate to the Images child records and add a new record. Upload an Image Source file and enter a Title, Description, and Image Alt text.
  • Edit an image: Open the Image Gallery Image record and modify the image, title, description, or other fields.
  • Add a click-through link: Set the Href field on the image record to link to a page when clicked.
  • Reorder images: Change the Sort Order value on each Image Gallery Image record.
  • Remove an image: Delete or deactivate the Image Gallery Image record.

Configuring Image and Card Sizing

  1. Open the advanced editor and go to the Layout tab.
  2. Set the Image Width to control thumbnail size in pixels (default: 286).
  3. Set the Card Width to control gallery card size in pixels (default: 286).
  4. Set the Card Aspect Ratio to control card proportions.

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing around the gallery.
  • Choose a Theme Style to apply a predefined look.
  • Set a Background Image on the Background tab.
  • Enable As Full Bleed for edge-to-edge rendering.
  • Set a specific Height if needed.

Removing the Widget

  • Click the edit icon on the widget and open the advanced editor.
  • Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.

Edit Dialog Fields

Field Description
Image Aspect Ratio Select the aspect ratio for gallery thumbnails (default: 3)
Sort Order Controls the display order when multiple widgets are on the page

Advanced Edit Fields

Field Tab Description
Name Control Info Internal name for this widget
Images Images Manage the gallery images (opens Image Gallery Images)
Image Width Layout Width of images in pixels (default: 286)
Card Width Layout Width of gallery cards in pixels (default: 286)
Card Aspect Ratio Layout Select the aspect ratio for gallery cards
Pad Top Styles Add top padding to the widget
Pad Right Styles Add right padding to the widget
Pad Bottom Styles Add bottom padding to the widget
Pad Left Styles Add left padding to the widget
As Full Bleed Styles Include margins for content
Height Styles Set a specific height with units
Theme Style Styles Select a layout wrapper class from Design Block Themes
Button Style Styles CSS class for buttons (default: "btn btn-primary")
Background Image Background Set a background image for the widget

Each gallery image is a separate record with these fields:

Field Description
Image Source The image file
Title Title text for the image
Description Description text for the image
Href Optional link URL when the image is clicked
Image Alt Alt text for accessibility
Sort Order Controls the display order of images in the gallery