New Feature: Support for relative file path references

Highlighted
Community Manager

What is happening?

The HubSpot CMS now supports relative path references for HTML, CSS and JavaScript files, in addition to Modules. This allows developers to reference files based on where they live in a project. 

 

Relative paths should always begin with a period ".", to denote they are not absolute paths, which should always begin with a slash "/".

 

Relative references support the ".." and "." delimiters in paths. Use ".." to go up a level in a project, and "." to stay in the current level of a project. 

 

Example usage:

<!-- From base.html in templates, relative file path of absolute /cms-project/styles/styles.css -->

{% import '../styles/styles.css' %}

<!-- From base.html in templates, relative file path of absolute /cms-project/templates/partials/footer.html -->

{% import './partials/footer.html' %}

<!-- From base.html in templates, relative file path of absolute /cms-project/modules/my_module -->

{% module "My Module" path="../modules/my_module" %}

Relative Paths Examples

As a best practice, all absolute paths should begin with a slash. If they do not, the Design Manager will throw a warning. 

 

When is this happening?

This feature is live now.

 

If you have any questions, join the discussion here. 

 

0 replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines