Rails image broken link - ruby-on-rails

I'm trying to link to an image in rails and its not working. I can link to assets/file.css as well as assets/file.js but assets/file.jpg doesnt work.
I tried a fresh rails new project_name and when i open the homepage and the rails logo doesnt show.
As a side question,
How do I get rails to load only the application.js and application.css
I see that if i remove ?body=1 from the URL it compresses them all into one file, but when I view the page using the following code it leaves those files blank and includes them one by one as separate scripts.
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>

Ok so that's an expected behavior, you have to use Rails helpers:
<%= image_tag "file.jpg" %>
Your css files should be .erb. Within it, use:
.class { background-image: url(<%= asset_path 'image.png' %>) }
Reference is para 2.2.1 here.

I just checked my code and my CSS looks like this:
background-image:url(/assets/pinstripes.jpg);
with the image uploaded to app/assets/images, of course. This looks like what you're using, but I can't tell for sure.

Related

The render class did not render the file at rails?

I am newbie with rails and here is my problem
I tried to write a very simple program with rails, and when I wrote an application.html.erb, it worked well.
Here is what I got
But, when I created a folder named "shared" and a file named _navbar.html.erb in that folder, I thought that I could render my code from that file navbar.html.erb to the file application.html.erb by this code
<body>
<%= render "shared/navbar" %>
<%= yield %>
</body>
The folder shared/_navbar.html.erb is in the folder views, which means it in the same folder with the folder layouts/application.html.erb
I am setting rails -v 7.0.4 and ruby -v 3.1.2
Here is all of my code, if you need
https://github.com/nguyencuc2586/freelancer
Could you please give me some advices ? Thank you very much for your time.
Quote from the Rails Guides about Layouts and Rendering:
This makes app/views/application/ a great place for your shared partials, [...]
Following that advice from the official Rails guides, I would place the shared partial with the navigation into app/views/appplication/_navbar.html.erb and would call it from the layout view like this:
<%= render "navbar" %>
Alternatively, place the shared partial at app/views/shared/_navbar.html.erb and call it from the layout like this:
<%= render "shared/navbar" %>
Or, place the shared partial at app/views/layouts/shared/_navbar.html.erb and call it from the layout like this:
<%= render "layouts/shared/navbar" %>

Rails 4 Different background image for home and items index view

I should like to set two different background images for the home page of my app and the index view for the items.
I tried this directly in the home view:
<div class="container" style="background: url('/assets/images/hom.jpg')">
but it doesn't display any image. Someone can help me please?
I already have tried to follow this post but it still doesn't work.
How to set a different background image for each page in Rails 3 site?
Try it without /assets/ in the URL. The rails assets pipeline does not require you to state that it is in an /assets/ directory
You could achive this by setting the appropiate CSS class and setting the image background in you stylesheets. Something like:
<div class="container home">
And in a SCSS file:
.container.home{
background-image: image-url("hom.jpg");
}
Keep in mind that image-url is a helper that should be used in .scss files.
I tried this in my pages:
<div style="background-image: url('/assets/hom.jpg')">
And it seems to work locally, but after a push on Heroku the images aren't displayed online.
In addition, the image appears cut, because is referred to a DIV, and I want it referred to the body of my pages.
One way to do this is by adding the controller and action names to the body tag in your layout. Then you can rely on pure CSS to serve different images. In your layout file you can do this:
<%= content_tag :body, class: "#{controller_name}-#{action_name}" do %>
<!-- Your layout content, or everything that should be in the body tag goes here -->
<% end %>
This would give you the following HTML:
<body class="items-index> <!-- or whatever the current controller/action are -->
Then, you can add the relevant CSS.
.items-index {
background-image: image-url("items_index.jpg");
}
.pages-home {
background-image: image-url("pages_home.jpg");
}
You can wrap this in a helper to make it cleaner.
def class_for_body
"#{controller_name}-#{action_name}"
end
Or even:
def body_tag(&block)
content_tag :body, yield, class: "#{controller_name}-#{action_name}"
end
See controller_name and action_name methods provided by Rails.

how do I call the asset_pipeline for only 1 file?

I'm trying to understand the asset_pipeline.
I basically have all my website-wide code in style.css.scss (which is #imported in application.css.scss)
I also have a few miscellaneous controllers that have code that I split off into a separate file only to be loaded on that page. For example, in my profiles_controller I have profiles.css.scss and profiles.js
in the documentation it says i can conditionally include those by typing:
<%= stylesheet_link_tag params[:controller] %>
and a similar one for javascript_include_tag
The problem is when i view source on any of my pages that dont have a controller stylesheet it is a 404 file not found. I dont want to have 10 blank files for each controller and 10 blank javascript files (those controllers have hardly any extra css or code, so i put it in the main scss file) ... am i doing this wrong?
Note:I have removed include tree from the JS and css files, as i dont want any file in that folder being included
In your application layout file, add yield statements like this to pull in the stylesheets you include as one-offs in different views:
= stylesheet_link_tag "application"
= yield :stylesheets
= javascript_include_tag "application"
= yield :javascripts
Then in each view file where you want to include stylesheets:
= content_for :stylesheets do
= stylesheet_link_tag "controller_name"
= content_for :javascripts do
= javascript_include_tag "controller_name"
This will include those files in only the views you need them in.

Rails 3.1: Trouble on displaying images in mailer view files

I am using Ruby on Rails 3.1 and I would like to add my web site logo (that is, an image handled through the new Asset Pipeline) to an e-mail.
If in my mailer view file I state the following:
<% # Note: '#root_url' is my application hostname (eg: http://www.mysite.com) %>
<%= link_to image_tag( "#{#root_url.to_s}/images/logo.png"), #root_url.to_s %>
it doesn't work in production mode (that is, I cannot display the logo image) because I think the Asset Pipeline uses the Fingerprinting technique and in the received e-mail it doesn't. Inspecting the HTML logo element in the e-mail I get something like this:
<img src="http://www.mysitecom/images/logo.png"> # without Fingerprinting
How can I solve the problem?
In my production.rb file I have the following commented out code:
# Enable serving of images, stylesheets, and javascripts from an asset server
# config.action_controller.asset_host = "http://assets.example.com"
in config/environments/production.rb (and other enviroment files needed) add:
config.action_mailer.asset_host = 'http://mysite.com'
after that rails will automatically add hostname in front of paths generated by image_tag
# haml
= image_tag 'foo.jpg'
will become
#html
<img alt="" src="http://mysite.com/assets/foo.jpg" >
...same apply for image_path
#haml
%table#backgroundTable{background: image_path('email-background.jpg'), width: '100%', :border => "0", :cellpadding => "0", :cellspacing => "0"}
will become
<table background="http://mysite.com/assets/email-background.jpg" border="0" cellpadding="0" cellspacing="0" id="backgroundTable" width="100%">
watch out!!!
# this will make your emails display images
config.action_mailer.asset_host = 'http://mysite.com'
is different than
# this wont make your email images work
config.action_controller.asset_host = "http://mysite.com"
All of these answers are assuming you're using the asset pipeline, but from your example, you're specifying an image in /public/images - this is not part of the asset pipeline, so all the asset_path based answers won't work, and further your initial fingerprinting supposition is incorrect.
If you put an image in /public/images, you want your image tag to have a src of http://yoursite.com/images/the-image.jpeg, no fingerprint, no asset path, nothing - just hard-code it into your view:
<img src="<%=#root_url%>/images/logo.png">
But, you have to actually have the file in that location! If you have your image in /app/assets/images, then you'll need to use image_tag and the asset pipeline as others have answered.
An alternative is to include the image logo in the mail. The mail could also be viewed offline. You can add the logo in you Mailer class, with the following code..
attachments["your_logo.png"] = File.read("#{Rails.root}/assets/images/your_logo.png")
This code will include your image to the mail. I believe when you want to show your attachment in the mail you need to do the following:
Class YourMailer < ActionMailer::Base
def sendmail
.....
attachments.inline['your_logo.png'] = File.read("#{Rails.root}/assets/images/your_logo.png")
end
And in your sendmail.html.erb view you can use the image_tag method:
<%= image_tag attachments['your_logo.png'].url %>
note: if the mail does not get shown correctly you can alternatively try the solution at:
Rails attachments inline are not shown correctly in gmail
Your mail can then also be viewed offline correctly.
Have you tried adding something like this
config.action_mailer.default_url_options = { :host => 'www.example.com' }
to your config/enviroments/production.rb file
Try:
<%= link_to image_tag( "#{#root_url.to_s}/assets/logo.png"), #root_url.to_s %>
You're giving image_tag an absolute url so it thinks it doesn't need to do any fingerprinting or anything else other than regurgitate the string you gave it. I would try
link_to( image_tag('logo.png'), #root_url)
You'll also need to set actioncontroller's asset host to get rails to generate a full url for the image rather than just a path
One caveat to note: if you change the image then the fingerprint will obviously change and so the inage URL in all of your previously sent emails will become invalid. You may wish to consider inline images, although obviously these increase the email size
Try out this one
<%= link_to image_tag( asset_path, 'logo.png'), #root_url.to_s %>
Adding mode:'rb' worked for me:
attachments.inline['Logo.jpg'] = File.read(File.join(Rails.root,'app','assets','images','Logo.jpg'), mode: 'rb')
If you compile your assets:
RAILS_ENV=production bundle exec rake assets:precompile
and use asset_path in your view:
<%= link_to image_tag( asset_path('logo.png') ), #root_url.to_s %>
--it should work in both development and production. This is the way I do it my views, and .css.scss.erb stylesheets. I assume that it doesn't make a difference that it is a view for a mailer.
make sure your html page have follwing header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
and render image as:
<%= image_tag('http://'+#url+'/images/header.jpg')%>
or
if you want link to image then
<%= link_to image_tag('http://'+#url+'/images/header.jpg'),root_path %>
#url = 'your website address'

How do I link to an external stylesheet in Ruby on Rails?

I'm trying to link to the YUI reset stylesheet in my RoR layout using the following statement...
<%= stylesheet_path("http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css") %>
but this path is being echoed on my page instead of being applied. I got this syntax from the the rails docs. What am I doing wrong?
Thanks!
Try this
<%= stylesheet_link_tag 'application','http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css' %>
Try stylesheet_link_tag as described in the Rails API Docs

Resources