XF 2.0 Including external library (js and css)

CMTV

Well-known member
How to include external library (js and css files) in specific template that requires jQuery?

I tried this code in template forum_view:
HTML:
<xf:head option="questionthreads_iconpicker">
    <!-- Iconpicker styles -->
    <link rel="stylesheet" href="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/css/jquery.fonticonpicker.min.css') }}">
    <link rel="stylesheet" href="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/css/jquery.fonticonpicker.grey.min.css') }}">

    <!-- Iconpicker -->
    <script src="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/jquery.fonticonpicker.min.js') }}"></script>
</xf:head>

But I am getting an error: jQuery is not defined.

This happens because jQuery is loaded at page footer (helper_js_global template).

How to load external library files after jQuery?
 
Last edited:

Chris D

XenForo developer
Staff member
You can't serve public files from anywhere inside the src directory unfortunately.

You would need to add these files to something like: js/questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js.

You would then use the XF JS loader rather than your current approach. If the file is in the above location it would be as follows:
HTML:
<xf:js src="questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js" />

For the CSS, forget about calling them as files. Copy and paste them into new templates and call as follows:
HTML:
<xf:css src="questionthreads_fonticonpicker.css" />
<xf:css src="questionthreads_fonticonpicker_grey.css" />
 

Jake B.

Well-known member
You can include the files in src/AddOn/Id/_files/js/questionthreads/vendor/jquery.fonticonpicker.min.js and load it with the xf:js tag using the addon="AddOn/Id" tag, and then include that file in your build.json to keep your add-on (for the most part) contained within a single directory for develompent :)
 

CMTV

Well-known member
@Jake B.
I have added jquery.fonticonpicker.min.js to src/QuestionThreads/_files/js/questionthreads/vendor/ and trying to load it:
HTML:
<xf:js src="questionthreads/vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />

But xF can't find this file (404). And it is trying to find it in root js directory: http://questionthreads.addon/js/questionthreads/vendor/jquery.fonticonpicker.min.js

Obviously, my file is not there...
 
Last edited:

CMTV

Well-known member
You would need to add these files to something like: js/questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js.
Are you talking about xF root js directory? If so do I need to remove library files programmatically when uninstalling addon?
 

Jake B.

Well-known member
@Jake B.
I have added jquery.fonticonpicker.min.js to src/QuestionThreads/_files/js/questionthreads/vendor/ and trying to load it:
PHP:
<xf:js src="questionthreads/vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />

But xF can't find this file (404). And it is trying to find it in root js directory: http://questionthreads.addon/js/questionthreads/vendor/jquery.fonticonpicker.min.js

Obviously, my file is not there...

Do you have xf debug and development mode enabled, I think you'll also need to add $config['development']['fullJs'] = true;
 

Jumuro

Well-known member
If so do I need to remove library files programmatically when uninstalling addon?
If you delete the addon from the admin panel files in any case are not deleted physically.
So, You need to remove them manually always.
 

CMTV

Well-known member
@Jake B.
Yes the problem was in missing fullJs property in config.

By the way. I placed my .js file in this path: src/addons/ADDON_ID/_files/js/.
So I can now load it with this simple code:
HTML:
<xf:js src="vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />
<xf:js src="test.js" addon="QuestionThreads" />
I this case you can keep all your dev resources in one directory.

The last question. Will this approach with placing lilbrary files within src work in production? Those forums might not have fullJs enabled in config...
 
Last edited:

CMTV

Well-known member
You shouldn't place any public files in "src", put it in "js"
Why shouldn't? I think it is be better to keep all files related to addon within addon directory. Otherwise we will have a lot of files spread all over xF directories which will create some difficulties with managing files. Moreover it is harder to remove such addons.
 
Last edited:

Mike

XenForo developer
Staff member
  1. The src directory is not directly web accessible (this may require some web server config, but the default will block access in Apache).
  2. Putting JS files anywhere outside the js directory means that they won't respect CDN options.
  3. Similarly, it prevents people setting different options for the js directory in the web server, including far future expires and automated compression.
Since you're using _files, our add-on build tools will handle putting the JS in the correct location when the add-on zip is built.
 

robdog

Well-known member
Do you have to put CSS files for plugins into templates? I would rather do the less processing on my own within my Sublime Text environment and just include the compiles CSS into a tag without the CSS having to be a template.

Is this possible?
 

Arty

Well-known member
Sure, you can include it in <head> section, but that would mean including multiple css files. There is no reason to do that when stylesheets can be combined into one compressed stylesheet using XenForo template engine.

Another downside is you can't use style properties in external stylesheets, which means your css might not follow style layout. Wouldn't you rather change your add-on code to match currently used style?
 

CMTV

Well-known member
Hi @Mike @Chris D . How to attach JS while build releases? I have run
Code:
xf-addon:build-release
But some custom JS not included yet.
Yes I am intersted in it too. For now I just copy js and fonts folders in compressed zip. But it would be really cool to automatically copy all new files and directories with build-release command.
 
Top