I have a few CSS files that I am inluding in velocity file in a Confluecne plugin. The CC file has reference to some images that are bundled in the plugin. How do I reference the context path in CSS file? Or may be I should ask how do you guys avoid having image path referenced in a CSS file.
Community moderators have prevented the ability to post new answers.
Hi Ajay,
Have a look at the [creating style sheet theme in Confluence]
What you need to do is make image as a downloadable resource. And in css you just refer the image file name. Here is section from this page.
Images in subdirectories (optional) You can put your images into a subdirectory within your theme if you want to: For example:
<!-- Images --> <resource type="download" name="filename.gif" location="images/filename.gif"/> Note that when you reference that file in your CSS, you simply use the name and not the path in the location. For this example: .selector { background-image: url("filename.gif"); }
hope this helps,
Raju
I really like this answer. If you want to not have to list out all of the images in your image folder you can use this {code} <resource type="download" name="images" location="/images"/> .selector { background-image: url("images/filename.gif"); } {code}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You can use relative paths to refer to images in your CSS file. This ensures that the image URL will resolve correctly in situations with and without a context path.
Example:
background-image: url("../../download/resources/my.plugin.key/image.png");
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
What about if it's batched mode? It looks like it might be slightly different, but I can't get the path quite right (at least not yet...)
Thanks,
Jim
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
It turns out I was able to get the images to display correctly using Raju's instructions.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Image resources aren't batched, so having batched mode on or off won't affect it.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Ajay,
You dont have to define each and every image in plugin.xml. Just declare the images folder once in atlassian-plugin.xml
<resource type="download" name="images/" location="includes/images/" />
cheers,
Raju
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks Raju. The CSS files has MANY images and I was trying to avoid defining each on of those in the plugin.xml.
Joseph, the css files is used acrosss many different folders in which case the reference path won't really work as the same class is being used by different vm file in different folder.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.