Referencing images from decorator or css in theme plugin

[Gino Marckx]

Hi

For a while, I have been struggling building a theme plugin based on the official Confluence documentation. I keep on finding different solutions to do the same thing, while none of them really work. Is there any good reference out there that supports building a real theme with images, different layout and differen navigation?

But my main question right now is: How to reference a plugin image in a decorator or css?

The image is defined as a resource using the information found in https://developer.atlassian.com/display/PLUGINFRAMEWORK/Adding+Plugin+and+Module+Resources

The css is correctly loaded, but the link inside the css (e.g. images/logo.png) is not changed to point to the actual image within the context of the plugin (e.g. s/en_GB/3144/5/2012/_/download/resources/plunginKey:moduleKey/images/logo.png).

I also need to find out how to correctly reference images in a decorator.

Cheers
Gino

[Joe Clark · Accepted solution]

If you want to refer to a image resource from a plugin in a CSS file, the easiest way to do it is like this:

.my-style-class
{
  background-image: url("../../download/resources/my.plugin.key:my-module-key/path/to/image.png");
}

The key things to note are:

• The "../../" handles the cases where Confluence does and does not have a context path (eg. "/confluence" or "/wiki")
• The path of the URL between the "/s" and the "/download" parts is dynamically generated to optimise the client's caching strategy, and is optional. The easiest thing to do is omit it for CSS styles.

If you want to refer to an image resource from a plugin within a decorator (a velocity template), then the approach is similar, but you can use $req.contextPath to inject the correct context path into the URL. For example:

<img src="$req.contextPath/download/resources/my.plugin.key:my-module-key/path/to/image.png">

[Alex M]

How can I access the same resource from a (Java) action?

[Guilherme Nogueira]

Thank you!!

[Gorka Puente _Appfire_]

Hi,
this worked for me:

<img src= "${webResourceHelper.getStaticResourcePrefix()}/download/resources/my.plugin.key:my-module-key/path-to-image">

[Ramishka_Dasanayaka]

Hi,

Any idea how to reference a file inside the plugin on JIRA 7.0? I have been using the contextPath/download/resources/my.plugin.key:my-module-key/path/to/file.abc approach on JIRA 5.x and 6.x but it does not seem to work on JIRA 7.0. I'm testing my plugin for compatibility issues against JIRA 7.0 EAP builds and it started giving 404 for plugin resource links with the above format.

Any idea what API change may have caused this or a workaround that can be used?

Thanks in advance.