About the Image Gallery

The Image Gallery Web Part displays visual images in a clean gallery styled layout. Configure multiple image galleries on a page - all of which can contain and house multiple images. The Image Gallery Web Part has different style options and customizable features to best match your community’s visual identity and brand. 

Key features:

• Easily display multiple images within a gallery display

• Offers easy-to-configure styling for each gallery display

Open

Setup and Configuration

Add the Image Gallery Web Part to a Page

In the top right of your page click on edit

Open

Click the plus button where you would like to add another section where you can add more web parts.

Please select either a section or a template to add within the new section.

 Hover over the top area of the section until a gray line and plus symbol show and then click on it

Search for and select the Image Gallery by Social Edge web part

 Click in the section and click on the pencil icon 

A menu will open on the right-hand side, please click open config panel.

Configure the Image Gallery

Configuring the Setup

Add as many images as desired. Each image supports a title, a subtitle, a description, and image. Please see the image below for an example of a configured Image Gallery. 

To Add a New Image - Click on Add Image

Within each image section please fill out the following: 

Once you click on an image from within the gallery - the view will be as follows:

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

Configure the Theme 

Color Theme Configuration Menu

Set the Lightbox Background Color. This is the background color that is shown once an image is clicked. 

Set the Image Text Color. This is the color of the text shown once an image has been clicked on.

Set the Lightbox Background Opacity. This is how opaque (see-through) the background will be once an image is clicked on. 

Set the Caption Hover Effect. Choose between fade or flat. This is the hover effect applied when you hover over an image and the text is shown. 

Set the Additional Hover Effect. Choose between none, shadow, or focus. This will affect the hover effect of the image gallery items themselves.

Configure the Advanced Settings

Advanced Settings Configuration Menu 

Set your Column Count. This is how many images will display horizontally in a row before starting a new one. In the image below - the example below is 4 columns.

Set the Rounded Corners. Choose between none, small, medium, or large. 

Set the Gutter. Enter a number for the gutter sizing - this controls the amount of space between the images.

Set the Max Gallery Height(px). Set the overall height of the gallery display in pixels.

Configure Fonts

1. Select Fonts from the web part menu.

2. Select a Font method from the below options for the following accordion components:

   • Component

     • Title

     • Subtitle

     • Description

Font selection

Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your SharePoint community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).

Google Font: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: Google Fonts.

Custom Font: you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or ttf font file.

Note: You are responsible for licensing and paying for that font

Migrate Configuration

To copy an already configured Image Gallery web part and paste it onto another page (to avoid having to reconfigure) - please click on the migrate configuration tab and click on copy to clip board under the copy current config.

To paste in your Image Gallery code - navigate to a new page where you would like to add a new Image Gallery web part - add it to the page and click to edit the web part. Once you are editing the web part - enter your code within the add new config tab and click apply.

Publish the Page

When you are done making all changes scroll down and click save all within the web aprt configuration. 

In the top right corner of your page you will then click publish (if your page has not been published yet) or you will click republish (if your page has already been published and you are making changes and want to republish). 

Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeoncuslting.com