I can't figure out what made this happen in the first place, and now I can't figure out why it stopped happening.
My CSS is shared across applications and changing it is not an option. I can use different CSS files in development but this mysterious feature was nice while it lasted. It is not created using any asset helper tags.
This is the CSS at it is in on my hard-drive:
body .page-background {
background: #ffffff url(/images/template/css/bg_body.gif) 0 0 repeat-x;
}
And this is how the CSS was appearing on the page:
body .page-background {
background: #ffffff url(/assets/template/css/bg_body.gif) 0 0 repeat-x;
}
So /images -> /assets.
This was a surprise at first, but it ended up being great because my images actually WERE in /assets when running in the development environment. How did Rails know this and why did it stop converting the URL?
I've been searching through Rails' source but I can't find any place that this substitution would have been made.
Rails Verision: 3.2
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 confused about how works assets pipeline, im using a gem called aloha-rails and it have the next CSS rule:
button.aloha-button {
background: url("../img/base.png") no-repeat scroll 0 0 transparent !important;
}
If I run it on local, that rule is on file:
http://local.dev/assets/aloha/css/aloha.css?body=1
And I CAN see the image, it is loaded from this address:
http://local.dev/assets/aloha/img/base.png
But when I run it on heroku, on when I precompile assets on local the css rule is loaded from applications.css, the rule still with ../img/base.png so the image is trying to be loaded from:
http://server.herokuapp.com/img/base.png
and that DOESNT exist, so I receive a 404 error and dont see the image.
Write as following: Remove the dots(..) before the path.
button.aloha-button {
background: url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
Please do let me know if not working still.
In order to access your image assets in production, where asset precompilation will stick a hash at the end of each filename, you need to use the img-url helper provided by sass-rails if your css has a .scss or .sass extension, or you can use the asset_path helper if you add .erb to the end of your stylesheet filenames:
button.aloha-button {
background: image-url("/img/base.png") no-repeat scroll 0 0 transparent !important;
}
It seems like the aloha-rails gem doesn't do this. Probably also needs to drop the .. in front of the path.
In my Heroku rails app. I follow this instruction and implemented CDN.
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
It is almost working correctly, but the background image I wrote in css.scss.erb file doesn't show up.
My files and the problem are below.
custom.css.scss.erb
.ap-sidebar .ap-nav li a span {
background: transparent url(asset-path('nav_arrows.png', image)) no-repeat 0 50%;
}
staging.rb
config.action_controller.asset_host = "//#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"
The output url should be:
staging-bucket.s3.amazonaws.com/assets/nav_arrows-digest.png
but the indeed output is like below:
.s3.amazonaws.com/assets/nav_arrows-digest.png
I changed asset-path to asset-url, but it didn't work.
How can I fix this?
Two things you should check:
The environment variable ENV['FOG_DIRECTORY'] may be nil. You can check the env variables with the command:
heroku config --app
More details: https://devcenter.heroku.com/articles/config-vars
The mode of your app running on Heroku. By default, your app will run in production mode, while you're configuring for staging mode. You can change the mode by following this article: https://devcenter.heroku.com/articles/multiple-environments
I found a way to solve this.
just change this:
.ap-sidebar .ap-nav li a span {
background: transparent url(asset-path('nav_arrows.png', image)) no-repeat 0 50%;
}
to this:
.ap-sidebar .ap-nav li a span {
background: transparent url('nav_arrows.png') no-repeat 0 50%;
}
css.scss.erb is not working, so I also omit erb from the file.
My stylesheet has:
.asc {
font-size: 2em;
background-image: url(/images/up_arrow.gif);
}
.desc {
background-image: url(/images/down_arrow.gif);
}
The font-size works but the background image (arrow) doesn't.
I get ActionController::RoutingError (No route matches [GET] "/images/up_arrow.gif"):
I tried lots of things in routes but nothing worked.
Try this:
.asc { font-size: 2em; background-image: url(/assets/up_arrow.gif); }
.desc { background-image: url(/assets/down_arrow.gif); }
That's how I do it in a 3.1 app I'm working on. Your /images is probably mapped to app/public/images.
Finally found that I needed to do the new precompile of assets step.
'I shoulda read the manual'
Compiled assets are put in public/assets directory by default (the destination is defined in config.assets.prefix).
To create compiled versions of your assets use bundle exec rake assets:precompile
If you don't have write access for the production file system, use this task locally and then copy the compiled asset files.
The asset compilation process:
1. Concatenates & compresses all JavaScript files into one master. Uglifier is the default for the process.
2 Compresses (minifies) all CSS files into one master .css file. CSS is compressed by yui by default.
3. Allows for high level languages like coffeescript to use the assets.
Note: It is possible (though not a great idea) to disable the asset pipeline by changing config/application.rb and set
config.assets.enabled = false
You can skip the asset pipeline when creating a new application with the —skip-sprockets option, e.g. rails new appname --skip-sprockets
You can also set config.assets.compile = true This way the assets are only compiled when a request for them is made.
Dumb question perhaps, but are you positive that /images/up_arrow.gif exists?
When you 404 on an public asset in it just falls through to the rails router. It's not really a routing problem; you just get a routing error because there are no routes defined for static assets.
I had this same issue with Rails 3.2.13.
Solution was to modify the css to this:
.asc { font-size: 2em; background-image: url(up_arrow.gif); }
.desc { background-image: url(down_arrow.gif); }
I'm working with Rails 3.1's asset pipeline and although it seems to work flawlessly in my development environment on my localhost, I'm having huge issues with it on engine yard.
Here's my basic problem.
When I include images for a background in one of my scss files:
a {
color: #3c7f8b;
font-weight: bold;
padding-left: 35px;
font-size: 13px;
display: block;
background: white url(shade.png) top right;
&:hover {
color: #222222;
background: white url(shade2.png) top right; }
&.on {
color: #222222;
background: white url(shade2.png) top right; } } }
I run into the following issues: Even though I have precompiled my assets, the browser requests /assets/shade.png instead of /assets/shade-FINGERPRINT.png which is the actual file that exists.
Does anybody know what I can fix this issues with referencing images in my assets folder inside my .scss files?
You should use image-url rather than url to reference images when using scss in Rails 3.1.
Also, ensure you load compass before sass-rails, as sass-rails over-rides the asset methods to work with the asset pipeline.
Lastly, if you're using capistrano to deploy, add in
load 'deploy/assets'
To enable asset compilation when you deploy.
Check out the answer from 'tybro0103' on this post - Rails 3.1 and Image Assets
basically change the file from scss to scss.erb and then use the asset_path helper method
pre-compile before deploy
disclaimer: i have not tried this myself
qnm Actually I think there is an error with the image_url helper. Not sure if they fixed it but I saw a recommendation to use asset_url with the "image" explicting stated.
i.e. asset_url("some.img","image)