Skip to main content

Embedding images on a website

Images and files that are uploaded to Brandfolder are published and hosted on external Brandfolder servers. These assets are tracked by the Brandfolder system; if assets get moved, renamed, or updated within Brandfolder, any direct online links to these assets will automatically get updated. This is the preferred method of using Brandfolder assets in online applications such as websites.

When adding images or files to websites, including the university's CMS, you can embed the asset directly from Brandfolder, instead of downloading it to your computer, uploading it to the CMS, and then embedding it internally in the CMS. Embedding an asset from Brandfolder using a direct link means that your asset version will always be the most up-to-date version. Any edits made to the original file on Brandfolder will automatically be reflected on your website. It also eliminates multiple versions of the same or similar asset being uploaded to our CMS across various department folders.

Where possible, embed images and files using external links to Brandfolder, instead of uploading them to the Shared Assets website in the university's CMS.


How to

Embed an image from Brandfolder

 

  1. Login to Brandfolder.
  2. Select the image in Brandfolder.
  3. Do not download the image from Brandfolder. Instead, you can link directly to the image in Brandfolder. Embedding the image directly from Brandfolder means that your image version will always be the most up-to-date version. Any edits made to the original file on Brandfolder will automatically be reflected on your website. It also eliminates multiple versions of the same or similar image being uploaded to our CMS.
  4. Select the Embed tab.
    Select the Embed tab
  5. If available or applicable, additional versions of the image will be listed in the Attachments section. The first version will always be a thumbnail aspect ratio (3:2). Additional versions will be labelled according to their context, such as banner. Select the version you want to use.
    Image version attachments
  6. You can resize the image as required. For example, if you'd like to embed the thumbnail/default version at 300px x 200px, enter a width of 300 and a height of 200. If you're using the banner version and want to include the three sizes (small, medium, and large), enter the applicable dimensions for the web banner. Select the Copy to clipboard link to copy the URL.
    Resize an image
  7. Paste the URL into the CMS or your website where you want the image to appear. 
    • If you're adding the image to the CMS, follow the instructions for adding a banner image or inline image, but be sure to select External as the Image Source. Paste the URL in the External Image field.