HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to include an external css or js file?

I need to add a css and js file to the pages that does not reside in the forum's directory. This is how my folder structure looks like

/css/library.min.css
/js/library.min.js
/forums/                  ** vanilla root directory **
/index.html              ** rest of the site **

I've tried to create a custom function to include the file but the relative linking is not working write. For example from mydomain.com/forums/ the link to css would be ../css/library.min.css and if I'm on a thread mydomain.com/forums/discussion/2/test the correct link would be ../../../../css/library.min.css. I tried to put absolute paths but that doesn't work on localhost since chrome block local resources.

How do I do it?

Tagged:

Best Answer

  • R_JR_J Ex-Fanboy Munich Admin
    Answer ✓

    I don't think I understand the problem, but I also don't think that this is needed to give you an answer which might help =)

    Vanilla has a helper function called url. Using url('../css/library.min.css') will most probably give you /forum/../css/library.min.css and url('../css/library.min.css', true) will result in http://yourhomepage.net/forum/../css/library.min.css

    There is a Smarty equivalent. Try {'/../css/library.min.css'|asset_url:true} and {'/../css/library.min.css'|asset_url}.

    But if you always need "../", you have to find a solution on your own. I think you would have to write a Smarty function which parses Gdn::Controller()->SelfUrl and replaces everything between the slashes. I would advice something like $slashes = explode('/', Gdn::Controller()->SelfUrl) and implode('..', $slashes)

Answers

  • R_JR_J Ex-Fanboy Munich Admin
    Answer ✓

    I don't think I understand the problem, but I also don't think that this is needed to give you an answer which might help =)

    Vanilla has a helper function called url. Using url('../css/library.min.css') will most probably give you /forum/../css/library.min.css and url('../css/library.min.css', true) will result in http://yourhomepage.net/forum/../css/library.min.css

    There is a Smarty equivalent. Try {'/../css/library.min.css'|asset_url:true} and {'/../css/library.min.css'|asset_url}.

    But if you always need "../", you have to find a solution on your own. I think you would have to write a Smarty function which parses Gdn::Controller()->SelfUrl and replaces everything between the slashes. I would advice something like $slashes = explode('/', Gdn::Controller()->SelfUrl) and implode('..', $slashes)

  • use

    $sender->Head->addCss( [absolute url] );
    

    grep is your friend.

  • using dot syntax for you url scheme sucks.

    Not sure why you are using so many external resources, but define some constants or config values. External resources could be moved anywhere.

    grep is your friend.

  • R_J saves the day once again. Thanks man.

    X00 can you describe your solution? How would you use constants for this situation? I'm just curious.

Sign In or Register to comment.