OneDrive Gallery

The OneDrive Gallery is a WordPress Plugin to show images directly from a private OneDrive Folder.

One day I decided to create a photo blog, because I had thousands of photos from my travels. I stored these photos on my private OneDrive account, and I did not want to create extra copies on a web server. I look around in the wordpress Plugin directory, and I had not find anything that was able to handle private OneDrive folders and not super expensive. So in the last weeks I had some free time, and developed this samll plugin for people, who wanna use their personal OneDrive as well, as the source of the photos and videos for their WordPress sites.
The Plugin is very easy to configure, and also easy to use. On the bottom of the page you can find instructions, how to setup and use it.

The Plugin is totally free, but if you like it you can donate my work, using the button below.

Happy day,

Zoltán

Donwload the PlugIn

If you want to support the development of the WordPress OneDrive Gallery Plugin, then submit your donation below.
Thank you and enjoy the WordPress OneDrive Gallery Plugin.

Setup Instructions

1) Create an app registration in Azure / Entra

  1. Open the Azure Portal (aka Entra) and go to Azure Active Directory > App registrations.
  2. Click New registration and set a descriptive Name (for example: UTD OneDrive Gallery).
  3. Supported account types: choose Accounts in any organizational directory and personal Microsoft accounts (this allows personal Microsoft accounts).
  4. Redirect URI: add a platform of type Public client (mobile & desktop) and set the redirect URI to:
    https://login.microsoftonline.com/common/oauth2/nativeclient

2) API permissions

  • Go to API permissions > Add a permission > Microsoft Graph > Delegated permissions.
  • Add: offline_access, Files.Read and User.Read.
  • For personal accounts, the user can consent during the sign-in step; admin consent is not required.

3) Obtain an authorization code (interactive, one-time)

Open the following URL in your browser (replace YOUR_CLIENT_ID):

https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=https://login.microsoftonline.com/common/oauth2/nativeclient&scope=offline_access%20Files.Read%20User.Read

Sign in with your personal Microsoft account and grant consent. Once redirected, copy the code parameter from the final URL.

4) Exchange the authorization code for a refresh token (one-time)

Now exchange the code value you copied for tokens. Run the following curl command on your machine (or use Postman). Replace the placeholders YOUR_CLIENT_ID and THE_CODE_FROM_STEP_3. If you created a confidential client and have a client_secret, include it in the request body as shown.

curl -X POST "https://login.microsoftonline.com/consumers/oauth2/v2.0/token" \
 -H "Content-Type: application/x-www-form-urlencoded" \
 -d "client_id=YOUR_CLIENT_ID&grant_type=authorization_code&code=THE_CODE_FROM_STEP_3&redirect_uri=https://login.microsoftonline.com/common/oauth2/nativeclient&scope=offline_access%20Files.Read%20User.Read"

PowerShell (Windows) alternative

If you prefer PowerShell instead of curl (Windows PowerShell 5.1 or later), run the following commands. The example posts form-encoded data and returns a JSON object; copy the refresh_token value from the response.

$body = @{
    client_id    = 'YOUR_CLIENT_ID'
    grant_type   = 'authorization_code'
    code         = 'THE_CODE_FROM_STEP_3'
    redirect_uri = 'https://login.microsoftonline.com/common/oauth2/nativeclient'
    scope        = 'offline_access Files.Read User.Read'
}

$response = Invoke-RestMethod -Method Post -Uri 'https://login.microsoftonline.com/consumers/oauth2/v2.0/token' -Body $body -ContentType 'application/x-www-form-urlencoded'

# Inspect the result and copy the refresh token
$response | ConvertTo-Json -Depth 5
Write-Host "Refresh token:`n" $response.refresh_token

# If your app is a confidential client (has a client secret), add the secret to the body before calling:
#$body.client_secret = 'YOUR_CLIENT_SECRET'
# Then call Invoke-RestMethod as above.

If you use a tenant other than consumers, change the host path accordingly (for example https://login.microsoftonline.com/<YOUR_TENANT>/oauth2/v2.0/token).

The response will be JSON and include an access_token and a refresh_token. Example (truncated):

{
    "token_type": "Bearer",
    "scope": "Files.Read User.Read openid profile offline_access",
    "expires_in": 3599,
    "ext_expires_in": 3599,
    "access_token": "ey...",
    "refresh_token": "0.AAA..."
}

Copy the full value of refresh_token and paste it into the Refresh Token textarea above, then click Save Changes. The plugin will use the refresh token to obtain access tokens as needed.

Notes & troubleshooting

To verify the token works, use the Test Microsoft Graph API button on this settings page after saving.

If you created a confidential app (with a client secret), include &client_secret=YOUR_CLIENT_SECRET in the request body.

If you receive an invalid_grant or consent error, ensure the redirect URI, client id, and scopes match the app registration and that you granted consent when signing in.

Keep the refresh token secret — treat it like a password. If the token is compromised, revoke it by clearing the field in plugin settings and rotating credentials in Azure.

ShortCode or Gutenberg Block Usage

Shortcode Usage: 

Basic usage: [onedrive_gallery folder="FOLDERNAME"]

Options:

  • folder: The OneDrive folder name or path to display. In case of subfolders always use “/” to separate the levels.
  • prop: true or false. If set, overrides the default proportional view setting.
    When prop="true", gallery shows proportional view. When prop="false", gallery uses same-size thumbnails.
  • ipr: Integer from 1 to 8. Overrides the global “Images Per Row” setting for this shortcode instance. Example: ipr="4".

Examples: 
[onedrive_gallery folder="Photos" prop="false"]
[onedrive_gallery folder="Photos/Travel/Madrid"]

You also can use Gutenberg Blocks to add the gallery to your page. the blocks has exactly the same parameters then the shortcode.