Compatibility:

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.



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 the developer's Dropbox platform: https://www.dropbox.com/developers.
  • 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. 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.
  • Paste the following link in the Redirect URIs field:  https://webui.websitex5.com/dropbox-login/ Once you've copied the URL, click on the Add button next to the field.
  • Open the Permission panel and activate the files.content.read item, then click on Submit.
  • Now you can go back to the Settings panel: here you can find both the App key and the App Secret codes you need to proceed.


How to set up the gallery in WebSite X5.

Now 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.
  • Copy (CTRL+C) the App key and the App Secret from the Dropbox panel and paste them (CTRL+V) in the specific WebSite X5 fields.
  • Once you added the App key and the App Secret, a warning message will inform you that you need to get a further code to proceed: click on the Request a Refresh Token button.
  • Dropbox will open in a separate browser window: follow the procedure to get the Refresh Token.
  • Once you get the Refresh Token, copy and paste it in the corresponding WebSite X5 field. With this last step, your gallery will be connected to Dropbox.
  • 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.     


How to add images

Once you create and connect 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 and, consequently, to display the gallery.


#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