I'm using Grails 2.0 and specified my css stylesheets and javascript files in the application resources file so that I can use syntax like <r:require modules="common"/>
In my resource file I have specified a css file which in turn uses in image background...
jrac {
dependsOn 'jquery-dev'
resource url: '/js/misc/jrac.js'
resource url: '/css/misc/jrac.css', bundle:'bundle_style'
}
jrac.css
...
.jrac_loading {
background-image: url('../../images/misc/loading.gif');
}
The issue is that when I run this in the browser, the parsed file changes the url to:
background-image: url('resource:/images/misc/loading.gif');
So the image doesn't work, does anyone have any ideas why?
Turns out the issue was with the lesscss plugin. If you use this plugin you must set your less output to a separate bundle, otherwise url rewriting doesn't seem to play well.
Related
I am unable to get a Grails 2.5.2 application using the resources plugin to handle the cache-busting change made to CKEditor. The resources plugin is configured as follows:
grails.resources.adhoc.patterns = ['/js/*', '/images/*', '/css/*', '/plugins/*', '/thirdparty/*', '/templates/*']
grails.resources.adhoc.includes = ['/js/**', '/images/**', '/css/**', '/plugins/**', '/thirdparty/**', '/templates/**']
The CKEditor code is placed under app-dir/web-app/thirdparty/ckeditor and is currently at version 4.5.9. The cache-busting change was made in 4.5.5, and version 4.5.4 works perfectly with grails resources.
I get the following error in the console when running the app with 4.5.9:
GET resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe net::ERR_UNKNOWN_URL_SCHEME
It seems that the resources plugin is not coping well with values in ckeditor's editor.css file (a file served by the app points to app-dir/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD as http://localhost:8080/app-dir/static/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD). If I look at this file directly, it contains the following for the icons.png and icons_hidpi.png files, indicating that the resources plugin is incorrectly replacing the image file link (all but the first, actually) with a "resource:/..." url that shouldn't need to be there, and hence the console error. Curiously, it is only the icons.png and icons_hidpi.png files with their t parameter that get changed in this manner, other image files in the same editor.css file are left alone.
.cke_button__bold_icon {background: url(icons.png?t=a35abfe) no-repeat 0 -0px !important;}
.cke_button__italic_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -24px !important;}
.cke_button__strike_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -48px !important;}
.cke_button__subscript_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -72px !important;}
If I add the following configuration, the app runs and displays perfectly.
grails.resources.processing.enabled = false
If I use
grails.resources.mappers.cssrewriter.excludes = ['/thirdparty/ckeditor/skins/moono/**']
in an attempt to prevent resources from modifying ckeditor's editor.css file, nothing seems to change.
What can I do? I can't leave ckeditor at 4.5.4, as there is an interaction with it that I'm trying to fix. I'm already using the same configuration as recommended in another post, but that does not fix the problem. Disabling css rewriting altogether just breaks other plugins.
The eventual solution (recommended by a colleague) is to exclude the specific CSS file(s) from being processed by grails resources:
resource url:"thirdparty/ckeditor/skins/moono/editor.css", exclude: "*"
This avoids affecting other files that were either unaffected by the upgraded CKEditor, or benefited from the processing done by grails resources.
i'm attempting to include fontawesome (fa) in my grails 3 project. I saw for grails2 there was a plugin for this, but the configuration and explanation for how to install this plugin didn't seem to work in grails 3.
So I tried to add fa more or less manually by creating an assets/fonts/ directory, and placing the fonts in there, added the css to my stylesheets directory and referenced it from the application.css. When I run in Idea via grails run-app all the fa resources show up fine.
However when I package a war file to run in tomcat, none of the fa resources show up at all. When I look at the compiled style sheet that is created for the app, the ../fonts/ that I put in my fa style sheet has been removed, and then the font files can't be found.
#font-face {font-family: 'FontAwesome';src: url('fontawesome-webfont-32400f4e08932a94d8bfd2422702c446.eot?v=4.5.0')
This generated font resource, and all the others are not resolvable(404) from the root of my application, but are resolvable if I prepend /assets/ to them.
What am I missing configuration wise with the asset pipeline to get this working?
As mentioned in the comments you can use the Grails 3 bootstrap-framework hosted on GitHub https://github.com/kensiprell/bootstrap-framework
Works like a charm.
Create a folder called 'fonts' in grails-app/assets. In this folder place the unzipped content containing font-awesome files. You should have something like:
grails-app
|__assets
|__fonts
|__css
|__fonts
|__less
|__scss
....
Then, for the asset pipeline to know the new directory, reference it in the build.gradle file. You should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
Download Fonts from this link enter link description here and in that add Fonts folder only to assets in grail app.Add below code:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
So in my:
application.css.scss file I have the following line:
background-image: cloudinary-url('billie-piper-reading-book', $width: '100%');
In development environment it loads with this asset pipeline:
http://localhost:3000/assets/billie-piper-reading-book
Which results in:
GET http://localhost:3000/assets/billie-piper-reading-book 404 (Not Found)
I would assume, that cloudinary-url should genereate something like http://res.cloudinary.com/demo/image/upload/billie-piper-reading-book...
Any reason?
Any support will be appreciated
In order to generate a Cloudinary URL for a static image, you should first run a rake task and follow up the steps as explained in the following blog:
http://cloudinary.com/blog/how_to_deliver_your_static_images_through_a_cdn_in_ruby_on_rails
After the image is synced with your Cloudinary account, the following code example should work:
background-image: cloudinary-url('billie-piper-reading-book.jpg');
This will generate a URL like the following (mind the asset type):
http://res.cloudinary.com/<your_cloud_name>/image/asset/billie-piper-reading-book.jpg
If you want to use an already uploaded image, you can also set the type parameter to upload:
background-image: cloudinary-url('billie-piper-reading-book.jpg', $type: 'upload');
to generate a URL like (mind the upload type):
http://res.cloudinary.com/<your_cloud_name>/image/upload/billie-piper-reading-book.jpg
Also note that $width: '100%' isn't accepted in background-image. You might want to consider using background-size instead.
If you need HTTPS like me, use :
background-image: cloudinary-url('billie-piper-reading-book.jpg', $secure: true);
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
I am having trouble with the plugin. Everything seemed fine but after running the app in dev env, the page loads up but complains that it can't find the compiled css file. I am using Grails 2.0.1 and lesscss-resources 1.3.0.
Here is what I have in UiResources.groovy:
styling {
defaultBundle 'styling'
resources url: '/less/mainStyles.less', attrs:[rel: "stylesheet/less", type: 'css'], disposition: 'head', bundle: 'bundle_styling'
resources url: '/css/other.css', disposition: 'head'
}
What shows up on the page is this:
< link href="/appName/bundle-bundle_styling_head.css" type="text/css" media="screen, projection" rel="stylesheet" >
Although I can locate this file in the
~/.grails/2.0.1/projects/appName/tomcat/worl/Tomcat/localhost/appName/grails-resources ...
Grails console also complains:
Resources not found: /bundle-bundle_styling_head.css
I have been trying different things to get this to work till no avail. Did I do anything wrong here?
I had a similar problem and found that removing the bundle option fixed the problem. So remove ", bundle: 'bundle_styling'" making the line:
resources url: '/less/mainStyles.less', attrs:[rel: "stylesheet/less", type: 'css'], disposition: 'head'
Hope this works for you too.
Be aware what the docs say currently in the issues section - maybe you are facing one of the bugs:
For the Bundle to work you must have a .css file at the end of the bundle, even if it is just a blank file.
Must specify the default bundle manually as this is calculated based on file extension by default.
I just had a case where I specified this in an inplace plugin (MyPluginApplicationResources.groovy)
resource url:'/less/eip.less', attrs:[rel: "stylesheet/less", type:'css'],defaultBundle: 'eip'
resource url: '/css/dummy.css', defaultBundle: 'eip'
There was no error but also no css rendered by the plugin, so I changed it to:
resource url:[dir: '/less', file : 'eip.less', plugin: 'my-plugin'], attrs:[rel: "stylesheet/less", type:'css'],defaultBundle: 'eip'
resource url: '/css/dummy.css', defaultBundle: 'eip'
This worked for me.
dummy.css : this is an empty css file (see issues) - but I haven't tested if its really needed.