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
4 years agoNew member | Level 2
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)
- RichSuper 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.
- samuelarNew 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.
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
- 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
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
The snippet above embeds a preview of a Dropbox folder in list view:
- samuelarNew 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.
- zoom - (optional) - a string that sets the level of zoom for embedded files. May be set to the following values:
- 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
- view - (optional) - a string that sets the starting view mode for embedded folders, which may be set to one of the following values:
The snippet above embeds a preview of a Dropbox folder in list view:
- tahsiniDropbox 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>
- Hawkeye00New member | Level 2
I tried this recommendation from Tahsini but all I get is this.
It tries to load an iframe which is blocked.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
5,875 PostsLatest Activity: 21 days agoIf you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!