Re: Embedding files on our website

samuelar · ‎06-06-2021

When I upload a picture or video to a dropbox folder that is a subfolder sorted into days within an umbrella folder (manually - only a couple a day) - how do I automatically embed the most recent .jpg/.mp4 of any of the subfolders into the website. Purely displaying the image or video itself and not the list of what is in the folder. Many thanks (don't understand any of the API stuff so some HTML code that I can change account details within or something simple would be super appreciated)

Rich · ‎06-06-2021

@samuelar wrote:

don't understand any of the API stuff so some HTML code that I can change account details within or something simple would be super appreciated

There isn't a way to do what you want with just HTML code, and there's no way to embed your account details in any code so it connects to Dropbox. Assuming it's even possible, you'd probably need to use the API and create your own code to do what you want. There's no way to do it with the regular Dropbox functionality.

samuelar · ‎06-07-2021

Oh ok, so now im trying to use embedder in my squarespace site: REDACTED using this folder link: REDACTED PRIVACY and the code found in the support article below but it isn't working, if this isn't to be work, can you embed the folder using HTML?

Triggering the Embedder using JavaScript

Another way to use the Embedder is to embed content into a specific element using the JavaScript method Dropbox.embed(options, element). This approach can be particularly useful if you’re trying to create embedded content dynamically.

The options object must contain a link and may optionally define file settings and folder settings.

An example folder embed:

    var options = {
      // Shared link to Dropbox file
      link: "REDACTED",
      file: {
        // Sets the zoom mode for embedded files. Defaults to 'best'.
        zoom: "best" // or "fit"
      },
      folder: {
        // Sets the view mode for embedded folders. Defaults to 'list'.
        view: "list", // or "grid"
        headerSize: "normal" // or "small"
      }
    }
    Dropbox.embed(options, element);

By modifying these parameters, you can change the embedded content and the behavior of the Embedder:

link - (required) - a Dropbox shared link to the content being embedded. Changing this link will update the embedded content.
file - (optional) - a file options object used to configure embedded file behavior. May contain the following parameters:
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
  - 'best' - (default) - sets the zoom mode to best, which sets the zoom of documents to the full width of the embed container. The zoom for other file content is set to the largest dimension (height or width) of the content being embedded.
  - 'fit' - sets the zoom mode to fit, which will automatically set the file’s zoom to the largest dimension of the embedded content. For documents, this mode sets the zoom to the largest dimension of the first page.
folder - (optional) - a folder options object that contains settings to configure embedded folder behavior. May contain the following parameters:
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
  - 'list' - (default) - starts folder in list view
  - 'grid' - starts folder in grid view
- headerSize - (optional) - a string that sets the style of header to use for the embedded folder
  - 'normal' - (default) - use the default size header, ideal for medium- to large-sized containers
  - 'small' - use a smaller header, recommended for small-sized containers

The snippet above embeds a preview of a Dropbox folder in list view:

samuelar · ‎06-07-2021

im trying to use embedder in my squarespace site: REDACTED using this folder link: REDACTED and the code found in the support article below but it isn't working, if this isn't to be work, can you embed the folder using HTML? If anyone could provide the code that I can just replace links in and is fit to run that would be great. Many, many thanks

Triggering the Embedder using JavaScript

Another way to use the Embedder is to embed content into a specific element using the JavaScript method Dropbox.embed(options, element). This approach can be particularly useful if you’re trying to create embedded content dynamically.

The options object must contain a link and may optionally define file settings and folder settings.

An example folder embed:

    var options = {
      // Shared link to Dropbox file
      link: "REDACTED",
      file: {
        // Sets the zoom mode for embedded files. Defaults to 'best'.
        zoom: "best" // or "fit"
      },
      folder: {
        // Sets the view mode for embedded folders. Defaults to 'list'.
        view: "list", // or "grid"
        headerSize: "normal" // or "small"
      }
    }
    Dropbox.embed(options, element);

By modifying these parameters, you can change the embedded content and the behavior of the Embedder:

link - (required) - a Dropbox shared link to the content being embedded. Changing this link will update the embedded content.
file - (optional) - a file options object used to configure embedded file behavior. May contain the following parameters:
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
  - 'best' - (default) - sets the zoom mode to best, which sets the zoom of documents to the full width of the embed container. The zoom for other file content is set to the largest dimension (height or width) of the content being embedded.
  - 'fit' - sets the zoom mode to fit, which will automatically set the file’s zoom to the largest dimension of the embedded content. For documents, this mode sets the zoom to the largest dimension of the first page.
folder - (optional) - a folder options object that contains settings to configure embedded folder behavior. May contain the following parameters:
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
  - 'list' - (default) - starts folder in list view
  - 'grid' - starts folder in grid view
- headerSize - (optional) - a string that sets the style of header to use for the embedded folder
  - 'normal' - (default) - use the default size header, ideal for medium- to large-sized containers
  - 'small' - use a smaller header, recommended for small-sized containers

The snippet above embeds a preview of a Dropbox folder in list view:

tahsini · ‎06-08-2021

To use the embedder, you will first need to create an app via the App console. With that you'll need the App Key that is located in the app console.

From there you'll want to insert this javascript&colon;

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="[YOUR APP KEY]"></script>

Replacing [YOUR APP KEY] with the app key from your App console.

From there you can use the following html:

<a 
  href="[CONTENTS SHARED LINK]" 
  class="dropbox-embed"
></a>

Hawkeye00 · ‎01-29-2022

I tried this recommendation from Tahsini but all I get is this.

It tries to load an iframe which is blocked.

Greg-DB · ‎01-31-2022

@Hawkeye00 To use the Dropbox Embedder, make sure you've registered the domain(s) of your site(s) where you want to use it. You can find more information in the Dropbox Embedder documentation. You can register your "Chooser / Saver / Embedder domains" from your app's page on the App Console.