i am developing an app in rails with some css and js plugins template,
by default we should separate or js and css file into javascript and css folder right?
but the problem is my plugins folder structure are quite complex,
have a lot of sub folders, so i decided to put all the assets (css, js, images, fonts) into a folder, the problem is everything not working on production mode, the css styles, scripts, images all not loaded, please help.
here is my structure :
javascripts
stylesheets
public_assets
- img
- icon
- bg
- favicon
- images
- proteam
- png
- ualanding
- portofolio
- fullsize
- thumbnail
- font
- css
- js
- sass
- vendor
- ninja-slider
- bootstrap
- font
- css
- js
- font awesome
- css
- fonts
- less
- scss
- jquery
- magnific-popup
- scroolreveal
- vid
images
Static_Dev
FYI i already run
rake assets:precompile
command
i reference my images mostly like these :
<img alt="UrbanAce" src="assets/img/logo.png" height="24">
i believe when i run on production mode, the assets path changed, so i changed my image tag to :
<%= image_tag "logo.png", { src: "logo.png", height: "24"} %>
the above code did not work, even in development mode.
also, what if i need to call some background images from css?
something like :
.hero {
background-image: url("../img/png/UA-Landing/UA-Pattern.png");
background-repeat: repeat-x;
background-position: 0 76px;
height: 280px;
}
i call font like this :
#font-face{font-family:FreightSansPro;src:url(../font/FreightSansPro-Light.otf) format("opentype");
how should i replace it? so it will work on production and development mode.
many thanks....
<%= image_tag "logo.png", { src: "logo.png", height: "24"} %>
you don't need to set src. The first argument is a filename already. Do this instead:
<%= image_tag "logo.png", height: "24" %>
If there is a file at app/assets/images/logo.png, it will display.
To address another file (say, favicon), use path like this:
<%= image_tag "img/favicon.ico" %>
It's a path to the file, minus the top level folder (public_assets in this example).
Related
I have followed advice from other topics but can't get it to work. I want to set a background image.
my scss file is custom.css.scss and code is body
{ background-image: url("back.png"); }
back.png is located in app/assets/images
custom.css.scss is located in app/stylesheets
i have no problem getting back.png to work through the asset pipeline in my html pages with
<%= image_tag "back.png" %>
#SCSS
body {
background: {
image: asset_url("back.png");
}
}
#SASS
body
background:
image: asset-url("back.png")
I would strongly recommend using SASS over SCSS.
The simple difference is that SASS doesn't have any semicolons or brackets. Other functionality is the same.
--
Although asset_path works, we've found it much more effective to use asset-url (asset_url in SCSS)
use it with the asset pipeline
body { background-image: url(asset-path('back.png', image)); }
more functions at the documentation
I read through every link on Stack Overflow and Google. I have spent many hours trying stuff. But could not figure this issue out.
I have following folder structure in my app assets
app
->images
->application (folder)
image1..
image2..
->icons (folder)
image3..
image4..
I have application.css file in my stylesheets folder like below:
app
->stylesheets (folder)
application.css
->application (folder)
app.css
The application.css has following entry:
*= require_tree ./application
Thus it is loading my app.css file which has all the css for my app. In my app.css I am using :
{background: url('icons/user-business-gray.png') no-repeat 2px center transparent;}
My config/environments/production.rb has :
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
#config.serve_static_assets = false
config.assets.compile = false
config.assets.digest = true
My config/initializers/assets.rb has :
Rails.application.config.assets.paths << Rails.root.join( "app/assets/images/application")
I did :
RAILS_ENV=production rake assets:precompile
I can see all my images hashed in public/assets, public/assets/application and public/assets/icons properly.
It all works fine in development mode. But I cannot see any images referenced in in app.css file in production mode.
If I add an image to .erb directly using <%= image_tag('icons/user-business-gray.png') %> I can see the image correctly. But I cannot see any images referenced from app.css as referenced above.
I even changed the name of app.css to app.css.scss and referenced the image like :
{background: url(assets-path('icons/user-business-gray.png')) no-repeat 2px center transparent;}
but still the same issue. Any help is much appreciated.
Try changing the filename to app.css.scss and using the assert-url helper:
{background: asset-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
This has fixed the issue:
{background: image-url('icons/user-business-gray.png') no-repeat 2px center transparent;}
I know there are alot of similar questions/answers on SO about this, and I have tried at least 7 of the proposed methods. I can display my app's background image locally in a variety of ways. After trying for nearly 40 hours, there seems to be no way to render it in production. It runs on the following:
Ruby 2.1.5
Rails 4.1.8
Puma 2.1 via Amazon Elastic Beanstalk (single instance - no load balancer)
I've tried every combination of config.serve_static_assets=[true|false] and setting RAILS_SKIP_ASSET_COMPILATION to true and false.
Ran rake assets:precompile RAILS_ENV=production
Tried every path I can think of, but it's not finding the background image. One thing I noticed was that precompilation changes the name of the image when it copies to the public/assets directory. (example: "foo.jpg" becomes "foo-ilfajwe8hjsa8erfjsdf.jpg") So I tried copying the original image files to the new public/assets directory, hoping the app would find them there. That didn't work.
I'm thinking it might be how I'm referencing it in my css, because oddly the favicon file displays as does the fonts from my app's "fonts" folder. And both have their names appended to just like the background image.
Here is my application.html.erb..
<!DOCTYPE html>
<html>
<head>
<title>Capstone v1.4.5</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'capstone_icon.png' %>
</head>
<body>
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= render 'navigation' %>
<main>
<%= yield %>
</main>
</body>
</html>
Here is the application.css.sass..
/*
*= require bootstrap.min
*/
#import "bootstrap-sprockets"
#import "bootstrap"
#font-face
font-family: 'Cinzel-Regular'
src: font-url('Cinzel-Regular.ttf')
#font-face
font-family: 'Oxygen'
src: font-url('Oxygen.otf')
html
position: relative
min-height: 100%
body
background-image: image-url("snowy_prairie_bg.jpg")
background-repeat: no-repeat
background-position: center top
font-family: 'Oxygen'
margin: 0 0 95px
The contents of my public directory (after precompilation)
application-6cca23f2f72df0ad7d26279535719396.css
application-6cca23f2f72df0ad7d26279535719396.css.gz
application-fddd9c84ba451526dbd2ef5bf46e494c.js
application-fddd9c84ba451526dbd2ef5bf46e494c.js.gz
bootstrap
capstone_icon-ed6ffe0ae4bbbb56a8b74a4d7ff230cf.png
capstone_icon.png
Cinzel-Regular-59dcda430d3afc3ace221f1835d7fb08.ttf
images
manifest-73d04c0fd1290b15fb280becfcf62b7b.json
Oxygen-1c736bd9242de63cf87c07f0a48c9b5c.otf
Oxygen-Bold-01bc72645c864aa090d57754565ef634.otf
Oxygen-BoldItalic-cfe32a5aedef7b25f8b1efdfcbdbd72a.otf
Oxygen-Italic-2a51c29c8f2bd242ac27e6fb7860f6a1.otf
snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
snowy_prairie_bg.jpg
Am I referencing the image wrong in my css? Again, it renders great locally. Should I be using Passenger instead of Puma? This is not a very small app and I've got alot invested in the database, also hosted on Amazon. But like I said, I'm approaching 40 hours just trying to get this background rendered.
If you have any ideas, please help. I am willing to try anything!
Thank you
FYI - the above bootstraps, fonts, other images and sass styles render perfectly. It's just the background image. Thanks
EDIT: When I go to the page, capstonesavings.com, the following error is shown in the dev. console: Failed to load resource: the server responded with a status of 403 (Forbidden). Do I need to change permissions on something?
OK, SO I THINK I FIXED IT!
Most of the above code is correct, but I changed the following from the above application.css.sass..
Changed
background-image: image-url("snowy_prairie_bg.jpg")
To
background-image: asset-url("snowy_prairie_bg.jpg")
Then, I SSH'ed into the instance (eb ssh) and did the following:
cd /var/app/current
followed by
sudo chmod 755 public/assets/snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg
I had tried the above change to the SaSS before, but it didn't work without changing permissions. Thanks to Chrome developer tools, I noticed a (tiny) error flag when the page was rendered. I clicked it and it showed the 403 error that I added in the above edit. This is some stuff that Amazon uses to make things secure, since I guess you can route your log files, etc. to the associated S3 bucket. So that's why I explicitly targeted the image in question when changing the perms. This site isn't going to have a ton of images, but if it did I'd probably take the time to elaborate on the storage within the bucket and set broader perms accordingly.
This saved the day for me. Hope it helps someone else.
I deployed a Rails app successfully, however, the images are not displaying. This is the 404 error that's showing in the console
GET http://mydomain.com/assets/myimage.png 404 (Not Found)
Inside my application directory on my server, there's three subdirectories
current releases shared
which is a setup created by the deployment script I borrowed from Ryan Bates.
I can see the images in the images directory of the assets folder in current
current/app/assets/images$ ls
glyphicons-halflings.png glyphicons-halflings-white.png qb.png
However, in the assets folder of the shared directory (which is I'm guessing where they're being put after everything's compiled for production), the same images have some (I'm assuming) cache information attached to them, such that the image I want isn't
myimage.png
but rather
myimage-0bb3f134943971c95b2abdfd30f932c7.png
I'm wondering if this is what's causing the 404 error, as (I'm assuming) the code's looking for myimage.png in the shared/assets directory.
Do you know how I can deal with this problem?
contents of /shared/assets
/shared/assets$ ls
application-39c95ed7b8d86b0698b6c443563e33c7.js fontawesome-webfont-c4adb9424c8b6a6b1b9b0d2627528c4c.woff
application-39c95ed7b8d86b0698b6c443563e33c7.js.gz fontawesome-webfont-f57557847fd1897100790d9df344ded8.ttf
application-7a6376d676fb88537b9f839687ccaad3.css glyphicons-halflings-4e5b89324f1ac987ddf6835ef51f5fe9.png
application-7a6376d676fb88537b9f839687ccaad3.css.gz glyphicons-halflings-white-2fa53df59ca25ee50f59f971c0c9175d.png
application-a184171300937caf263adbc5e8582ba4.css manifest-990c8a24196fee5e9c394078c326c763.json
application-a184171300937caf263adbc5e8582ba4.css.gz myimage-0bb3f134943971c95b2abdfd30f932c7.png
fontawesome-webfont-57b442a30fcae0d4334299c521a326a2.svg twitter
fontawesome-webfont-8140ac47a16c8f7074e59f2ebe0657eb.eot
code used to display images
For one image, I create a span like this
and then assign it a background image
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
left: 75px;
top: 300px;
}
For another image, I have a template like this with a class that automatically uses Twitter bootstrap to create a x to let uses click and remove a page element
<script id="blahblah_template" type="text/underscore">
<h2> The Story <i class='icon-remove'></i></h2>
It's triggering a 404 even though the image is on the server
Failed to load resource: the server responded with a status of 404 (Not Found)
http://mydomain.com/assets/glyphicons-halflings.png
you should use asset helpers provided by rails which would automagically create the right url to the image with caching build in. here is how:
.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url( <%= asset_path 'qb.png' %> );
left: 75px;
top: 300px;
}
the above will map qb.png to qb-0bb3f134943971c95b2abdfd30f932c7.png & also update the url once the caching fingerprint changes. just make sure that your stylesheet filename has .erb at the end, something like stylesheet.css.erb
see The Asset Pipeline guide for more information
[edit]
For Bootstrap integration with rails asset pipeline, kindly use gem like bootstrap-sass. it will fix your issues with images
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.