CMS Development

A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Hi all, 

 

So I have a big local CSS file. This CSS files includes lots of references to background images and such. These are all hard-coded in the file as relative paths. 

 

I have replicated the file structure inside HubSpot. However, these relative paths do not work and the images do not appear. 

 

This is a project under development so the code is changing daily, thus it is not feasible to go in and manually change the image references everytime a new CSS file is provided. 

 

Is there a way to have these relative image paths be understood by Hubspot? 

 

Thanks!

0 Upvotes
2 Accepted solutions
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun no, hubspot automatically adds the "hubfs" to the beginning of all your files. If you want the relative paths to work so you can work locally and push to the server without any hiccups, you'd want to create the hubfs folder in your local environment. If you don't need a local environment, then all you need to do in your CSS file is add the "/hubfs/" to the beginning of all your image/font urls.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@leevg there is a new HubL function for this now called "get_asset_url" which is used like so:

{{ get_asset_url("/custom/styles/style.css") }} 

View Documentation

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

16 Replies 16
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun You need to mimic HubSpot's file manager structure. Create a "hubfs" folder in the root of your site and add all your images in there. Then you can use relative urls locally and should work once it's pushed live - e.g.: "/hubfs/filename.jpg" or "/hubfs/example-folder/filename.jpg"

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Thank you very much for the reply. 

 

I have inherited this project and am just getting familiar with Hubspot. So far all I am creating are designs and web pages. How can I create a new website for my project (which is what they said they wanted)?

 

Then in this new site folder, I will follow your structure and see what happens. 

 

Currently, I am just creating new design templates and then the image is put in a folder in the file manager. 

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun Have you looked into taking the HubSpot Design training course(s)? There are a lot of materials you can dive into to get you started.

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Hi, I have looked into the courses and am comfortable navigating the editor. I'm just unsure how to create a new site where the pages should live. I did it on my personal account but am working through a company account now. 

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun Once you've built out the templates, then you should create the pages in the "Content > Site Pages" or under "Content > Landing Pages" - this is where they live if you will.

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Okay, so I have figured out how to add a new site - just added a new domain for categorization. 

 

I am still unsure what you mean by adding the hubfs folder to the root of the site though. Currently the files are added through file manager. Do you mean that I should create a hubfs folder there?

0 Upvotes
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun no, hubspot automatically adds the "hubfs" to the beginning of all your files. If you want the relative paths to work so you can work locally and push to the server without any hiccups, you'd want to create the hubfs folder in your local environment. If you don't need a local environment, then all you need to do in your CSS file is add the "/hubfs/" to the beginning of all your image/font urls.

Stefen Phelps, Community Champion, Kelp Web Developer
leevg
Member

Mapping local css urls to hubspot folders

SOLVE

Is your answer still correct? I've tried to add "/hubfs/" to the beginning of the image urls but it doesn't work.

0 Upvotes
stefen
Solution
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@leevg there is a new HubL function for this now called "get_asset_url" which is used like so:

{{ get_asset_url("/custom/styles/style.css") }} 

View Documentation

Stefen Phelps, Community Champion, Kelp Web Developer
dennisedson
HubSpot Product Team
HubSpot Product Team

Mapping local css urls to hubspot folders

SOLVE

@stefen !  You are a good man for updating this

0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

My main question is, how is the template file stored in Hubspot with reference to the files in file manager? 

 

If I have relative paths in my html file, how would I map these to how hubspot stores the files?

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun any static files that you want to reference you can just continue using the relative path. But you have to make sure to add the "/hubfs/" to the beginning of it.  If you add the "hubfs" folder to your local environment, you'll just want to make sure that that folder doesn't get uploaded to hubspot. if that makes sense

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Hello again, 

 

I created the hubfs folder and moved the static assets inside of it. Then I changed the relative links inside the html to be in the form of 

 

<img src="hubfs/img/assets/footer/flare_line_footer.png" class="footer_del">

 

However the image is still not appearing. Did I miss something? 

 

Thanks,

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun I recommend using a root relative url with the slash at the beginning like so "/hubfs/img/assets/footer/flare_line_footer.png"

 

Also, just make sure you are syncing your local "hubfs" folder to the root of the HubSpot file manager. If you're using FTP to do this then you need to sync it to "/portals/xxxxxxx-portalname/content/files/" - hope this helps!

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes
A2mun
Contributor

Mapping local css urls to hubspot folders

SOLVE

Hi, I tried it that way (adding the / at the start) but it still didn't work. 

 

I am not using ftp, I manualled recreated the local folder structure into hubspot. The files are put in: 

 

Home/ProjectA/Project Assets/

 

Are you suggesting that for the relative links to work with /hubfs/, the things in project assets need to be put directly at the Home level?

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Mapping local css urls to hubspot folders

SOLVE

@A2mun you could do that I suppose... or you could just change the root/web folder of your local server

Stefen Phelps, Community Champion, Kelp Web Developer
0 Upvotes