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

Configuring a Photo Gallery

When you set up a photo gallery, you can adjust things like its height, style, animation effects, and choose when it should be visible. You can also customize each featured image with its own heading, description, and display options.

You can fine-tune how your photo gallery looks by using the elements of the theme applied to your site. Pick fonts, text colors, gallery sizes, overlay colors, and more. For more information, see Theme Skin Manager.

To configure a photo gallery:

  1. Log into Site Management Tools. For details, see Logging into Site Management Tools.

  2. Go to the page that contains the photo gallery.

  3. Click the Edit Mode icon Edit Mode Icon from the site management toolbar.

  4. Hover over the Photo Gallery box to display the content controls.

  5. Click Edit to open the Photo Gallery Settings in the side panel.

  6. In the General subtab, set the following fields:

    Field

    Description

    Name

     

    Visibility

    Controls when the photo gallery appears on your site. For more information, see View Site as of a Specific Date in Site Management Tools.

    Gallery Height

    Determines the size of the photo gallery. You can customize these size options using the Theme Skin Manager. For more information, see Theme Skin Manager.

    Style

    Choose how your photo gallery looks:

    • Carousel shows images in a carousel on desktop and one at a time on mobile.

    • Grid shows images in a grid on desktop and stacked on mobile.

    Hover Animation

    Pick what happens when someone hovers on an image. 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

    Choose how the carousel animation works if you’ve picked Carousel style.

    Open links in a new window

    Open gallery links in a new tab or window if you check this option

    Image Size ID

    Link the image to the resizing option you want.

    To use this option, enter a 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, see Image Resizing and Compression.

    Tags

    Add keywords to help filter your content in the Review Changes list. For more information, see Content Tags and Filter Tools.

  7. In the Image subtab, set the following fields:

    Field

    Description

    Image

    Pick the image to display using the Image Manager. For best results, optimize your images before uploading. For more information, see Image Manager.

    Alt Text

    Add a description for the image to boost accessibility and SEO.

    Image Alignment

    Choose where the image appears inside the content box.

    Image Overlay

    Pick how transparent the image overlay should be.

    Heading

    Enter the main heading text you want on the image.

    Description

    Add a description or subheading to appear on the image.

    Text Alignment

    Choose where the heading and description appear on your image.

    Text Color

    Pick colors for the heading and description text. You can customize these color options using the Theme Skin Manager. For more information, see Theme Skin Manager.

    Link

    Enter the URL you want your image to link to.
    Note:

    Each image in your gallery has its own Image tab, so you can adjust settings for each image however you want.

  8. Repeat Step 7 for every image you want to add. You can add up to eight images in single gallery.

  9. Click Save.

Related Topics

General Notices