007AJ CloudDeck

What is inside

What you need: WordPress 6.3 or newer, PHP 7.4 or newer, an https website (Dropbox and Google require it), and a free Dropbox and/or Google account.

Install

1. In your WordPress dashboard go to Plugins → Add New Plugin → Upload Plugin.
2. Click Choose File, select ajcd-clouddeck.zip and click Install Now.
3. Click Activate Plugin.
4. A new CloudDeck menu appears in the left sidebar. Open CloudDeck → Get Started. The checklist there shows what is done and what is next.

Quick start (5 minutes)

Want to see everything working before you set up Dropbox or Google?

1. Go to CloudDeck → Settings, tick Demo Mode and click Save settings.
2. Create a new page, add a Shortcode block and paste [clouddeck module="gallery"]. Publish and view the page.
3. Try the other modules: browser, upload, player and slider.
4. When you are ready, connect your cloud account (next sections) and switch Demo Mode off. Your pages keep working and now show your real files.

Connect Dropbox

You create your own small "app" in Dropbox. It is free, takes about 5 minutes, and means your files only ever travel between Dropbox and your own website.

1. In WordPress open CloudDeck → Connections. At the top you will see Your redirect URI. Click Copy. It looks like https://yoursite.com/wp-json/ajcd/v1/oauth.
2. Open the Dropbox App Console, log in with the Dropbox account that holds your files and click Create app.
3. Choose Scoped access. Then choose Full Dropbox to use any folder, or App folder if the website should only see one dedicated folder. Type a name (for example "My Site Files") and click Create app.
4. Open the Permissions tab. Tick files.metadata.read, files.metadata.write, files.content.read and files.content.write. Click Submit at the bottom of the page.
5. Go back to the Settings tab. Under OAuth 2 → Redirect URIs, paste the redirect URI from step 1 and click Add.
6. On the same tab, copy the App key, then click Show next to App secret and copy that too.
7. Back in WordPress, paste them into the Dropbox card and click Save details.
8. Click Connect Dropbox, then click Allow on the Dropbox screen. You return to WordPress and the card says Connected.

Your Dropbox app can stay in "Development" status. Only you connect it. Visitors never log in to Dropbox.

If you tick the permissions after connecting, click Reconnect Dropbox so the new permissions apply.

Connect Google Drive

1. Copy the redirect URI from CloudDeck → Connections. It is the same one as for Dropbox.
2. Open the Google Cloud Console with the Google account that holds your files. Use the project picker in the top bar to create a New project (any name).
3. Go to APIs & Services → Library, search for Google Drive API and click Enable.
4. Go to Google Auth Platform (also called the "OAuth consent screen") and click Get started. Enter an app name and your email, choose External, and finish the steps.
5. Open Audience and click Publish app to set it to "In production". This matters: while the app is in "Testing", Google disconnects it after 7 days.
6. Open Clients (older screens call it Credentials) → Create client. For the type, choose Web application. Under Authorized redirect URIs, click Add URI, paste the redirect URI and click Create.
7. Copy the Client ID and Client secret into the Google Drive card in WordPress and click Save details.
8. Click Connect Google Drive and choose your account.

Google may show "Google hasn't verified this app". That is normal for your own private app. Click Advanced → Go to (your app name) (unsafe) → Continue. Only you see this screen. Your visitors never do.

Add a module to a page

Option 1: the Shortcode Builder (easiest)

1. Open CloudDeck → Shortcode Builder.
2. Pick a module, then a cloud service. Click Browse… to choose a folder from your Dropbox or Drive.
3. Adjust the display and permission options. The Live preview updates as you go.
4. Click Copy shortcode and paste it into a Shortcode block on any page or post.

Option 2: blocks

In the page editor, click + and search for CloudDeck. There is one block per module. All settings are in the right sidebar. The editor shows a placeholder card, and the real module appears on the live page.

The five modules

Shortcode reference

The basic form is [clouddeck module="browser" provider="dropbox" folder="/Clients"]. Every attribute is optional.

Examples

[clouddeck module="gallery" provider="dropbox" folder="/Portfolio" columns="3"]
[clouddeck module="upload" folder="/Submissions" upload="all" allowed="jpg,png,pdf" max_size="20"]
[clouddeck module="browser" folder="%user%" upload="logged_in" delete="logged_in"]
[clouddeck module="player" provider="gdrive" folder="1AbCdEfGhIjK"]
[clouddeck module="slider" folder="/Homepage Slides" height="560" interval="6"]

Private client folders (client portal)

Each logged-in user can get their own cloud folder and sees only that folder. This works well for clients, students, members and similar setups.

1. Open CloudDeck → User Folders. Tick Use private user folders, choose the cloud service and click Browse… to pick a parent folder such as /Clients.
2. Choose the folder name pattern. {username} is a good choice.
3. Leave Automatic ticked to create a folder whenever someone registers or first opens their portal. You can also click Pick folder or Create now next to any user in the table.
4. Create a page called "Client Portal" with [clouddeck module="browser" folder="%user%" upload="logged_in"]. You can also tick Private folder per user in the Builder or block.

Visitors who are not logged in see a Log in button. Administrators who have no folder of their own see the whole parent folder, so you can manage every client from the front end.

To let people sign up themselves, tick Settings → General → Anyone can register in WordPress. To add clients yourself, use Users → Add New User.

Permissions

Every module has five permissions: view, download, upload, rename and delete. Each one takes a comma-separated rule:

For example, download="logged_in" upload="editor,author" delete="none". The defaults are under CloudDeck → Settings → Default permissions. Administrators can always do everything.

Security: every request is checked on the server against a signed copy of the module's settings, so visitors cannot change permissions or reach folders outside the module's folder.

Email notifications

In CloudDeck → Settings → Email notifications, choose whether an email goes out when a file is uploaded, downloaded or deleted, and who receives it. If you leave the list empty, emails go to the site admin email. With private folders, the folder owner can also get an email when someone else changes their files.

If emails do not arrive, your host may block PHP mail. Use any SMTP plugin to send WordPress mail through your email provider.

Event Log

CloudDeck → Event Log lists downloads, uploads, renames, deletes, connections and errors, with the user, page and time for each. Visitor IP addresses are shortened for privacy. You can filter by event, search by file name, see 30-day totals and the top downloads, Export CSV or Clear log. Old entries are removed automatically after the number of days set in Settings (90 by default).

Caching

Folder listings are cached for 10 minutes by default (Settings → Look & speed), which keeps pages fast. Uploads, renames and deletes made through CloudDeck clear the cache straight away. If you add files directly in Dropbox or Drive and want them to show immediately, click Clear cache now. Thumbnails are cached in a protected folder, wp-content/uploads/ajcd-cache.

Demo Mode

With Demo Mode on, every module shows the sample photos, documents, music and video that come with the plugin, so no cloud account is needed. Uploads are simulated with a progress bar, and renames and deletes are refused, so nothing is ever stored. Use it to design your pages, or to run a public demo of your site. Turn it off under CloudDeck → Settings when you go live.

You can also add demo_folder="Photos/City" to a shortcode to choose which sample folder a module shows while Demo Mode is on.

For developers

Optional settings in wp-config.php:

define( 'AJCD_DROPBOX_APP_ID', '...' );      // Dropbox app key
define( 'AJCD_DROPBOX_APP_SECRET', '...' );
define( 'AJCD_GDRIVE_CLIENT_ID', '...' );
define( 'AJCD_GDRIVE_CLIENT_SECRET', '...' );
define( 'AJCD_DEMO_MODE', true );            // force Demo Mode on/off

Filters:

Tokens and app details are stored in their own options with autoload turned off. Access tokens refresh automatically.

Troubleshooting

"redirect_uri mismatch" or "Invalid redirect_uri"

The address in your Dropbox app or Google client must match the one on the Connections screen exactly, including https and with no extra slash at the end. Copy it again with the Copy button.

Google disconnects after a week

Your Google app is still in "Testing". Open Audience in Google Auth Platform, click Publish app, then click Reconnect Google Drive.

Dropbox says "missing scope"

Tick the four permissions in your Dropbox app's Permissions tab, click Submit, then click Reconnect Dropbox.

New files do not show

Click Settings → Clear cache now, or lower the cache time.

Uploads fail for large files

Your server limits upload size. Settings shows the limit. Ask your host to raise upload_max_filesize and post_max_size.

"This page is out of date. Please reload it."

This happens when a page cache serves a very old copy of the page. Exclude pages with uploads or private folders from your caching plugin.

The module shows "not connected" to admins only

Visitors see nothing until a cloud service is connected, or Demo Mode is on. The message is only shown to administrators.

Updating and removing

To update: go to Plugins → Add New Plugin → Upload Plugin, choose the new zip and click Replace current with uploaded. Your settings and connections are kept.

To remove: deactivate and delete the plugin. Settings are kept in case you reinstall, unless you tick Settings → Uninstall → Delete all CloudDeck settings first. Files in Dropbox and Google Drive are never deleted.