We're making changes to the Community, so you may have received some notifications - thanks for your patience and welcome back. Learn more here.

Forum Discussion

samuelar's avatar
samuelar
New member | Level 2
4 years ago

Embedding files on our website

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's avatar
    Rich
    Icon for Super User II rankSuper User II

    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's avatar
      samuelar
      New member | Level 2

      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's avatar
    samuelar
    New member | Level 2

    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's avatar
      tahsini
      Icon for Dropbox Staff rankDropbox Staff

      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:

      <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's avatar
        Hawkeye00
        New member | Level 2

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

        It tries to load an iframe which is blocked.