How can I add images to a MediaWiki extension in a way that they can be referenced by css files registered as ResourceModules
?
I'm developing a MediaWiki extension which leverages a third party tool and I'm including a copy of that tool as part of the extension's resources.
The tool has js and css, which I am including like so:
...
"ResourceModules": {
"ext.leaflet": {
"scripts": "ext.leaflet/leaflet.js",
"styles": "ext.leaflet/leaflet.css"
}
},
...
The third party tool also includes an image directory which includes various images referenced by leaflet.css
, but I don't know where to put that in a way that MediaWiki will serve it alongside the CSS / JS.
The image url is resolving to {SERVER}/ext.leaflet/images/marker-icon.png
You can put the image assets in an image folder in your extension folder, and reference it in your CSS in a relative fashion.
Take a look at the Echo extension for example:
The image is referenced like this in the css
background-image: url( ../../images/pending.gif );
https://github.com/wikimedia/mediawiki-extensions-Echo/search?q=pending.gif
And stored here:
{SERVER}/extensions/Echo/images
https://github.com/wikimedia/mediawiki-extensions-Echo/tree/master/images
The CSS is registered as ResourceModule
on this line
In your JS you could use mw.config.get('wgExtensionAssetsPath')
in my case this returns /extensions