Overview
This article will instruct you on how to create your own collage of photos using the Photo Gallery Widget. We will be using a content page below and If needed you can learn about content pages by clicking here.
Adding the Widget
To get started, scroll down to the widget area and select "Add Widget."
You will then be brought the widget selection overlay where you will find the "Photo Gallery" widget. Simply click add to apply the widget to the page.
Widget Settings
Once you click to edit the widget you will find the following settings:
Layout: This specifies the layout of the images in the photo gallery and has three options:
- Natural - Places images into rows
- Masonry - Places images into columns
- Square - All images receive same height and width in a grid layout
Row Height: The maximum height a row of images can have. Units are in pixels. (Used with Natural layout option)
Min/Max Ratio: This prevents narrow images by forcing the ratio to be in the given limits. Min Ratio:1 and Max Ratio:1 produce squares
Gap: The distance in pixels between each photo gallery image.
Light Box: Enable this setting to show a lightbox after clicking on an image. Opens the image in a lightbox with controls to zoom in and navigate between other images in the photo gallery.
Zoom Scale: The amount an image zooms on hover. Accepts decimal values. Numbers greater than 1 will zoom in, while numbers less than 1 will shrink the image.
Zoom Rotation: Amount in degrees that images will rotate on hover. Accepts decimal values. Positive values rotate clock-wise, negative values rotate counter clock-wise.
Show Labels: Settings for how to display captions on photos that have them. This is for the thumbnail caption display. The caption will always show in the lightbox view.
- Hover - Display captions when hovering over image
- Always - Always display captions
- Never - Never display captions
Default Background Color: Specifies the default background color that will display behind all images before images are fully loaded. Check 'Use Default Background Color' to enable this.
Random Background Colors: Places random background colors behind each image. This is the color that will display before images are fully loaded.
Note: This setting overrides image level background colors if turned on. If 'Use Default Background Color' is enabled, this setting will be ignored.
Border Radius: Allows for customization of image borders within the gallery. Example usage: "10px" will add a slight curve around the corners of images.
For more info on accepted formats of this field, please see https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Adding Images
Below the widget settings, you will find the area to add your images.
After clicking add you will then be brought to the settings for the individual images.
Thumbnail Image: The image to be displayed in the photo gallery collage, before opening it up in lightbox. Would ideally be a smaller resolution image than the enlarged image.
Note: If no image is specified, the enlarged image will be used as the thumbnail.
Thumbnail Width: The width and height of the thumbnail image in pixels. It is recommended to either choose a smaller image for your thumbnail, or resize it to be smaller. This can save on bandwidth.
Thumbnail Height: The width and height of the thumbnail image in pixels. It is recommended to either choose a smaller image for your thumbnail, or resize it to be smaller. This can save on bandwidth.
Use Resizer: Determines if the image will be resized using the system resizer.
More info on image resizer: https://support.americommerce.com/hc/en-us/articles/201906640-Enabling-Automatic-Image-Resizer
Size Proportionally: Check this to force pictures to be scaled proportionally.
Enlarged Image: The image that is displayed inside the lightbox after clicking on the thumbnail image. Would ideally be a larger resolution image than the thumbnail image.
Note: If no enlarged image is specified, the thumbnail image will be used as the enlarged image.
Enlarged Width: The width and height of the enlarged image in pixels. A specific width and height must be specified for the photo gallery to function properly. If no width or height is entered, the image dimensions will be used.
Enlarged Height: The width and height of the enlarged image in pixels. A specific width and height must be specified for the photo gallery to function properly. If no width or height is entered, the image dimensions will be used.
Background Color: The background color that will display behind your image before the image is finished loading. If 'Use Default Background Color' or 'Random Background Colors' settings are enabled, this setting is ignored.
Link: A page for the image to link to.
Note: If you have lightbox enabled you must specify a caption to serve as the link button
Change Image Order
Once you have added some images to the widget, you will see them displayed like below. You can simply click and drag the images to change their sort order.
Click the orange save button in the top right corner of the page and you are now ready to view your Photo Gallery.
