Tags for Assets
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
<link rel="stylesheet" type="text/css" href="{{ 'css/styles.css' | asset_url }}" />
=>
https://cdn.staging.oregon.platform-os.com/instances/xxxxxx/assets/css/styles.css?updated=1733383736255
<script src="{{ 'js/myfile.js' | asset_url }}"></script>
=>
https://cdn.staging.oregon.platform-os.com/instances/xxxxxx/assets/js/myfile.js?updated=1733383736255
{{ 'images/SG-Logo-White.svg' | asset_url }}
=>
https://cdn.staging.oregon.platform-os.com/instances/xxxxxx/assets/images/SG-Logo-White.svg?updated=1733383736255
After uploading an image to a WebApp file/image field using the Siteglide Admin's file manager, or using a front-end form, the actual value stored in the database will be something like the format: images/hero/hero01.jpg
which will point to a file at the location: marketplace_builder/assets/images/hero/hero01.jpg
.
{{ this['my_field'] | asset_url }}
=>
https://cdn.staging.oregon.platform-os.com/instances/xxxxxx/assets/images/hero/hero01.jpg?updated=1733383736255
Siteglide's CDN uses the "updated" parameter to prioritise fast caching of the image for better performance. The problem with the relative link from CSS is you aren't able to add that parameter dynamically, meaning you may get an older version of the image from the cache. This will not be a problem if the image is never updated, or when it is updated, its filename is changed to a new unique one.
background-image: url('../images/SG-Logo-White.svg');
The easiest way to add CSS background images reliably is actually with an inline style attribute in HTML. This is because it allows you to use the asset_url
Liquid filter:
Liquid
<div class="bg-image" style="background-image: url('{{"images/example.jpg" | asset_url}}')"></div>
Which renders to:
<div class="bg-image" style="background-image: url('https://cdn.staging.oregon.platform-os.com/instances/xxxxxx/assets/js/myfile.js?updated=1733383736255')"></div>
CSS
Other background property rules can be added as normal in CSS.
.bg-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#### Vanity URL to Asset - Slower Performance:
`{{ 'images/SG-Logo-White.svg' | asset_path }}` => `/assets/images/SG-Logo-White.svg`
Or
`/assets/images/SG-Logo-White.svg`