Assets

 Last Edited: Jul 02, 2019

Assets are stored directly on an Amazon Web Services (AWS) server, separate to the website you are building on. They can be accessed using a Content Delivery Network (CDN) from your website.

The use of this method offers automatic Caching control, which decreases the likelihood that someone views your website with anything other than the most up-to-date versions of your files. The CDN also reduces page load times, as the assets are not stored on your site, but instead are distributed to over 100 edge locations around the world.

If you have uploaded an image to the images folder using File Manager, it will have a file path like this on your site:
images/SG-Logo-White.svg

You would add the following liquid to your page, so that the server automatically appends the CDN URL:
{{ 'images/SG-Logo-White.svg' | asset_url }}

You will see that the asset will render on the page with a similar path to this:
https://uploads.prod01.oregon.platform-os.com/instances/283/assets/images/SG-Logo-White.svg?updated=1549914206

Each site has a unique CDN path, you can find out what yours is by rendering an image on the page and inspecting on it. ?updated= is a parameter automatically included that time stamps your files, helping with cache control. If you manually include the full URL as above, remove the cache control from the end, unless you would like to only display that version.

Examples:

HTML - Stylesheets:

<link rel="stylesheet" type="text/css" href="{{ 'css/styles.css' | asset_url }}" />

HTML - JavaScript files:

<link rel="stylesheet" type="text/css" href="{{ 'js/myfile.js' | asset_url }}" />

HTML - Images:

{{ 'images/SG-Logo-White.svg' | asset_url }}

WebApp Asset Field:

{{ this['my_field'] | asset_url }}

CSS - Images:

Using ../ automatically appends the URL to your asset within CSS files:
background-image: url('../images/SG-Logo-White.svg');

../ is relative to the location of your stylesheet. You can look up css relative paths online for more information.