1. Commerce
  2. Store Front
  3. Website Content
  4. Image Content
  5. Photo Gallery

Photo Gallery

The Photo Gallery extension lets you add a gallery of images to your web page using Site Management Tools (SMT).

With Photo Gallery, you can:

For each image, you can link to an external or internal URL. For example, you can feature new product arrivals and link to the Product Details pages.

Important:

Commerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see Commerce Extensions.

Note:

Extensions require SuiteCommerce or the Aconcagua release of SCA or later.

This topic explains how to:

Use SMT to add, configure, or delete a photo gallery on multiple areas of your website. Adding this content type to enhanced or custom landing pages allows you to feature a gallery in the place and style you want. For more information on Site Management Tools, see Site Management Tools Overview.

Add a Photo Gallery

To add a photo gallery to your web store, add the Photo Gallery content type to a page of your site using SMT. You can add up to eight images.

To add a photo gallery:

  1. In your website, navigate to the page where you want to add a photo gallery.

  2. Log in to SMT.

    For more information, see Users and Roles in SMT.

  3. In Edit mode, click Add on the Site Management toolbar.

  4. Drag the Photo Gallery content type to the page.

    Note:

    If you do not see this content type, check that the extension has been installed and is active. Click Settings on the Site Management toolbar to access the Content Manager. Drag the content type from the Inactive Content Types list to the Active Content Type list.

    You can drag a Photo Gallery content type to multiple areas on the page.

    For more information on the scopes of different SMT areas, see Area and Scope.

  5. Configure the settings to best fit your needs.

    See Configure a Photo Gallery.

Configure a Photo Gallery

Configure properties to customize your photo gallery.

The following procedures explain how to customize:

  • General settings — Configure gallery settings, such as gallery height and style, image animation effects, and visibility options.

  • Image settings — Configure featured image settings, such as headings, descriptions, and image display options.

Using SMT, you can also customize the style and display settings of the photo gallery with the Photo Gallery fields in the Theme Customizer. You can choose the font, text colors, gallery size options, overlay colors, and more to make each display fit your needs. For more information, see Theme Skin Manager.

To configure general settings:

  1. While logged in to SMT, navigate to the page that contains the photo gallery.

  2. In the Photo Gallery box, click Edit.

    This displays the Photo Gallery Settings in the side panel.

  3. In the General tab, set the following fields:

    Field

    Description

    Name

    Sets the name for the photo gallery to appear in the Review Changes list in SMT.

    Visibility

    Sets the visibility option that determines when you want to make the photo gallery visible.

    For more information on visibility options, see Visibility Dates.

    Gallery Height

    Determines the size of the photo gallery.

    You can customize these size options using the Theme Customizer. For more information, see Theme Skin Manager.

    Style

    Determines the display style of the photo gallery.

    See Example below for a depiction of each style.

    You can choose from the following options:

    • Carousel - images appear in a carousel on a desktop and one at a time on a mobile device

    • Grid – images appear in a grid on a desktop and stacked on a mobile device

    Hover Animation

    Sets the hover animation behavior for the images.

    Hover animations only work if the Style field is set to Grid.

    Image scale options zoom in or out of the image, without affecting the container. Container drop shadow options display a shadow around the image container.

    Carousel Animation

    Sets the carousel animation behavior for the photo gallery, if the Style field is set to Carousel.

    Open links in a new window

    If checked, opens a link from the photo gallery in a new tab or window.

    Image Size ID

    Links to the image resizing option you want the image to use.

    To use this option, you must enter an enabled Image Size ID found under the Images tab in the Image Resizing section of the Web Site Setup record (Commerce > Websites > Web Site List.

    For more information on Image Resizing, see Image Resizing and Compression.

    Tags

    Sets keywords to help filter your content in the Review Changes list.

    For more information on content tags, see Content Tags and Filter Tools.

  4. Click Save.

To configure image settings:

  1. While logged in to SMT, navigate to the page that contains the photo gallery.

  2. In the Photo Gallery box, click Edit.

    This displays the Photo Gallery Settings in the side panel.

  3. In the Image tab, set the following fields:

    Each image in the photo gallery has its own Image tab with associated fields, so you can change the settings for each photo individually.

    Field

    Description

    Image

    Sets the image to display using the Image Manager. For more information, see Image Manager.

    For optimum performance, optimize images before uploading.

    Alt Text

    Sets a description of the image to be used to improve accessibility and SEO.

    Image Alignment

    Determines the positioning of the image within the content box.

    Image Overlay

    Determines the opacity of the image overlay.

    Heading

    Sets the main text to appear on the image.

    Description

    Sets the secondary text to appear on the image.

    Text Alignment

    Determines the positioning of the Heading and Description on the image.

    Text Color

    Sets the color for the Heading and Description texts.

    You can customize these color options using the Theme Customizer. For more information, see Theme Skin Manager.

    Link

    Determines the URL to which you want the image to link.

  4. Click Save.

Remove a Photo Gallery

You delete the photo gallery from your site using SMT in one of two ways, depending on whether you have published the content to your website:

  • Discard the photo gallery if you have not published the content.

  • Remove the photo gallery if you have already published the content.

To discard a photo gallery (Unpublished Content):

  1. While logged in to SMT on your website, select the Review & Publish Changes list from the Site Management toolbar.

  2. Select the Photo Gallery content in the list.

  3. Click Discard.

  4. Click OK.

To remove a photo gallery (Published Content):

  1. While logged in to SMT on your website, navigate to the page that contains the photo gallery content you want to remove.

  2. In Edit mode, click the Photo Gallery box.

    This highlights the photo gallery and displays the content controls.

  3. Click Remove.

  4. Click OK.

Example

This shows a photo gallery set to Carousel.

Photo gallery set to carousel.

This shows a photo gallery set to Grid.

Photo gallery set to grid.

Related Topics

Image Content
Image Manager
SMT Image Content Type
SMT Image Compression
Image Text Overlay
Slideshow

General Notices