How to Customize Your SharePoint Image Gallery Look?

The Sunrise Post
3 min readSep 10, 2024

--

Learn how to configure the layout, design, and display settings for your SharePoint image gallery web part.

Customizing the look and feel of your SharePoint image gallery can help highlight your photos, artwork, or other visual content.

SharePoint image gallery web part

This easy-to-follow guide covers key configuration settings you can adjust.

Overview

The SharePoint image gallery web part offers various layout, design, and display options. You can:

● Change the gallery’s orientation from horizontal to vertical

● Adjust the number of columns

● Set the spacing between images

● Add borders and captions

● And more

Following basic configuration steps enables you to adapt the web part for your specific needs.

Key Benefits

Fine-tuning your SharePoint image gallery unlocks benefits like:

Enhanced visual appeal — Well-designed galleries attract more attention

Improved usability — Adjustments for easy viewing on different devices

Greater versatility — Supports showcasing different types of media

Custom branding — Galleries can match your site’s look and feel

Step-by-Step Guide

Below we explain how to access and use the most helpful image gallery configuration settings in SharePoint Online.

Accessing the Toolbar

  1. Navigate to the SharePoint page containing your image gallery
  2. Hover over the web part and click the ellipsis icon (…) to open the menu
  3. Select ‘Edit Web Part’ to reveal the toolbar

The toolbar contains customizable display, layout, and design options

Changing the Layout

Let’s explore how to adjust the gallery’s structure:

Switch from Horizontal to Vertical

  1. In the toolbar, open the ‘Layout’ menu
  2. Choose ‘Show items in a vertical arrangement’
  3. Select OK to preview change
  4. Useful when want taller, narrower gallery

Set Number of Columns

  1. Under the ‘Columns’ setting, select dropdown menu
  2. Choose desired number of columns (1–9)
  3. Hit OK to apply
  4. Columns wrap automatically based on page width

Tip: Test different column numbers to optimize gallery fit

Modify Image Spacing

  1. Under ‘Spacing’ option, enter desired pixel spacing
  2. Hit OK and preview layout
  3. Adds uniform spacing around gallery items
  4. Creates cleaner visual presentation

Customizing the Design

To polish the display, utilize these helpful design settings:

Enable Borders

  1. Go to ‘Border’ section
  2. Check box to ‘Show border’
  3. Select OK to reveal borders
  4. Visually separates gallery images

Add Image Captions

  1. Navigate to ‘Appearance’ > Captions
  2. Choose to display File Leaf Ref, File Name, or None
  3. Hit OK to confirm
  4. Surfaces more image context

Further Design Options

For added visual polish, also modify:

● Rounded corners

● Drop shadows

● Mouse over effects

● Zoom settings

● And more

Test combinations to achieve your optimal gallery style.

Tip: For a more seamless branded look, choose elements like colors, borders and captions to match your broader site design.

SharePoint image gallery web part

Summary

Configuring your SharePoint image gallery is straightforward with the built-in toolbar options covered here. Start by considering your layout preferences and desired use cases, then explore adjustments to orientation, columns, and spacing to craft an optimal structure. Introduce borders, captions and other design choices to inject visual flair and surface helpful context.

With a well-designed, properly customized SharePoint image gallery, you can deliver engaging, adaptable experiences for any visual media you publish across sites and screens.

--

--

The Sunrise Post
The Sunrise Post

Written by The Sunrise Post

Contact us if you have any queries regarding guest posting.

No responses yet