How to get web resouces images defined in a CSS file?

Question

Hello,

In an HTML dialog, if I use either of the following instructions for importing a style:

<h:outputStylesheet name="portlet/css/presential.css"/>

or

<link rel="stylesheet" href="#{resource['portlet/css/presential.css']}" type="text/css"/>

the CSS file is loaded (see line #1 below) with the request attribute "?ln=xpertivy-14-WebContent".

Unfortunately, it cannot find the images defined in the CSS (see 2 last lines). Notice that the request attribute above is not appended to the image request. alt text

This could be important because if I manually request the following URL: http://localhost:8082/ivy/faces/javax.faces.resource/portlet/images/clock24.png?ln=xpertivy-14-webContent

I can successfully get the clock24.png image.

Is it actually a bug, or is there a particular way to do it?

Thanks.

Accepted Answer

1

It should be possible to access images in the webContent folder if you reference the image similar to this in the .css file:

.my-icon
{
   background-image:url(#{resource['portlet/images/clock24.png']}) !important;
}

link

answered 19.11.2013 at 10:01

Peter Stöckli ♦
(suspended)
accept rate: 69%

Had to add url("#{resource['portlet/images/clock24.png']}") - but works like a charm. Thanks. :)

(19.11.2013 at 10:12) Nikel Weis

This solution is valid if we use an external CSS file whose content is under control.

However, if an external 3rd-party JavaScript library or framework is used, it often comes with CSS style sheets and referenced images.

If the developer puts these resources in the WebContent folder, I suppose everything will work fine, except for the images referenced by the CSS style sheets. Unless you edit them by hand to fix all image paths located in the 3rd-party style sheets, which is laborious and error-prone.

(19.11.2013 at 13:21) A1234

1

You can use a regular expression to make this less error prone - something like url((.+)) [search string] and url("#{resource['img:\1']}") [replace string]. Whereas 'img' would be the target folder like Heinrich Spreiter suggested in his tutorial about using ThemeRoller for Xpert.ivy: http://blog.xpertivyhacker.ch/search/label/ThemeRoller

(19.11.2013 at 13:51) Nikel Weis

hi @Peter Stöckli ♦ Can i apply same for js file? it's seem not work.

(07.11.2018 at 03:50) trungdv

Answer 2

It does not seem to be possible to access images within the webContent-folder from an externally loaded style-sheet. Maybe as a workaround: If you are using a PageTemplate, just put your style-definitions using images there. The code would be:

 url("#{ivy.html.wr('task_abort.png')}")

...whereas the prefered way is to put in the CMS.

 url("#{resource['ivy-cms:Images/image']}")

How to get web resouces images defined in a CSS file?

Follow this question

Related questions