Multimedia


Since you have full access to the front-end code, you can embed any external images, videos, audios, etc.

Beyond external sources, we have partnered with Cloudinary to provide on-demand cloud-hosting of your multimedia. When you are coding a site, you will find a built in multimedia library.

Sitecast Multimedia

To connect Cloudinary, follow the Add-On instructions to copy/paste your API keys.

Once your Cloudinary account is connected you can upload and access your assets directly from the editor. Also, you are able to add images to your Resources to optimize your pages.

Cloudinary has an amazing API which you can learn about here.

Quickstart Demo

Be sure the following scripts are in your sitecast.config.yml file:

external_scripts:   
- npm/[email protected]   
- npm/[email protected]   

Include the following in your main.js file:

$.cloudinary.config({cloud_name: "{{ integrations.cloudinary.client_id }}"});   

Lazy Loading Images

When your visitor initially requests your web page, the least amount of files sent on initial page load, the better. To accomplish this, we can get clever with data-attributes and a small blank image.

Here's how it works:

  • Be sure the above Cloudinary JS is installed into your site.
  • Configure the Cloudinary add-on and upload an image to your multimedia library.
  • Create an img tag anywhere you want and add /blank.png as the src.
  • Include the Cloudinary image ID as a data-src attribute.
  • Add the cloudinaryDynamicImage class to the image tag.
  • All set, your images are set up to lazy load!

To initialize Cloudinary JS on the images you want lazy loaded, use this line of code:

$(".cloudinaryDynamicImage").cloudinary();

Once you have the lazy loading for the image set up, you can use Cloudinary's full image manipulation API through data attributes.

For instance, here is how you would create a 1600x900 image cropped and focused on faces:

<img class="cloudinaryDynamicImage" src="/blank.png" data-src="v123456789/happy-people.jpg" data-width="1600" data-height="900" data-html-width="100%" data-html-height="auto" data-crop="fill" data-gravity="faces" alt="Happy People">

Helpful External Media Sources