I go a simple question. I wanted to start with building my craft template from html and changed all css and tags to to equivalent {% includeCssFile %} or {% includeJsFile %}.

The page was working but my live preview was broken. It could not load the CSS, JS and other files. So I searched this forum and found out i should use {{ siteUrl }} on my links. I changed all back to and now live preview is working.

So I'm wondering: why or when should we use this kind of include file tags?


The difference is that {% includeJsFile %} can be called in any template or template part and will add the script to the bottom of the page (as explained here).

So you could, for example, have a field that requires some JavaScript, say an image slider. You'll only need the JavaScript for that slider, not for the rest of the website, so in the template part where you set up the HTML for the slider, you also include the needed JS with {% includeJsFile %} and it will get added to the bottom of the page.

Where as with just including it in the head will load it on all pages.

It's the same for {% includeCss %}.

| improve this answer | |
  • Ok thanks! Now i got it. Good idea! Strange that my craft CMS was not working anymore when including CSS or JS. Will check that again... – elpeyotl Jul 18 '17 at 8:19
  • For clarifying. I found out why my live preview was not working when including the js files with {% includeJsFile %}. I need to put siteUrl ~ before the src. like: {% includeJsFile siteUrl ~"assets/js/select-boxes.js" %} – elpeyotl Jul 21 '17 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.