Problem using client-side Less
Permalink
I'm trying to integrate Less as a client-side javascript script, but it's not working in my C5 theme. Just as a sanity-check, I used the same set up in another non-CMS template and it worked fine, but for whatever reason it's not working in my C5 theme. I've included the necessary files in my theme (see below) and those files are linked correctly once rendered (I've checked).
The only thing I can think of is that there's some conflict with a built-in C5 javascript. Anybody else run into this? I don't want to use the Less package someone has put together in the marketplace, I want to put in in place at the theme level. Any help would be much appreciated.
<link href="<?=$this->getThemePath()?>/css/style.less" rel="stylesheet/less"> <script src="<?=$this->getThemePath()?>/js/less-1.3.0.min.js"></script>
The only thing I can think of is that there's some conflict with a built-in C5 javascript. Anybody else run into this? I don't want to use the Less package someone has put together in the marketplace, I want to put in in place at the theme level. Any help would be much appreciated.
It is in an undisclosed but live location, yes. I tried the Less Compiler from the Marketplace, but it fails/errors out when it tries to compile my retina.less file, which is part of the retina.js (http://retinajs.com/).
That's why I'm trying to integrate Less, to use it with the retina.js to add retina-ready graphics to my layout. The retina.js file catches images in the layout and looks for similarly named files in the same location with @2x added to the file name. The Less part adds some hook ups that basically does the same thing in the CSS.
That's why I'm trying to integrate Less, to use it with the retina.js to add retina-ready graphics to my layout. The retina.js file catches images in the layout and looks for similarly named files in the same location with @2x added to the file name. The Less part adds some hook ups that basically does the same thing in the CSS.
Which less compiler did you use? If you use this one: http://www.concrete5.org/marketplace/addons/less-compiler/... I can help you out.
Yes, that's the add-on I'm using. The error message I pasted above is what happens when it tries to compile the less file fromhttp://retinajs.com.
// retina.less // A helper mixin for applying high-resolution background images (http://www.retinajs.com) .at2x(@path, @w: auto, @h: auto) { background-image: url(@path); @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`; @media all and (-webkit-min-device-pixel-ratio : 1.5) { background-image: url(@at2x_path); background-size: @w @h; } }
They decided to do that in a very strange way.. "`" is not by spec picked up by less. I've reformatted to work for you:
This will compile to null if you don't use it in the same file.
Best wishes,
Korvin
// retina.less // A helper mixin for applying high-resolution background images (http://www.retinajs.com) .at2x(@path, @w: auto, @h: auto) { background-image: url(@path); @at2x_path: ~"'@{path}'.split('.').slice(0, '@{path}'.split('.').length - 1).join('.') + '@2x' + '.' + '@{path}'.split('.')['@{path}'.split('.').length - 1]"; @media all and (-webkit-min-device-pixel-ratio : 1.5) { background-image: url(@at2x_path); background-size: @w @h; } }
This will compile to null if you don't use it in the same file.
Best wishes,
Korvin
Testing that appears to work as expected for me, make sure it's outputting what you expect.
It appeared to work, giving a success message after compiling, but the CSS file it rendered is blank. I'm at the "give up" stage here.
After manually putting LessPHP in place, I think I've narrowed down the problem to that mixin thathttp://retinajs.com says to use. It doesn't compile and other people seemed to have the same problem...
https://github.com/imulus/retinajs/issues/18...
I get this in my PHP error logs, even when I used your reformatted version.
https://github.com/imulus/retinajs/issues/18...
I get this in my PHP error logs, even when I used your reformatted version.
Two years later I found a solution to this. If you're using the PHP-based compiler for less, using this mixin, either placed in your less file or imported, will work:
I came across this discusison (http://stackoverflow.com/questions/15726596/double-url-with-less-css) and adapted a solution.
// retina.less // A helper mixin for applying high-resolution background images (http://www.retinajs.com) @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)"; .at2x(@path, @sfx, @w: auto, @h: auto) { background-image: url('@{path}.@{sfx}'); @media @highdpi { background-image: url('@{path}@2x.@{sfx}'); background-size: @w @h; } }
I came across this discusison (http://stackoverflow.com/questions/15726596/double-url-with-less-css) and adapted a solution.
Hi guys,
Wanted to ask if you got retina.js to work with images uploaded through file manager or just the ones through css?
Thanks
Wanted to ask if you got retina.js to work with images uploaded through file manager or just the ones through css?
Thanks
Personally, I've not used it in conjunction with files from the c5 file system. I'd certainly be interested in hearing ideas on that though.
Is retina.js looking for the @2x image in the same directory where the original image file is? If so, my guess would be that it's not quite possible, as C5 is saving each image in its own folder with a unique path, and the /files/ directory is getting pretty stuffed at times, so not sure how it would be possible to search through all those numbered folders...
You're correct about it looking for a similar file name with @2x tacked on. Without some integration with c5 at the PHP level I don't see how that would work.
Mike