This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

gtf21
gtf21

I have a LESS file from which I'm referencing some background images. I'm linking the LESS to the template using OctoberCMS' LESS compiler for dev purposes:

<link href="{{ ['assets/less/home.less']|theme }}" rel="stylesheet" type="text/css">

I can't work out what path to use for referencing the background images, however. I've tried copying other themes, looking at the demo, and the following combinations, none of which work:

url(../images/image.png)
url(../assets/images/image.png)
url(images/image.png)
url(assets/image.png)

I'm at something of a loss for what to do. Does anyone know how to reference asset files from LESS using the OctoberCMS LESS compiler?

Daniel81
Daniel81

Ah, this is an issue with the combining of stylesheets. When your .less file is processed, any links in the CSS are given the URL of http://localhost:8888/october/combine/themes/{THEME}/assets/images/image.png, so the image path is then wrong due to the added "combine" in the url.

Last updated

gtf21
gtf21

Oh, and I could do this by hardcoding the theme path in the LESS, but that is a last-resort solution.

gtf21
gtf21

Daniel81: no, because that references domain.tld/images not /themes/mytheme/assets/images

Daniel81
Daniel81

I have amended my comment above with the reason why it's not working

gtf21
gtf21

Hmm ok. I'm wondering if the CssRewrite filter in https://github.com/kriswallsmith/assetic would be of any use?

gtf21
gtf21

The LESS compiler should really rewrite asset URLs to the theme directory so it doesn't have to be hardcoded.

Daniel81
Daniel81

OK, I seemed to have got it working on mine.

If you use the URL path of ../themes/THEME/assets/images/image.png, the image will load

gtf21
gtf21

Yeah, as I said that earlier, that works but it requires you to hardcode the theme path which is ridiculous.

Daniel81
Daniel81

But is that an issue? If the .less file are related to that THEME, why is it a problem? I know it's not the most intuitive method, but it works.

gtf21
gtf21

Because it's not robust to changes in the directory structure outside the theme, which, if we're to maintain some level of modularity, it should be.

Incidentally, a dev could, if desired, change the default themes folder anyway (I think) so they'd have to edit the theme files instead of it just working, since October knows where themes are found, and could just rewrite the URLs.

Daniel81
Daniel81

Yeah I suppose. Might be worth you posting an issue RE this over on GitHub

1-12 of 12

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.