Skip to content

Image Gallery Widget

Description

The Image Gallery Widget displays a grid of images with zoom, download, and social sharing capabilities. Supports lightbox for full-screen viewing.

Page Builder Name: Image Gallery | PapaThemes

Version: 1.0.0

Features

  • ✅ Responsive image grid
  • ✅ Lightbox full-screen viewing
  • ✅ Image download button
  • ✅ Share to Facebook, Twitter, Pinterest
  • ✅ Customizable column sizes per device
  • ✅ Lazy loading images
  • ✅ Hover effects

How to Use

1. Add Widget

  1. Open Page Builder
  2. Drag Image Gallery | PapaThemes widget to the page
  3. Widget displays with 4 sample images by default

2. General Configuration

In the Settings tab:

Icons

Option Description Default
Show Download Icon Show download button true
Show Zoom Icon Show zoom/lightbox button true
Show Facebook Icon Show Facebook share button true
Show Twitter Icon Show Twitter share button true
Show Pinterest Icon Show Pinterest share button true
Enable Image Lazyload Enable lazy loading true
Icon Color Icons color #000000

Columns

Option Description Default
Padding (Desktop) Space between images 10px all sides
Padding (Tablet) Space on tablet 10px all sides
Padding (Mobile) Space on mobile 5px all sides

Image Title

Option Description Default
Color Title color #000000
Typography Font style Default
Font Size (Desktop/Tablet/Mobile) Font size 16px
Alignment Alignment Center
Padding Spacing 5px 0

3. Managing Images

In the Images tab:

Adding New Images

  1. Click Add Image
  2. Upload or select from library

Configuring Each Image

Option Description Default
Image Display image Sample image
High-Res Image for Downloading High-resolution download image (empty)
Width Width 600px
Height Height 600px
Fit Fill method (Contain/Cover) Contain
Hover overlay color Overlay color on hover rgba(255,255,255,0.5)
Column Width (Desktop) Desktop column width 25%
Column Width (Tablet) Tablet column width 50%
Column Width (Mobile) Mobile column width 100%

Configuration Examples

Desktop: 25% per image (4 columns)
Tablet: 50% per image (2 columns)
Mobile: 100% per image (1 column)

Desktop: 33.33% per image (3 columns)
Tablet: 50% per image (2 columns)
Mobile: 100% per image (1 column)

Set different widths for each image: - Large image: Desktop 50%, Tablet 100%, Mobile 100% - Small image: Desktop 25%, Tablet 50%, Mobile 50%

Feature Details

When clicking the zoom button: - Image displays full-screen - Navigate between images - 80% opacity overlay - Click outside to close

Download

  • Click download button to download image
  • If High-Res Image configured, downloads high-resolution version
  • Opens in new tab with download attribute

Social Share

  • Facebook: Share image link to Facebook
  • Twitter: Tweet with image URL and title
  • Pinterest: Pin image to Pinterest

Responsive Behavior

Size Breakpoint Behavior
Desktop >= 801px Full icons, hover effects
Tablet 551px - 800px Icons always visible
Mobile <= 550px Icons always visible

Lazy Loading

When Lazy Loading is enabled: - Images only load when near viewport - Displays empty SVG placeholder - Uses lazyload class - Improves page load speed

Fit Options

Contain

  • Image displays completely
  • May have empty space
  • Preserves aspect ratio

Cover

  • Image fills container
  • May crop image
  • No empty space

Editing Titles

  1. Enable Edit Mode
  2. Click on image title
  3. Edit text (HTML supported)
  4. Save changes

Notes

  1. Image size: Optimize images before upload for faster loading
  2. Aspect ratio: Ensure Width/Height matches actual image ratio
  3. Social share: Images must be public for successful sharing
  4. Lazy load: Enable for better performance