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

Comment by trungdv on Peter Stöckli's answer

trungdv — Wed, 07 Nov 2018 03:50:15 -0500

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

Comment by Nikel Weis on Peter Stöckli's answer

Nikel Weis — Tue, 19 Nov 2013 13:51:55 -0500

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

Comment by A1234 on Peter Stöckli's answer

A1234 — Tue, 19 Nov 2013 13:21:22 -0500

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.

Comment by Nikel Weis on Peter Stöckli's answer

Nikel Weis — Tue, 19 Nov 2013 10:12:48 -0500

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

Answer by Peter Stöckli

Peter Stöckli — Tue, 19 Nov 2013 10:01:12 -0500

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;
}

Answer by Nikel Weis

Nikel Weis — Tue, 19 Nov 2013 09:09:08 -0500

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']}")

Comment by Flavio Sadeghi on A1234's question

Flavio Sadeghi — Mon, 18 Nov 2013 19:43:54 -0500

hi @adriano-labate, it was the http-link. It's a known issue. Just putting two ` round the link and it works...

Comment by A1234 on A1234's question

A1234 — Mon, 18 Nov 2013 17:22:02 -0500

Hey, where's my question content ?? it is there if I edit, but not shown when published :-(