The Image Gallery component displays multiple photos in your choice of layout. Use it to showcase products, portfolios, event photos, or any collection of images.

What Image Gallery does

This component creates an attractive display for multiple images. Visitors can view photos in a grid, staggered pattern, or swipe through them in a carousel.

Use this when you want to:

• Showcase product photos from different angles
• Display a portfolio of your work
• Share event or wedding photos
• Show property images for real estate
• Create before/after comparisons
• Present menu items visually

Started from the Images template?

If you chose Images when creating your QR code, this component is already on your page. Skip to Step 3 to upload your images.

How to add an Image Gallery

Step 1: Open your landing page editor

Go to your Dashboard, select your QR code, and click Edit.

Step 2: Add the component

Click Add component at the bottom of the editor panel. Select Image Gallery from the menu.

Step 3: Upload your images

Click Browse to select images from your device. You can upload multiple images at once.

Supported formats: JPG, PNG, GIF, WebP

After uploading, your images appear as thumbnails in the editor.

Step 4: Choose a layout

Select how your images display:

Step 5: Reorder images

Drag images to change their display order. The order in the editor matches the order on your page. For carousel layout, this sets the slideshow sequence.

Step 6: Save your changes

Click Save to publish your gallery.

Layout visual reference

Grid (Layout 1)

┌───┬───┬───┐
│ 1 │ 2 │ 3 │
├───┼───┼───┤
│ 4 │ 5 │ 6 │
└───┴───┴───┘

• 3-column uniform grid
• All thumbnails same size
• Rows align horizontally
• Best for: Product shots, team photos, consistent imagery

Staggered/Brick (Layout 2)

┌───┬───┬───┐
│   │ 2 │ 3 │
│ 1 ├───┤   │
│   │   ├───┤
├───┤ 5 │ 6 │
│ 4 │   │   │
└───┴───┴───┘

• Varied image heights
• Columns flow independently
• Creates visual interest
• Best for: Portfolios, artistic displays, varied content

Carousel (Layout 3)

┌─────────────────┐
│                 │
│   ◀  [1]   ▶   │
│                 │
├─────────────────┤
│    ● ○ ○ ○     │
└─────────────────┘

• One image at a time
• Left/right navigation arrows
• Dot indicators show position
• Best for: Featured photos, property tours, step-by-step visuals

Tips for best results

• Use similar dimensions. Images of the same size look more professional in grid layout.
• Optimize file size. Large files slow down page loading. Resize images before uploading.
• Order matters. Put your best images first, especially for carousel layout.
• Consider mobile. Test how your gallery looks on a phone screen.

Managing your gallery

Common questions

How many images can I add?

There is no strict limit. However, many images increase page load time. For best performance, keep galleries under 20 images.

What image size should I use?

For best quality, upload images at least 1200 pixels wide. The system resizes them for display, but higher resolution sources look sharper.

Can visitors download my images?

Images can be saved by visitors using their device's standard save function. If you need to protect images, add a watermark before uploading.

Do images link anywhere when tapped?

In Grid and Staggered layouts, tapping an image opens a larger view. In Carousel layout, visitors use arrows to navigate.

Can I add captions to images?

The Image Gallery component does not support individual captions. If you need captions, use the Item List component instead, or add a Content component below your gallery.

Related articles

• Landing page components: Complete guide
• How to add a Content component
• How to create a dynamic QR code