mediawikimediawiki-extensions

How can I use an image resource referenced by a MediaWiki extension's CSS?


The Question

How can I add images to a MediaWiki extension in a way that they can be referenced by css files registered as ResourceModules?

The Situation

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


Solution

  • 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

    https://github.com/wikimedia/mediawiki-extensions-Echo/blob/97771e3369b7949db242f72551ac6efe803881e5/extension.json#L460

    In your JS you could use mw.config.get('wgExtensionAssetsPath') in my case this returns /extensions