Please visit Embed assets with Smart CDN in the Smartsheet Help Center. Starting December 29, 2023 the Brandfolder Knowledge Base will only live on Smartsheet Help.
With Brandfolder's Smart CDN, you can embed assets across the web and format them on-the-fly to meet your specific needs. CDN links ensure your content always reflects the most up-to-date changes made to your Brandfolder Asset.
Enabling CDN
Owners and admin can ensure CDN is enabled on their account.
- Select Settings
- Select General Settings
- Select the Advanced tab
- Ensure CDN Embed Links are Enabled.
If you do not see this option, please contact support@brandfolder.com to enable this on your account.
Important: The CDN link functionality is disabled for any assets that are pending, expired, draft, or view only. The Embed tab and Cropped CDN Link only appears when assets are approved.
How do I embed a single asset?
Embedding a single asset in your website or landing pages can make updating the assets across multiple pages easy and accessible for all users.
- Click into an Asset.
- Select the Embed tab.
- Copy and paste the URL.
CDN URL embed options:
- CDN Link - Attachment: This allows users to embed the attachment without having to worry about position. It is a direct link to the attachment and is the most optimized version of the asset. A custom set of parameters can also be added by default on all attachment URLs.
- NOTE: Must be on v2.1 of CDN in order to add default custom params to your CDN URLs.
Other options available under additional CDN Links:
- CDN Link - Asset: This allows a user to embed an attachment that will update based on the position in relation to the other attachments.
- CDN Link - Attachment (original file): This URL references the original attachment CDN URL without any predefined conversions or optimizations (params).
- CDN Link - Frame: This CDN URL option is useful for automatically resizing based on the container it is inside.
You can place this link in an image tag like <img src="link_here"> and when you update the asset, it will update the link wherever it lives. If an asset has multiple attachments, whatever attachment is in the top position will be displayed using this link.
Custom preset CDN links
Smart CDN presets automatically create 'renditions' but in an auto-focused, auto-cropped CDN link format. You can also enable custom cropping presets that will show up in the embed tab. Once a preset is enabled expand the Custom Preset CDN Links Menu. Click the copy link button next to your preset of choice and paste where you desire.
Advanced smart CDN features
Cropping assets
You can crop an image to the desired dimensions, then copy the CDN link of the cropped image.
Transformation and conversion:
You can also achieve CDN links of cropped images by adjusting the parameters on the URL.
For example, let's say you have a Smart CDN URL such as https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png.
If you want the same image with specific dimensions, simply specify that in the URL like so: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.png?width=150.
Want a JPG instead of a PNG? Just change the extension at the end of the URL: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.jpg
Need a larger version of your file? Bump up the height or width params in the URL and add &pad=true to add whitespace padding to the original image.
Note: For assets with transparency, some default browser viewers will auto-fill in a background (usually white).
Auto extension:
support
The Brandfolder CDN will allow you to use the extension of .auto on v1 or auto=webp on v2. We will automatically choose the best format for the browser that is loading the image. This includes sending images back using the WEBP format, which lowers the size of an image, without loss, and speeds the loading of the image on your site.
- v1: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua.auto
- v2: https://cdn.brandfolder.io/YUHW9ZNT/as/6skcfbkq/brandfolder_icon_aqua?auto=webp
Smart CDN allows you to link to any attachment inside your asset, not just the first one. Say your asset has multiple attachments, and you want the fourth attachment in your asset, just specify that by adding, ?position=4 to the end of your CDN URL: https://cdn.brandfolder.io/C0KGG2P6/as/pd20zo-6xxwds-g0sj9j/CDN%20Example.png?position=3.
Use any combination of the above to modify your CDN link to get your Brandfolder Attachments exactly how you need them for your use case.
Live updating:
Any time you update an Asset in Brandfolder, associated Smart CDN links embedded throughout the wild will also update to reflect those changes.
Automatic expiration:
If you expire, un-approve, or delete the asset in Brandfolder, the Smart CDN link will automatically expire as well (it may stay cached for up to 24 hours).
Contact Support@brandfolder.com to manually expire the cache if you need it to expire faster, which usually takes about 10-15 minutes for it to change across the world.Embedding video assets
Embedding video assets are slightly different than image assets. Brandfolder provides a basic iframe with our video player embedded into it. Users can control the size of the iframe as well as a number of optional parameters for videos.
Example embedded video
Example embedded code
Loop
Allows video to loop after it has finished playing.
- loop
- default: false
- options: boolean - true or false
Muted
Determines whether the sound is muted when the player loads. This is useful for when using autoplay setting due to browser autoplay restrictions.
- muted
- default: false
- options: boolean - true or false
Autoplay
Automatically play the video upon load.
- autoplay
- default: false
- options: boolean - true or false
Do Note:
Using Brandfolder to autoplay a video when a page loads is not a simple issue. This stems from browser vendors responding to user wishes to NOT have videos autoplay. The most reliable way is to set autoplay=true&muted=true since many browsers (including Chrome) will not autoplay videos with audio.
Be careful not to delete the asset when using this feature!
Additional Notes
All customers with CDN included in their account are default enabled with CDN v2.1. CDN v2.1 includes:
- Faster rendering of files via the CDN URL
- Multiple sets of parameters
- Reliable and hardened outcome of processing
- The ability to set custom parameters on all CDN URLs that will also be available when the CDN URL is requested via the API
If you have any questions on CDN or embedding assets please reach out to the support team at support@brandfolder.com