You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
Re: Embedded Folder -Grid View Using AnchorTags
Hi Greg-DB
Is there a way I could enter this into a CMS source block (using eg Webflow)?
How do I go about creating an element that the javascript will source?
Will I be able to embed multiple folders using multiple scripts?
Eg. source code:
<div class=".embed"></div>
<script>var options = {
// Shared link to Dropbox file
link: "https://www.dropbox.com/scl/fo/pyx9b32plmfkwd1et2h0t/ABZMI8Ao8r-m3EzlfbxT0QM?rlkey=2bjry6s2mwiblayinivy4tvd5&dl=0",
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: "grid", // or "list"
headerSize: "small" // or "normal"
}
}
Dropbox.embed(options, element);</script>
But I fear I'm not getting a part of the equation, as it's not working yet.
What I did seem to get working, is adding this to the anchor element
data-folder-view="grid"
data-folder-headerSize="small"
See my test page below
Thanks for your help!
- Greg-DB
Dropbox Staff
Shivadas I can't offer specific guidance for a third party CMS or platform in particular such as Webflow, as that's not made by Dropbox, but in general, here's a basic way of creating a div element in HTML and then retrieving it in Javascript:
<div id="container"></div>var element = document.getElementById("container");Of course, exactly how you work with HTML/JavaScript like this isn't specific to Dropbox and is up to you, and may vary depending on how your platform works. You may need to refer to your platform's documentation, or general HTML/JavaScript guides and documentation for more information.
As for the Dropbox Embedder itself, it does support having multiple embeds on the same page (e.g., see the linked documentation page as an example), but note that you should only need to load the
<script>tag itself once per page.By the way, note that the "data-folder-" option attributes are not officially documented, and so they should not be considered officially supported and are subject to change/break without notice. To set those options, please use the JavaScript options.
Greg-DB thanks for getting back to me so quickly.
In your example you use "ID" which is unique. Do I need to then add a var element in the script per element in the html?
I guess essentially the question is: not taking webflow into consideration, on a normal html page, how would I set up 3 folders? In the dropbox documentation, the link needs to be specified in the script
"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."
But how do I use the javascript method if I, say, want to have two elements:
<div class="dropbox-embed">folder one with dropbox.com/folder-one as shared link</div> <div class="dropbox-embed">folder two with dropbox.com/folder-two as shared link</div>How do I set it up so the javascript documented in dropbox documentaiton picks up on it?
Thanks a lot! I'm not very experienced with Javascript, but don't find much documentation on this yet online elsewhere
- Greg-DB
Shivadas The element you pass in to the Dropbox.embed method is where you want to have the embed placed. The element you select for any given embed is up to you. You can use the same element for multiple embeds, or you can use different ones.
If you want to create multiple embeds, you should call Dropbox.embed multiple times; once per embed. Each call should be given an options object containing the relevant link for that one.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
