WebSite X5 Evo and Pro

Dropbox is one of the most well-known online cloud storage services. To put it simply, Dropbox offers web space where you can archive and share your files: you can create a free account, then upgrade to higher-level plans if you'd like.

Thanks to the Dropbox Gallery Object, you can insert a Gallery in your website that draws and displays images directly from a folder in Dropbox. Simply add or remove images in this folder to automatically update the Gallery, without having to do anything to your website. Plus, you can decide to share the Dropbox folder, thereby allowing other people to update the Gallery without needing to grant them access to the website itself.

Do you want to find out how the Dropbox Object works? Keep reading or watch this video:

How to set up your files in Dropbox.

First of all, you need to create an account, even a free one, with Dropbox, and upload the images you intend to use for your gallery into a folder. Once that's done, follow these steps:  

  • Log in and access your Dropbox homepage.
  • Click on the button with the three dots, located in the lower right: in the menu that opens, click on the Developer tab.
  • Now you're in the developer environment: click on the Create apps button.
  • Follow the instructions: select  Choose an API , then select the kind of access you want to make available. You can give the access to a single folder you specifically create for the app, or to all the folders and files. Finally, give your app a name, for instance MyApp and click on Create app.
  • Now you've created your app, and you can use these controls to manage the layout and view the analytics. 
  • Still on the Settings panel, you will notice the name you gave to the app is used as name for the folder used by the App (App folder name). You can edit it by clicking on Change.
  • Click on the Generate button you find under Generated access token.
  • Set No expiration as Access token expiration.
  • Select and copy the generated token.
  • Finally, open the Permission panel and activate the item, then click on Submit.

#tip. Dropbox Update - In August 2020, Dropbox introduced some big changes in the way permissions are managed for the apps (see: Now Available: Scoped apps and enhanced permissions). The update doesn't affect the apps which already exist which, as for now, don't have to be migrated to the new system.    

How to add images

Once you create the App, you can start adding the files you want to be displayed on your gallery:

  • Go to the Dropbox Homepage (don't forget to log in).
  • Open the Apps folder: you will find the sub-folder you have set when creating the App: in our example, MyApp
  • Open it and create a sub-folder, such as Images. The path will then be: Apps/MyApp/Images. 
  • Drag in the Images folder the files you want to load.

How to set up the gallery in WebSite X5.

Now that you have an access token, you can return to work in WebSite X5.

  • Insert the Dropbox Gallery Object into a page, select the Grid, and click on the  button to access the layout window.
  • Paste the access token into the indicated field.
  • Specify the path for the Dropbox folder hosting the images; for example: /Images
  • Define the Update frequency, meaning how often the Object should check the folder from which it draws images for updates.
  • Use the available design settings to define the gallery's styles and appearance.

#tip - If the Gallery doesn't work in spite of having correctly followed the reported procedure, please get in touch with your Hosting Provider and check if you have the necessary write permissions to the folders.

Can't wait to use this for your web pages? Install the Dropbox Gallery Object now

Don't have enough Credits to purchase this Object? Browse all Credit packs