Linking to static assets from nested sub directories

[bradstrong]

Is there a recommended best practice for creating relative links to fixed paths from subdirectories generated by a permalinks structure? I believe I have a pretty common use case - I would like all pages to link to the js/css/img assets located within my dist/asset directory.

[jonschlinkert]

Can you give me some actual examples? I'm struggling to wrap my brain around the specifics of what you want to do. In other words, how would this be different from using the {{assets}} helper? or the {{relative}} helper?

[AndersDJohnson]

@bradstrong If you're familiar with the {{relative}} helper, it should work the same way, since permalinks replaces the page.dest property. For example:

{{relative page.dest "/path/to/your/assets"}}

[doowb]

Usually you could use {{assets}} but if the page.dest changed, then the assets need to be recalculated. I think using the relative helper like @adjohnson916 might work as a work around.

[AndersDJohnson]

Perhaps @bradstrong is onto something - should this plugin recalculate the {{assets}} path after overwriting page.dest?

[jonschlinkert]

@adjohnson916 that's exactly what I was thinking. yes it should. also, shouldn't you be able to do this as well?

{{relative page.dest assets}}

[bradstrong]

Sorry for the delay - I'm trying these solutions as you guys throw them out. I was using {{assets}} successfully before adding permalinks to the project. {{relative page.dest assets}} did the trick, I hadn't realized I could use the variables within the helper like that. Thank you!

[bradstrong]

Ok, now I have a slightly more complicated use case...

The solution above worked fine for a the partials I'm referencing to link to js and css files. For example, within head.hbs, I have <link href="{{relative page.dest assets}}/ico/favicon.ico'" rel="shortcut icon" type="image/x-icon" />. This is correctly rendering to <link href="../assets/ico/favicon.ico'" rel="shortcut icon" type="image/x-icon">. However, I also have a partial for calls to action (cta.hbs), which is used on multiple pages on the site. That cta is populated by json, which contain image paths. If I try to use <img src="{{relative page.dest assets}}/{{cta-img-url}}" alt="{{cta-img-alt}}"> in that file, it renders to <img src="undefined//img/cta/breast-cancer-forum-cta.png" alt="breast cancer forum logo">.

[jonschlinkert]

hmmm, try this.dest or data.dest and see what happens. also, are those paths nested within any kind of block expression? like {{with}} or {{each}} or even {{if}}?

[bradstrong]

In that instance, they are within an {{if}} expression.

[bradstrong]

Same results with this.dest and data.dest.

[jonschlinkert]

one of us will fix this, but in the meantime, fwiw I just want to try to find a solution that is usable for you. So you might as well also try ../page.dest and the same with the others... ../this.dest and ../data.dest to see if one of those works. since it's in a partial it's tough to say without seeing more of the setup

[AndersDJohnson]

@bradstrong (and @jonschlinkert as you're aware), this a well-known shortcoming of Handlebars. There are various solutions on that issue as well as elsewhere on the web.

[bradstrong]

@adjohnson916 Thanks for pointing me in the right direction. I'll take a look at those threads now.

[jonschlinkert]

this was fixed a while ago, I forgot to close this. please reopen if you're stll having issues