5 Easy Tips to Customize SharePoint Image Galleries
Adding an image gallery component to SharePoint can be a great way to showcase photos, graphics, or other visual media. However, the default SharePoint image gallery may only sometimes fit your specific needs.
In this article, we'll cover five helpful tips to customize the default image gallery component in SharePoint Online and adapt it to your requirements.
Whether you want to change branding colors, resize thumbnails, modify image spacing, or alter the overall layout, these tips will show you how.
1. Switch Between Gallery Layout Options
SharePoint offers three main layout options for image galleries:
Slideshow - Images display one at a time in full-size
Grid - Images display in an evenly-spaced grid pattern
Carousel - Images rotate through horizontally in a slideshow-style carousel
To change the layout:
Go to your SharePoint site and edit the page with the image gallery web part.
In the web part toolbar, click the ellipses (...) icon.
Select Gallery Layout and choose your desired option.
The carousel or slideshow styles work great for hero images or featured content. The grid layout makes better use of space for multiple smaller images.
2. Adjust Gallery Image Sizing and Spacing
In a SharePoint image gallery, you can customize the display of thumbnails in a grid layout:
Thumbnail Size - Pixel width/height of each thumbnail
Spacing - Amount of space between thumbnails
Columns - Number of columns to display per row
To modify these settings:
Edit the page and select the image gallery web part.
Open the web part toolbar and click Web Part Settings.
Under Images, adjust the values for Size, Spacing, and Columns.
Reducing spacing and columns allows you to fit more thumbnails without needing to shrink them too drastically.
3. Add Custom Branding Elements
You can introduce custom branding to your SharePoint image gallery to match company colors or themes:
Colors - Set background/text colors
Icons - Replace default icons
Logos - Add a header logo
To apply custom branding:
Download theme assets like images, CSS, etc.
Upload files to Site Contents document library.
Edit gallery web part > Web Part Appearance > Customize.
Adjust background, text colors, add CSS overrides.
Add element ID tags to insert logos/icons.
Even small branding tweaks make the gallery feel more integrated into your unique site.
4. Build Custom Galleries from Scratch
For full customization control, you can build your image gallery web part from scratch:
Create HTML image gallery markup yourself
Style it with custom CSS
Add any desired functionality with JavaScript
Embed gallery in web part HTML editor
Some key elements to include:
Container div for gallery
Image thumbnail grid layout
Lightbox plugin for overlays
Image titles/captions
Control buttons
Going fully custom allows unlimited adaptations but requires more effort. Great for advanced users with specific needs.
5. Use Third-Party Gallery Extensions
If you want robust gallery features but don't have coding expertise, gallery extensions are a great option:
Column Slider - Add image sliders in columns
Filter - Filter images by tags/categories
Lightbox - Expand images into full-screen overlays
Videos - Embed videos in your galleries
SEO - Optimize galleries for search engines
Learn how to customize SharePoint Online image galleries with 5 simple tips for modifying default layouts, adding custom branding, changing thumbnail sizes, and more.