One Folder Gallery for OneDrive

Description

One Folder Gallery for OneDrive shows the photos from a single, isolated folder in your Microsoft OneDrive on your WordPress site.

What matters here is what the plugin cannot do. Microsoft gives it a key to one folder, the one it makes for this plugin, and to nothing else. Your documents and your other photos stay out of reach, and a mistake in my code cannot widen that. You do not have to take my word for it either: Microsoft lists on the sign-in screen exactly what it is handing over, before you agree to anything.

How it works

Your photos stay in your own OneDrive, in one folder Microsoft makes for this plugin and keeps apart from everything else. Every subfolder in it is an album. The subfolder’s name is the title your visitors see:

Apps/One Folder Gallery/
    Trip to Lisbon/          <- an album
        DSC_0001.jpg
        DSC_0002.jpg
    The garden in June/      <- another album
        rose.jpg
    loose-photo.jpg          <- not shown, it is not in an album

So you run your galleries from OneDrive. New subfolder, new album. Rename it and the title follows. New photos show up within a few minutes, or at once if you press Refresh now.

In WordPress there are two moments. Once, you connect your account by typing a short code on Microsoft’s sign-in page. After that you drop the gallery block on a page and pick an album. No app registration, no client secret.

Step by step: see Installation below.

Order

• Albums are listed by name.
• Photos are listed by the date they were taken. Screenshots, logos and anything else that never came out of a camera have no such date, so those fall back to the file name.

Numbers count as numbers, so photo 2 comes before photo 10. No need to pad names with zeroes.

Block editor

Add the One Folder Gallery block (under Media, or search for “onedrive”). Its sidebar lists the albums in your OneDrive folder, so you can pick one without copying an id from anywhere, and set the layout and the number of columns. Choose All albums to let visitors pick an album themselves.

The block previews the real gallery while you edit, and the editor’s own Advanced panel, alignment and spacing controls apply to it like to any other block. An existing [one_folder_gallery] shortcode can be converted into the block.

Shortcodes

The shortcode stays available for the classic editor, widgets and page builders.

• [one_folder_gallery] lists every album. The photos load when a visitor clicks one.
• [one_folder_gallery folder_id="..."] shows the photos of one album.
• [one_folder_gallery folder_id="..." cols="4"] sets the number of columns, 1 to 6.
• [one_folder_gallery class="before-after"] adds your own class, so you can style this one gallery on its own.
• [one_folder_gallery layout="justified"] picks a layout: grid, justified or masonry.

The classic editor has a Choose OneDrive folder button that browses your albums and inserts the shortcode for you.

Layouts

Three layouts ship with the plugin. Pick one in the block sidebar, or with the layout attribute on the shortcode. None of them uses JavaScript to position anything, so the gallery does not shift around while the photos load.

• Grid: equal tiles in a fixed number of columns. Photos are cropped to the same shape. This is the default.
• Justified rows: rows of equal height in which every photo keeps its own proportions, the way a contact sheet reads. There is no column count: how many photos fit in a row depends on their shapes and the width available.
• Masonry: columns of uneven photos that slot together, and nothing is cropped at all. One thing to know: the photos fill each column downwards, so they are read from top to bottom in the first column, then top to bottom in the second, rather than left to right across the page. If the order of your photos means something, as in a before-and-after, choose grid or justified rows instead.

Justified rows and masonry only come into their own when your photos have different shapes. If everything in the album is the same size, all three layouts look much the same.

The height of a justified row is 220 pixels by default, and 150 on a phone. You can change that with --onefg-row-height; see Matching your theme below.

Matching your theme

This part is for whoever writes the CSS on your site; hand it to them if that is not you. The gallery ships deliberately plain and takes its colours, fonts, shapes and spacing from CSS custom properties, so it can be made to match your site without fighting the plugin’s own styling. Set the properties you want in your theme’s custom CSS, on :root for every gallery on the site, or on a class you gave one gallery:

:root {
    --onefg-album-min: 240px;
    --onefg-album-gap: 24px;
    --onefg-album-radius: 20px;
    --onefg-album-ratio: 4 / 3;
    --onefg-album-card-bg: #fff;
    --onefg-album-card-padding: 12px;
    --onefg-album-card-radius: 20px;
    --onefg-album-card-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    --onefg-album-name-family: "Anton", sans-serif;
    --onefg-photo-radius: 12px;
    --onefg-gap: 16px;
    --onefg-row-height: 260px;
    --onefg-spinner-color: #c1614a;
}

There are around fifty of these, covering the album tiles, the photo grid, the loading spinner, the messages and the lightbox. I wrote the full list with every default into the comment at the top of assets/style.css, so it cannot drift from the code.

Two are worth knowing about up front: --onefg-photo-ratio and --onefg-album-ratio take any shape, so your photos do not have to be square, and --onefg-photo-fit: contain shows whole photos instead of cropping them to fill the tile.

One exception. I build the lightbox once and hang it at the end of the page, never inside the photo grid, so that reloading the grid cannot break it. The cost is that its properties, such as --onefg-lightbox-bg, only work site-wide and not on one gallery’s class.

The gallery also respects the visitor’s reduce motion setting: the hover zoom and the loading shimmer stop, and the spinner slows down.

Developers who want to add a layout of their own to the block’s Layout dropdown will find the one filter the plugin offers documented in the source repository.

Important: everything in the app folder can become public

[one_folder_gallery] without a folder lists **every** album in the app folder, and anyone visiting that page can open them. Only put photos in the app folder that you are comfortable showing publicly. The plugin does not add password protection or per-album access control.

Photos stay in OneDrive

Nothing is copied to your web server. Visitors’ browsers load the images directly from Microsoft’s servers, which is also why Microsoft sees your visitors’ IP addresses. See the Privacy section below.

Work and school accounts

Personal Microsoft accounts work out of the box. For a Microsoft 365 work or school account it depends on how your organisation is configured. Three things can get in the way:

• The publisher is not verified. Microsoft warns about this on the sign-in screen. Some organisations refuse such applications outright.
• Approval is required. Many organisations let only an administrator approve a new application. It is approved once, then everyone can use it.
• Code sign-in is blocked. Some organisations do not allow this way of signing in at all.

Two ways out, whichever it is. Ask your administrator to approve the application. Or make your own app in Microsoft Entra with public client flows enabled, and paste its Application (client) ID under Advanced in the settings. Neither needs a client secret.

How this plugin was made

This plugin and this readme were made with AI help. I read it all, tested it, and decided what shipped, so the mistakes are mine. Tell me about them on the support forum.

External services

This plugin connects to the Microsoft Graph API, operated by Microsoft, to sign you in and to read the contents of one OneDrive folder. Without this connection the plugin has nothing to show.

What is sent, and when:

• When an administrator connects an account: the plugin’s application id and the requested permissions are sent to login.microsoftonline.com to start the sign-in, and again to obtain and later renew the access token. This happens when the administrator clicks Connect, and afterwards roughly twice a day in the background to keep the connection alive.
• When a gallery page is viewed: the plugin asks graph.microsoft.com for the names of the folders and for the file names and thumbnail links inside the folder being shown, using the stored access token. Results are cached for a few minutes, so this does not happen on every page view.
• When a visitor loads a page with a gallery: the visitor’s own browser requests the image files directly from Microsoft’s servers. Microsoft therefore receives the visitor’s IP address, the time of the request, and technical details such as the browser being used. This is a direct request from the visitor to Microsoft; it does not pass through this website.

No photos, visitor details, page content or site data are sent to any other third party, and the plugin author does not operate any server involved in this.

Microsoft’s terms and privacy policy apply to this data:

• Microsoft Services Agreement: https://www.microsoft.com/servicesagreement
• Microsoft Privacy Statement: https://privacy.microsoft.com/privacystatement

Privacy

The plugin stores an access token and a refresh token for the connected Microsoft account. They are scrambled before they are stored in the WordPress database, with a key made from your site’s own secret keys, so reading the database alone gets you nothing. The scrambling is done by sodium, the encryption library built into PHP. They are never sent to the browser and never leave your server except to Microsoft, to renew the connection.

The plugin sets no cookies and stores nothing about visitors.

Because visitors load images straight from Microsoft, their IP addresses reach Microsoft. If your site serves visitors in a jurisdiction with disclosure requirements, mention this in your privacy policy. The plugin adds suggested wording to Settings → Privacy → Privacy Policy Guide that you can copy.

If you use the application bundled with the plugin rather than your own, the plugin author is the owner of that Azure application registration and can see sign-in telemetry for it in the Azure portal: which accounts signed in and when. The author cannot see your files, your photos or your site’s visitors.

Deleting the plugin removes the stored tokens, settings and cached data from your database. Disconnecting removes the token and clears the cache but keeps your settings.