How to include the images that are referred from inside a third party css?

[cool]

I am using a jQuery plugin module named jstree.js which I included in the "modules" section of the plugin.json.

Now the jstree has a css file which I can include under the "css" or "less" section of the plugin.json. And the NodeBB engine will minifiy and include its contents in the stylesheet.css. So far so good!

But this css file refers to certain images (files) and expect that they should reside in the same folder as stylesheet.css. But the build process doesn't copy the images folder at the same level where it copies the stylesheet.css.

How can I overcome this issue. A proper solution from you guys will be highly appreciated.

Thanks and Regards

[julian]

Hi @cool -- if the css is referencing images in the stylesheet, they're likely via a relative path, relative to the public folder.

In your plugin, if you define a static directory, then those files can become accessible.

e.g. package.json

...
	"staticDirs": {
		"static": "./static"
	},
...

Then put your images in static in the root of your plugin.

via css, you can reference files served via that static directory as follows:

background-image: url(./plugins/nodebb-plugin-myplugin/static/myimage.png);

[cool]

Hi @julian

Thank you for your reply. What I comprehended from your post above is to do something like this ...

staticDirs: {
    "jstree-static": "static/lib/jstree/dist/themes/proton"
}

This setting will map the route

localhost/plugin/nodebb-plugin-map/jstree-static

TO

.../nodebb/node_modules/nodebb-plugin-map/static/lib/jstree/dist/themes/proton

In the style.css, modify all the occurrences of the image files like this:

background:url(throbber.gif)

TO

background:url(./plugin/nodebb-plugin-map/jstree-static/throbber.gif)

I made a total of 46 modification in the style.css which I actually did not want to because this is a third-party stylesheet and when they come with a new version, I will have to make the modifications again.

And, this attempt to solve the problem didn't succeed. I might have taken the wrong direction. If yes, could you pl. modify my configuration code and make it work?

Probably, the last alternative is to copy the image files in the build/public folder which means at the same level as the resulting stylesheet.css file.

Thanks

[julian]

Use of the static directory is one method, and it is unfortunate that the css file has to be modified, but it is necessary.

With regard to the first solution -- can you access the css file directly via browser? (i.e. localhost/plugins/nodebb-plugin-map/jstree-static/whatever.css) Keep in mind I typed in plugins, plural, whereas you have plugin, singular... perhaps that is significant?

A potential other solution could be placing the entirety of jstree in a static directory, and then hooking into filter:meta.getLinkTags to inject the css file. I don't actually know if that will work.

[cool]

Thank you for the reply. @julian I will try this hook "filter:meta.getLinkTags" and let you know.

[cool]

@julian said in How to include the images that are referred from inside a third party css?:

access the css file directly via browser? (i.e. localhost/plugins/nodebb-plugin-map/jstree-static/whatever.css)

The file is not accessible.

[PitaJ]

@cool what is your plugin.json

[cool]

Hi @PitaJ

I have taken the other path.. abandoned the jstree library and chosen the jqgrid instead. It is because jstree doesn't address certain requirements of mine.

Unlike jstree, the jqgrid css has no associated images. But it has few other challenges which I am trying to resolve .. they are outside the NodeBB's scope. If I am not able to fix them, I will ask the NodeBB community to help me out.

Thank you all for your kind cooperation.

[cool]

I have two plugins and both will use the jqgrid. How can I address this requirement.. I am wondering. Now a reference to the jqgrid will appear in two different plugin.json files.

What implication will it have? Will it be loaded twice? In fact, it is a huge library with several other dependencies.

[PitaJ]

That's a good question. If it's in the modules section in plugin.json then it will only be loaded once.

[cool]

Ok fine. I have another question ...

plugin.json

	"modules": {
		"jqueryui.js": "static/lib/jqgrid/js/jquery-ui.min.js",
		"jqgrid.js": "static/lib/jqgrid/js/trirand/src/jquery.jqGrid.js",
		"jqgrid.locale.js": "static/lib/jqgrid/js/trirand/i18n/grid.locale-en.js"
	},

requirejs is expecting a runtime path to these modules. What shall I write over here.. something like assets/...

requirejs.config({
	paths: {
		jqueryui: "assets/jqueryui",
		jqgridlocale: "assets/jqgrid.locale",
		jqgrid: "assets/jqgrid"
...
``

Still not working

[PitaJ]

You don't need to set up the paths yourself, NodeBB automatically handles that when you run ./nodebb build.

You can require them directly like: require(['jqgrid', 'jqgrid.locale'], function () { ... })

[cool]

@PitaJ
The problem is that jqgrid should be loaded only after the jqueryui and jqgrid.locale are loaded. This thing is stated here: https://stackoverflow.com/questions/15728329/requirejs-jquery-multiple-dependent-non-module-jquery-plugins-like-jquery-ui-and

If we go with this and a few other solutions, we need to configure the paths and shim objects of requirejs.

So far I have not been successful in accessing the jqgrid from NodeBB. What do you suggest? Could you pl. try it locally and find out the answer? Can you suggest any other alternative?

Thanks

[PitaJ]

Did you try it like this?

requirejs.config({
  shim: {
    jquery: {
      exports: '$',
    },
    jqueryui: {
      exports: '$',
    },
    jqgrid: {
        deps: ['jqueryui' ,'jqgrid.locale'],
    },
    'jqgrid.locale': {
        deps: ['jqueryui'],
    },
  },
});

require(['jqgrid'], function () { ... });

[cool]

@PitaJ Hi

Just tried this but same error: Uncaught TypeError: $(...).jqgrid is not a function

Note that the 'jqgrid.locale' key/property is a string while other properties are not. Why so?

I think an element of the deps array should be a property of the 'path' object.

Any other solution?

Thank you for helping me out.

[PitaJ]

Can you confirm that jqgrid.js exists in nodebb/build/public/src/modules?

[cool]

It exists in nodebb/build/public/src/modules and not in nodebb/build/public/assets/src/modules There is no folder by the name assets.

My another third-party module (geocomplete which is working) resides in the same folder as jqgrid, jqquery-ui etc. i.e. nodebb/build/public/assets/src/modules

[PitaJ]

Yeah that's what I meant. Can you share all of the exact code you're using?

[cool]

plugin.json

"modules": {
	"jquery.geocomplete.js": "static/lib/geocomplete/jquery.geocomplete.min.js",
	"jqueryui.js": "static/lib/jqgrid/js/jquery-ui.min.js",
	"jqgrid.locale.js": "static/lib/jqgrid/js/trirand/i18n/grid.locale-en.js",
	"jqgrid.js": "static/lib/jqgrid/js/trirand/src/jquery.jqGrid.js"
},
"less": [
	"mydetails.less"
],
"css": [
	"static/lib/jqgrid/css/trirand/ui.jqgrid-bootstrap.css"
],
"scripts": [
	"mydetails.js"
],

mydetails.js

requirejs.config({
	waitSeconds: 30,
	paths: {
		jqueryui: "assets/src/modules/jqueryui",
		jqgridlocale: "assets/src/modules/jqgrid.locale",
		jqgrid: "assets/src/modules/jqgrid"
	},
	shim: {
		jquery: {
			exports: '$'
		},
		jqueryui: {
			deps: ["jquery"]
		},
		jqgridlocale: {
			deps: ['jqueryui']
		},
		jqgrid: {
			deps: ['jqueryui','jqgridlocale']
		}
	}
});

requirejs(["jquery.geocomplete", "jqgrid"], function(geocomplete, jqgrid) {
    $("#details-grid").jqgrid({ 
      ... 

[PitaJ]

Don't specify paths in the require config