relative paths for accessing rails assets
Asked Answered
C

3

6

I'm stuck! xD I've been working on a Rails project and am having trouble accessing my assets using relative paths. A friend of mine is working on the html/css side of things while I'm handling the controllers and models. My friend recently gave me a batch of files structured in the following way:

app/assets/images/*.jpg
app/assets/stylesheets/*.css
app/assets/javascripts/*.js
app/assets/fonts/*.* (+some more css files in here)

Within my app/views/layouts directory, I have a layout named final.html.erb which is used for my entire webapp. I also have 1 page(html body content) that I'm trying to render with this layout in app/views/pages named final_page.html.erb ... the necessary routing is in place for the page to load; however, it only loads the context of the final_page.html.erb (no images, styling, or fonts). When I go to the console and type "rails server" and visit localhost:3000, the page shows up ... naked lol. The console outputs the following:


Started GET "/" for 127.0.0.1 at 2012-07-28 21:15:02 -0700
Connecting to database specified by database.yml
Processing by PagesController#final_page as HTML
  Rendered pages/final_page.html.erb within layouts/final (8.4ms)
Completed 200 OK in 82ms (Views: 81.0ms | ActiveRecord: 0.0ms)


Started GET "/assets/stylesheets/style.css" for 127.0.0.1 at 2012-07-28 21:15:04 -0700

ActionController::RoutingError (No route matches [GET] "/assets/stylesheets/style.css"):
  actionpack (3.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/show_exceptions.rb:56:in `call'
  railties (3.2.6) lib/rails/rack/logger.rb:26:in `call_app'
  railties (3.2.6) lib/rails/rack/logger.rb:16:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/request_id.rb:22:in `call'
  rack (1.4.1) lib/rack/methodoverride.rb:21:in `call'
  rack (1.4.1) lib/rack/runtime.rb:17:in `call'
  activesupport (3.2.6) lib/active_support/cache/strategy/local_cache.rb:72:in `call'
  rack (1.4.1) lib/rack/lock.rb:15:in `call'
  actionpack (3.2.6) lib/action_dispatch/middleware/static.rb:62:in `call'
  railties (3.2.6) lib/rails/engine.rb:479:in `call'
  railties (3.2.6) lib/rails/application.rb:220:in `call'
  rack (1.4.1) lib/rack/content_length.rb:14:in `call'
  railties (3.2.6) lib/rails/rack/log_tailer.rb:17:in `call'
  rack (1.4.1) lib/rack/handler/webrick.rb:59:in `service'
  /usr/lib/ruby/1.9.1/webrick/httpserver.rb:138:in `service'
  /usr/lib/ruby/1.9.1/webrick/httpserver.rb:94:in `run'
  /usr/lib/ruby/1.9.1/webrick/server.rb:191:in `block in start_thread'


  Rendered /var/lib/gems/1.9.1/gems/actionpack-3.2.6/lib/action_dispatch/middleware/templates/rescues/routing_error.erb within rescues/layout (2.0ms)

I think that the problem is that I'm trying to access files using relative paths. My layout file looks like this:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width">
<title>:: Final ::</title>
<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/style.css">
<link href="../../assets/stylesheets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px) and (max-width:1000px)">
<script src="../../assets/javascripts/modernizr.js" type="text/javascript"></script>
</head>
<body>
  <%= yield %>
</body>
</html>

Also, within the body of my final_page.html.erb file, I try to access images using relative paths as well...like so:

<img src="../../assets/images/mainImg.jpg" alt="img"> 

My friend wrote most of this html, and he has 0 experience working with rails. I decided to change the requests for assets like so:

From:

<link rel="stylesheet" type="text/css" href="../../assets/stylesheets/style.css">

To:

<%= stylesheet_link_tag "application.css" %>

From:

<script src="../../assets/javascripts/modernizr.js" type="text/javascript"></script>

To:

<%= javascript_include_tag "application.js" %>

From:

<img src="../../assets/images/mainImg.jpg" alt="img">

To:

<%= image_tag "mainImg.jpg"  %>

This somewhat helps, as the images load, and very little of the styling comes through; however, it's way off from what it's supposed to look like. I'm thinking it's because my friend makes relative calls within the css files themselves:

body {
    background-image: url(../images/bg.jpg);
    background-repeat: repeat;
}

I've tried replacing these with url(<%= asset_path 'bg.jpg' %>) etc... but it has no effect. I've tried so many things, and have read so many posts. I'm wondering if there's a way that Rails will allow me to use relative paths. I've tried:

config.assets.enabled = false

but that doesn't help ... please ... what am I doing wrong? I don't think my friend will want to stop using relative paths for his work, as it is how he does things. The site fires up well outside of Rails, but I need it to work with Rails for my webapp. Any advice would be greatly appreciated. Thank you for having the patience for reading all of this.

P.S. I'm using Ruby 1.9.3, and Rails 3.2.6

Canvass answered 29/7, 2012 at 6:2 Comment(0)
A
8

Try to use /assets/style.css not /assets/stylesheets/style.css and so on.

If there is such structure:

app
  assets
    stylesheets
    javascripts

Then to get access to files in app/assets or in app/assets/any_folder you should use path /assets/file.

Updated

Here try:

body {
    background-image: url(bg.jpg);
    background-repeat: repeat;
}

Or:

body {
    background-image: url(/assets/bg.jpg);
    background-repeat: repeat;
}
Alternative answered 29/7, 2012 at 6:9 Comment(2)
This actually solved 50% of the problem xD thanks a lot! However, the styling is still off. I'm not sure if it's because the css files are using relative paths or? :( Will I have to go into the css files and change the paths to images it refers to? like: body { background-image: url(../images/bg.jpg); background-repeat: repeat; } From url(../images/bg.jpg) to url(/assets/bg.jpg)?Canvass
Oh my word ... that worked 100% ... I used the url(/assets/bg.jpg) fix for all of the image references in the css files and it did the trick!!! Thank you SO SO SO much!Canvass
P
4

Rails 3.1 introduced the new Asset Pipeline. I would recommend you read over this: http://guides.rubyonrails.org/asset_pipeline.html

In your app/views/layouts/application.html.erb file, make sure you have this:

<%= stylesheet_link_tag "application", :media => "all" %>

In your app/assets/stylesheets/application.css file, make sure you have this line:

*= require_tree .

(This will ensure that any css files that you have in the app/assets/stylesheets directory will be available to your application)

in your css file you can just do this to reference images in your app/assets/images directory:

background-image: url(bg.jpg);
Parthinia answered 29/7, 2012 at 6:40 Comment(2)
What about Fonts in another directory?Draper
For fonts, I think you need to add this line to config/application.rb: config.assets.paths << Rails.root.join("app", "assets", "fonts")Anoint
D
0

In case you want to use local resources in your configuration initializers and you have this folder structure:

app assets stylesheets javascripts

All you have to do is: (in this sample im using Spree base config/initializer)

Spree.config do |config| config.admin_interface_logo = '/assets/logo/custom_admin.png' config.logo = '/assets/logo/custom_store.jpg' end

So use /assets/your_file_or_path and it will work :D

Decosta answered 20/6, 2018 at 2:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.