I'm using Liquid in my CSS. For example, I have test.css.liquid which contains:
body {
background: {{ 'red' }};
}
When I run rake assets:precompile, it's not test.css that's compiled but still test.css.liquid and the Liquid code isn't parsed.
Sprockets uses Tilt which has a Liquid parser by default. I have Liquid enabled on my site.
Any idea what could be wrong?
It is bad idea to rename the manifest file application.css. You can include assets by requiring it in the manifest file , like this :
*= require your_styles
and in case you've initiated the liquid engine , it should be OK.
Related
I am trying to use client side Jade templates that are precompiled by Ruby on Rails and available through JST.
I added the jader gem
gem "jader", "~> 0.0.8"
In configuration/initializers I created an initializer called jader.rb that contains:
Jader.configure do |config|
config.views_path = Rails.root.join('app','assets','javascripts','views')
config.mixins_path = Rails.root.join('app','assets','javascripts','mixins')
end
In app/assets/javascripts/views I added an index.js.jst.jade file
Hello World!
Lastly in my javascript file I have:
$('#app-content').append(JST["views/index"]());
When I run Rails and browse to the page triggering the code I am getting the following error:
failed to require "fs"
(in /my-project/app/assets/javascripts/views/index.js.jst.jade)
I understand that the problem is that jade is a node.js project and the require function is having a problem. How do I fix the require error?
If you are looking at using Jade templates only on the client side (with Rails asset pipeline), I recommend https://github.com/inossidabile/jade
It's likely there is an error in your index.jade template.
From the jade rails-fix pull request here, ExecJS used by rails does not support require("fs") and will throw 'failed to require "fs" even if it's a template error. Hopefully this should point you in the right direction.
To debug, you can replace the content of index.jade template with with a 1-liner jade placeholder to see if it renders well. Alternatively, try it out rendering the index.jade template with a nodejs server if possible to be sure the template renders without any whinning.
After reading this post (recommended reading) about not using HTML5Shiv direct from source like (almost) everybody does, I'm trying to include the html5shiv.js in my app using Rails 3.2 Asset Pipeline.
I downloaded both minified and not-minified version of the javascript. The convention tells you to add third-party files into the vendors/assets folder. I have two questions now:
1) Which version (minified or not-minified) should I add to vendors/assets/javascrip folder?
2) Since it's a conditional reference <!--[if lt IE 9]>, how should I call the script?
I don't want to add it to the application.js manifest, because I want to keep it as a separate file and I want to use the condition. I'm kind of lost!
Any help would be very appreciated.
Thanks
You can use the unminified version of the JS if you like, Rails will compress it in production mode through the pipeline.
To keep the shiv as a separate file you can give it it's own manifest by creating a html5.js (or whatever) in your /vendor/assets/javascripts/ directory. In that file require the html5shiv (I assume the manifest and script are in the same dir).
//= require html5shiv
or
//= require html5shiv.min
And then include the manifest in your layout in the conditional block. In HAML something like:
== "<!--[if lt IE 9]>"
= javascript_include_tag 'html5'
== "<![endif]-->"
Remember to restart your app server before testing.
Or you may use directly
/[if lt IE 9]
%script{ src: "http://html5shim.googlecode.com/svn/trunk/html5.js", type: "text/javascript" }
I started using the asset_sync gem in order to use Amazon S3 as a CDN asset host (I am using Heroku and RoR). All of my assets are loading correctly, except for the icons I am using through Twitter Bootstrap (There is just a blank space where the icon should be).
I tried using Heroku's multiple asset pre-processor support:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);
I also tried moving the glyphicons-halflings.png directly into the images folder and referencing it there:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);
app/assets/stylesheets/custom.css.scss
background-image: url("/assets/glyphicons-halflings.png");
However, I've haven't found a way to make it work. Any suggestions on how to get the Twitter Bootstrap icons to work successfully with S3/Heroku would be greatly appreciated.
EDIT: I am using: gem 'bootstrap-sass', '~> 2.0.2'
If you are using gem 'bootstrap-sass', the following is a solution that worked for me.
First, download bootstrap from the bootstrap website. Extract the two icon .png files (glyphicons-halflings.png and glyphicons-halflings-white.png) and copy them into your apps image directory (app/images).
In your custom.css.scss file (this could be a different name depending on your app) enter the following at the top of your stylesheet (before you import bootstrap) to override the icon image path:
$iconSpritePath: url('/assets/glyphicons-halflings.png');
$iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');
#import "bootstrap";
Use the Rails image helper for example:
background-image: image-url("glyphicons-halflings.png");
You can also check your search path in the Rails console with:
Rails.application.config.assets.paths
Good luck!
Have you set your asset host?
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
Did you check the background-image URL that is actually used? I had the same behavior when I tried to test the CDN in my development enviroment. Turns out, somehow the wrong bucket was used in the application.css
For anyone not using the bootstrap-sass gem I finally got mine working by changing the default bootstrap css file extension to scss and editing the following piece of code to use the rails asset_url method. Just search for #font-face in the code and try this.
#font-face {
font-family: 'Glyphicons Halflings';
src: asset_url('glyphicons-halflings-regular.eot');
src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Commit and push to heroku. Worked for me. Hope this helps someone
Is it possible to use java .properties files in a Rails project instead of YAML files? And if so, how do you set this up?
generally the i18n integration works with YAML files or plain ruby hashes. So you could simply parse the .properties files (I think https://github.com/flergl/java-properties-for-ruby would still do the job, works even still with 1.9.3 at first glance) and convert them to YAML or dynamically parse them in something like:
# config/locales/en.rb:
# Gemfile: gem 'java_properties'
# or require 'rubygems'; require 'java_properties';
props = JavaProperties::Properties.new("de.properties")
translations_hash = props.keys.inject({}) { |hash, key| hash[key] = props[key]; hash }
{ :en => translations_hash }
Of course you might still need to replace placeholder syntax "{0}" to a i18n compatible "#{0}".
Cheers,
Fred
ps.: BTW check out our service PhraseApp.com we are working on easing the i18n pain!
I tried to use an image file in my HTML template. But when I run the server and open it in the browser the image is not getting loaded. But if I run the HTML file individually it's working fine. I mentioned the path of images folder in file settings.py, MEDIA_ROOT, also. Still it is not working.
settings.py:
MEDIA_ROOT = 'C:/Users/Vicky/Documents/Django/krish/media/images/'
HTML:
<img src="../media/images/Untitled.jpg" width ="267" height="122">
I also tried giving:
<img src="Untitled.jpg" width ="267" height="122">
How can it be made to work?
I had this problem when I started Django too :)
The Django server does not serve static files by default. Usually you need to use a separate server for this, but in a development environment you can use a shortcut.
Add this to your urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
)
Don't use this in production. It is slow, unstable and insecure.