Your first gallery

This page walks you through publishing your first client gallery. By the end you’ll have a working shortcode pasted into a WordPress page that loads photos directly from your cloud folder. Aimed at anyone who has already connected at least one cloud provider.

What you’ll learn

• How to create a new gallery and point it at a Drive or Dropbox folder
• How to find a folder ID inside a Drive or Dropbox URL
• How to set grid image size, pagination and load mode (infinite scroll vs button)
• How to embed the shortcode in a WordPress page or block
• How to preview the gallery as a visitor

Prerequisites

• The plugin installed and activated (see Installation)
• At least one cloud provider connected (Google Drive or Dropbox)
• A folder in Drive or Dropbox that contains the photos you want to share

Tutorial video

Video coming soon.

Step-by-step

1. Open the new-gallery editor

In the WordPress sidebar, go to Customer Cloud Gallery → Add New. The familiar WordPress editor appears with extra panels on the right for cloud connection, layout, and pro options.

2. Set the gallery title

The title shows in the admin list and (optionally) at the top of the page. Use the client name or shoot date.

3. Pick a storage provider and folder

If you’ve connected Drive and Dropbox, choose the provider for this gallery. Then paste the folder ID of the folder that holds the photos.

How to find a Google Drive folder ID: Open the folder in Drive in your browser. The URL looks like:

https://drive.google.com/drive/folders/1AbCdEfGhIjKlMnOpQrStUv

The folder ID is the last segment: 1AbCdEfGhIjKlMnOpQrStUv. You can paste either the full URL or just the ID into the plugin — both work.

How to find a Dropbox folder path: Open the folder in Dropbox. The URL or path looks like /Clients/Smith Wedding 2025. Copy the path (or paste the share-link URL — the plugin extracts the path).

The plugin offers a folder browser as well — click Browse if you’d rather pick visually.

4. Configure layout

In the right-hand sidebar:

• Grid image size — Small, Medium, Large or Xlarge. The grid auto-derives the column count from this; bigger images mean fewer columns on the same screen width. Most photographers pick Medium or Large for client galleries; the grid adapts to mobile automatically.
• Images per page — defaults to 40 (choices: 10, 15, 20, 30, 40, 50, 75, 100). 30 or 40 is a sensible starting point — lower numbers feel snappier on slow connections, higher numbers reduce the “Load more” friction.
• Load mode — Infinite scroll keeps loading as the visitor scrolls, Load more button waits for an explicit click. Infinite scroll has higher engagement, the button gives the visitor more control.

5. Publish

Click Publish in the top right. The plugin generates a numeric gallery ID and prints the shortcode in the gallery sidebar:

[ccgal_gallery id="42"]

(Your number will differ.)

6. Embed the shortcode in a page

1. Create or edit any WordPress page (e.g. Pages → Add New, title it “Smith Wedding”).

2. Add a Shortcode block and paste your shortcode.

3. Optionally, add a Spacer block above it (useful for themes with transparent headers — see Password protection).

4. Click Publish on the page.

   

7. Preview as a visitor

Open the page in an Incognito / Private window so you don’t see the admin toolbar. The gallery should load with thumbnails appearing as Drive or Dropbox returns them. The first load is slightly slower (thumbnails are being cached locally for the next visit).

Common mistakes

“Invalid gallery ID” error on the page. You pasted the shortcode but the gallery is in Draft state, not Published. Open the gallery in admin and hit Publish.

Folder ID looks fine but no images appear. Make sure the folder actually contains image files (JPEG, PNG, HEIC, WEBP) — empty folders or folders with only video produce a blank grid. Also check that the cloud account you authorised is the one that owns or has access to that folder.

Gallery looks great on desktop but cramped on mobile. The plugin auto-stacks the grid on small screens. If thumbnails feel too small even on desktop, switch the Grid image size to Large or Xlarge — that gives you fewer, bigger images per row. The mobile breakpoints scale from your desktop choice.

Next step

Restrict access so only your client sees the gallery: Password protection.