Your first gallery

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

What you’ll learn

• How to set a main folder once so you never copy a folder URL again
• How to create a gallery and pick its folder from a dropdown
• How to point a gallery at a folder by ID or URL, if you prefer that
• How to set grid image size, batch size and loading mode
• How to place the gallery on a page and check it 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

Step-by-step

1. Set your main folder (once)

Go to Customer Cloud Gallery → Settings → Main folder (folder picker) and enter the parent folder that holds your job folders — for Drive a folder URL or ID, for Dropbox a path like /Photos. Save.

This is optional, but it is what turns folder selection into a dropdown for every gallery you create from now on. If you’d rather not set one, skip to step 3 and paste folder IDs by hand.

2. Create the gallery

Customer Cloud Gallery → Add New Gallery. Give it a title — the client name or the shoot date works well. The title is what visitors see above the grid and what the ZIP download is named after.

Below the title, Couple / customer (internal name) is an optional internal label used in the admin dashboard and as a fallback filename.

3. Choose the folder

In Gallery configuration → Cloud folder, click Choose folder next to your provider and pick the subfolder from the list. The plugin confirms the folder name underneath.

Without a main folder the Choose folder button isn’t there and you paste the folder yourself:

• Google Drive — open the folder in your browser; the URL looks like https://drive.google.com/drive/folders/1AbCdEfGhIjKlMnOpQrStUv. Paste the whole URL or just the last segment, both work.
• Dropbox — the path looks like /Clients/Smith Wedding 2025. Paste the path, or the share-link URL and the plugin extracts the path.

Either way, Check verifies the folder right there and tells you what it found.

4. Configure the display

• Images per batch — how many photos load at a time. Default 40; 30–40 is a good starting point.
• Loading mode — Auto-load on scroll keeps loading as the visitor scrolls, Click “Load more” waits for a click. Scrolling gets more engagement, the button gives visitors more control.
• Grid image size — Small (~200 px) through Extra large (~520 px). The number of columns follows from this: bigger images mean fewer per row. Most client galleries look right at Medium or Large. There is no separate column setting — see the FAQ for why.
• Sort order — Filename (natural) is the safe default for numbered files; it sorts 2 before 10 even without leading zeros.

Downloads, favourites and cookies sit further down under Features & cookies.

5. Publish

Click Publish. The gallery now has a numeric ID, and the Shortcode box shows:

[ccgal_gallery id="42"]

(Your number will differ.) You only need it for page builders that have no native support — the block and the Elementor widget find the gallery by name.

6. Put it on a page

1. Create a page (Pages → Add New) and title it after the client.
2. Add the Cloud Gallery block and pick your gallery from the dropdown.
3. Publish.

Using Elementor, Divi or Beaver Builder instead? See Block, Elementor and other page builders.

7. Check it as a visitor

Open the page in a private window so you don’t see the admin toolbar. Thumbnails appear as Drive or Dropbox returns them; the first load is a little slower because they are being cached locally for the next visit.

Common mistakes

“Invalid gallery ID” on the page. The gallery is still a Draft. Open it in the admin and publish it.

The Choose folder button isn’t there. No main folder is set for that provider, or the provider isn’t connected. Both live in Settings.

The folder looks right but no images appear. Check that the folder actually contains image files (JPEG, PNG, HEIC, WEBP) and that the connected account can open it. Settings → Test connection answers both in one click.

Great on desktop, cramped on mobile. The grid stacks automatically on small screens. If thumbnails feel small even on desktop, move Grid image size up to Large or Extra large — the mobile breakpoints scale from your desktop choice.

Next step

Turn the page into a proper delivery experience — hero, title image, print CTA: Building a beautiful gallery page. Or let new folders become galleries by themselves: Automatic galleries (Pro).