Image Gallery Widget

The Image Gallery Widget allows you to add a gallery of image thumbnails to your website. Watch the video below for a quick overview of how to use the Image Gallery Widget, and read below for more detailed instructions and for information on settings.

In this article, you will learn how...

• To add an Image Gallery Widget to your website
• To configure the Design settings for an Image Gallery Widget

To add an Image Gallery Widget to your website:

1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Image Gallery Widget you want in the MEDIA section.
   
3. Click and drag the Image Gallery Widget onto your website page.

   Allowable areas an Image Gallery Widget can be inserted into include:

   • Within rows
   • Within columns
   • Above or below existing widgets
   • Between existing widgets

   The Image Gallery settings popup will be displayed.

   
4. Click on the Add Image button.

   The Select Image popup will be displayed.

   

   You can choose an image from one of 4 sources:

   • Your Images: your own uploaded images.
   • Theme Images: images provided with your selected theme.
   • Stock Images: DecoNetwork stock images.
   • Search Free Image Libraries: search for royalty-free images (covered by a creative commons license for both commercial and personal projects) from image providers, Unsplash, and Flickr. The images are curated from online communities of contributing photographers.
5. Select an image and click OK.
6. Continue adding as many images as you like by clicking on the Add Image button.

   You can delete an image at any time by clicking on the x button.

7. Configure the Design settings for the Image Gallery Widget. Click here for instructions.
8. Click OK to apply the changes.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the Design settings for the Image Gallery Widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the Image Gallery Widget icon.
3. Choose the Image Gallery Settings item from the drop-down menu.
   

   The Image Gallery Settings popup will be displayed.

4. Click on the Design tab.
   
5. Select from one of the pre-configured Image Gallery Layout options.
6. Configure the rest of the design options for the Image Gallery Widget.

   The settings will vary depending on the layout selected.

   • Panel Title: lets you specify the title that will appear in the header area for the image gallery panel.
   • Thumbnail size: lets you set the dimensions of the image thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.

     The following fields will be displayed when you select Custom Size:

     • Thumbnail Width: lets you specify the width of the image thumbnail in pixels.
     • Thumbnail Height: lets you specify the width of the image thumbnail in pixels.
   • Crop Thumbnail: crops the product image thumbnail to square when "Yes" is selected. Leaves the image in its original shape when"No" is selected.
   • Use Higher Resolution on Retina Displays: when checked, will double the pixel density of the images to increase the clarity of the image for retina displays.

     Retina displays have 4 times more pixels than standard screens. So, if you have a 600 x 600 pixel image, you would need a 1200 x 1200 pixel image to render smoothly on a high-density retina display. This setting will do this for you.

   • Image Effects: lets you apply filter and transform effects to the thumbnail images.
   • Hover Image Effects: lets you apply filter effects, transform effects, and hover animation to the thumbnail images for the hover state.

     Click here for instructions on how to add image effects.

   • Grid Alignment: lets you set the alignment of images within the grid area when the Grid or Masonry layouts are selected.
     • Left: aligns the images to the left of the grid area.
     • Center: aligns the images to the center of the grid area.
     • Right: aligns the image to the right of the grid area.
     • Spaced Around: distributes an equal amount of space between each grid area with half the space between the outer edges of the grid and its container.
     • Spaced Evenly: distributes an equal amount of space between each grid area with equal space between the outer edges of the grid and its container.
   • Thumbnail Title: lets you choose an option for the display and placement of the thumbnail image's title.
     • Don't Show: no title is displayed.
     • Show on Image: displays the title on the image.
     • Show on Image on Rollover: displays the title on the image when the mouse pointer hovers over the image.
     • Show Above: displays the title above the image.
     • Show Above on Rollover: displays the title above the image when the mouse pointer hovers over the image.
     • Show Below: displays the title below the image.
     • Show Below on Rollover: displays the title below the image when the mouse pointer hovers over the image.
7. Click OK, once you have finished configuring the settings.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.