Embedding Assets with Smart CDN

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.

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.

1. Click into an Asset.
2. Select the Embed tab. (if you don't see that option please contact support@brandfolder.com to enable that on your account).
3. 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 which will update based off of 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. To enable custom presets that will show up in the embed tab, follow the directions for setting a custom preset in the Cropping Knowledge Base article. 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. 

 

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 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.

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.

 

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.