I am trying to give one of my views a background image. I have found info for rails three on how to do this, but it does not seem to work for me. Here is the link to the info I used: http://makandracards.com/makandra/2977-declare-different-css-background-images-for-different-locales
Here is my welcome.css.scss:
.container {
background-image: url(images/image.jpg)
}
here is welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
</body>
</html>
Firstly, you won't need to determine a class for the body tag - just call body in your CSS (and override for the specific page you want the background image on)
Secondly, you need to use asset_path helpers:
#app/assets/stylesheets/application.css.sass
body
background:
image: asset-url("image.jpg")
This is the "correct" way to call this, as if you use .erb or any other other methods with the asset pipeline, you run the risk of losing your functionality when you precompile the assets for production
The trick is to use the rails asset preprocessors to allow the use of dynamic paths for your assets. The paths will be used depending on whether you're using your assets dynamically, or statically (in production)
Considering you have image.jpg in your /assets/images folder, the above code should work for you. The SCSS version would be:
#app/assets/stylesheets/application.css.scss
body
{
background: {
image: asset-url("image.jpg");
}
}
--
Update
You can call the welcome css like this:
#app/views/layouts/application.html.erb
...
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
CSS File name
welcome.css.scss -> welcome.css.scss.erb
Content
background-image: url("<%=image_path('image.jpg')%>");
I know this question was over a year ago, but none of the answers helped me so I figured out something more unorthodox in terms of managing the background image.
<% if action_name === "homepage" %>
<body class="body-change">
<% else %>
<body>
<% end %>
And then in the css.scss you could have something like:
.body-change {
background: red;
}
So I'm giving the body a certain class if a condition is met. So if I am on the homepage, the body's class will be something else and then I can add detail to that class in my CSS/SCSS. I hope this helps someone because it worked for me. You can also make the if statement more specific by also specifying a controller_name if you have multiple actions with the same name.
Please update your css file as
.container{
background-image: url("/assets/tooltip.png")
}
Related
I've been trying to add a background image to my rails app but no matter what I try I cant get it to work, this is basic stuff and I don't know what's going wrong. I had it working yesterday but my computer crashed and I hadn't saved my view file after adding the background image.
I've tried:
<body background="bg.png">
as well as:
background-image: url(/assets/bg.png);
and even:
body {
background: url(bg.png);
}
but nothing will work, what am I doing wrong?
To serve the image from asset-pipeline do the following:
body {
background: image-url(bg.png);
}
To use it inline under .erb files:
<div style="background-image: url('<%= asset_path('some_image.jpg') %>') ">
What you are trying to do would work if the image was placed under public folder.
Similar questions: How to set a background image in rails from css?
If the image is in public directory then
background-image: url('/bg.jpg')
If image in app/assets/images/bg.jpg
background-image: url('/assets/bg.jpg')
Also, set the below mentioned setting in developement.rb(or other environment on which you are running the code)
config.serve_static_assets = false
config.assets.compress = true
config.assets.compile = false
This is my first post here and it might sound awfully stupid. Im building my first rails app.
I have this line in my index.html.erb
<img src="/assets/rand_front/<%= #random_image%>", style='height:50vw;width:100vw;margin-bottom:20px;' >
I want to use image_taginstead of the img src
What is the correct way to wrap it around the code?
So far I've tried <%= image_tag ( "/assets/rand_front/<%= #random_image%>", style='height:50vw;width:100vw;margin-bottom:20px;') %>
and
<%= image_tag ( "/assets/rand_front/<%= #random_image%>"), style='height:50vw;width:100vw;margin-bottom:20px;' %>
and many other versions, but none seems to work, what am I doing wrong? and how should I write it properly?
this <%= #random_image%> bit is taking this variable from the index method in the controller.
def index
#products = Product.all.order(created_at: :desc).group_by(&:category_id)
#images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg"]
#random_no = rand(10)
#random_image = #images[#random_no]
end
<%= image_tag "rand_front/#{#random_image}", style: 'height:50vw;width:100vw;margin-bottom:20px;' %>
image_tag will automatically add assets at start of the path
check Image Tag for Documentation
This is what Ruby on Rails is explicitly processing
<%= image_tag("source", {:style => "width:100px;"}) %>
(meaning that Ruby allows you to use this code with out the ( { } ),
For me, first starting out its important to know that this is how Ruby on Rails actually running the code.
In other words YES you could leave the ( { } ) formality out because Ruby will understand your code, hope that helps to clarify some...
If I am not mistaken you have a rand_front folder in your assets folder so you should call image_tag("#{#random_image}") since by default the image_tag helper should check all the folders in the assets directory for the image name
For the CSS properties you can consider using the options hash which would allow you to pass in the CSS properties as keys with your desired values
image_tag("#{#random_image}", height: 20, width: 20) You can check out the documentation in the previous answer
I have a div tag in my rails application (new.html.erb):
<div style="background: url(images/background.jpg) no-repeat;">
</div>
The image is not appearing and I get a ActionController routing error No route matches [GET] "/locations/images/background.jpg"
The problem is that Rails is adding locations/ to the file path which is wrong since my image is correctly located in app/assets/images/background.jpg.
Even if I include the absolute path of the file I'll get locations added to the beginning of it.
Here are my routes (not sure if that helps but it won't hurt!):
locations GET /locations(.:format) locations#index
POST /locations(.:format) locations#create
new_location GET /locations/new(.:format) locations#new
edit_location GET /locations/:id/edit(.:format) locations#edit
location GET /locations/:id(.:format) locations#show
PATCH /locations/:id(.:format) locations#update
PUT /locations/:id(.:format) locations#update
DELETE /locations/:id(.:format) locations#destroy
You need to generate the url using the image_path helper inside your view:
<div style="background-image: url('<%= image_path('background.jpg') %>'); background-repeat: no-repeat">
</div>
The helper is important, because in production your assets could be fingerprinted or hosted remotely (e.g. on a CDN). The helper will always generate the correct url.
Edit:
To reference a background image in a css file, you have two choices. Using base rails, you can add .erb to the end of your css filename and use code substitution as above.
stylesheet.css.erb:
.myclass {
background-image: url(<%= asset_path 'background.png' %>);
}
Alternatively, if you are using the sass-rails gem, you can use image-url or asset-url helpers:
stylesheet.scss:
.myclass {
background-image: image-url('background.png'); // or asset-url('background.png');
}
See the Asset Pipeline Guide for more information.
I want to design a layout with images in header. I try to put in layout.tml a division with html component "img" but the atribute "src" depends on the page where you are. How can I solutionate this?
Using CSS is a great option; the other is to let Tapestry generate the proper image URLs for you:
<img src="context:images/image.png" alt="Logo"/>
In this case img is not a component, but is a dynamic element; the src attribute is bound to context:images/image.png1, which resolves to the proper Tapestry URL to the image; in fact, the URL will be longer than you expect, as it will include (in Tapestry 5.4) a hash code based on the content, and processing will include E-Tag support and a far-future expires header.
You could make the header blank and use Internal css to make the background of the header change
for example, you create the header block
<div class="headerBG"></div>
and then in each page 1 include
<styles>
.headerBG {
background-image: page1Header.png;
}
</styles>
in page 2
<styles>
.headerBG {
background-image: page2Header.png;
}
</styles>
and so on
The other way would be with javascript
<script>
currPage = location.pathname.substring(1);
if (currPage == index.html) {
document.getElementByID("imageid").src="image1.png";
}
</script>
I've been trying to make the styling added to this flash message in my application layout work as desired:
<div id= "notice"><% flash.each do |key, value| %>
<%= value %>
<% end %></div>
Here's the CSS:
#notice {
background: #e6efc2;
color: #264409;
border-color: #c6d880;
padding: 0.8em;
margin-bottom: 1em;
border: 2px solid #ddd;
}
Now the problem with this is that the flash message is rendered with ajax, and so the styling is supposed to appear only when the flash message appears. However, this is not the case. A green div appears even when there is no flash message, and this looks rather awkward.
Now I've tried something like this:
<div id= "notice"><% flash.each do |key, value| %>
<div class="<%= key %>"><%= value %></div>
<% end %></div>
where I use the "<%= key%>" class for styling. I leave the <div id="notice"> on the outside for the ajax rendering because it doesn't seem to pick up the div within the ruby block. However, the CSS styling does not get rendered with the "<%= key%>" class. So it seems like i'm stuck between two bad options:
Have an awkward green div in my app at all times that only looks how it should when the flash message is rendered or
Not have the awkward green div, but then have no styling for the flash message so that it just looks like some awkward text.
Is there any way that I can get the best of both worlds?
I would setup display: none; for the #notice box and have this in the jQuery code
$('#notice').css('display', 'block')
You can have that right after you fill in the code and before you do the fadeIn, make sure you use callbacks so things don't jump around everywhere.
Can you share your AJAX that is generating this?
One thing I would try in your situation is using jQuery's append() method to add the flash DIV to the top of the page when the flash message is triggered, and then take it away after some timer.
--EDIT--
Here's a "for instance" example:
Let's just say your ajax call is hitting FoosController#Update, and is sent from the #show action.
In the show view I would have something like:
<div class="notices"></div>
I would put your flash messages in a partial (makes the ajax code easier), so something like
views/shared/_flash.html.erb...
<div class="flash"><% flash.each do |key, value| %>
<%= value %>
<% end %></div>
In jQuery + ERB I would write an update.js.erb file in the views/foos/
$('div.notices').append('<%= render 'shared/flash' %>');
Then to make it automatically fade out you could include a script (either in the specific view with flash messages or in the application.js file) like:
$(document).ready(function() {
$('div.flash').delay(5000).fadeOut();
});
That would make any div.flash fade out and disappear after 5 seconds. Alternatively you could make it go away after click using the jQuery click() method.
I hope that helps.
--EDIT AGAIN--
According to this railscast, to do this with RJS:
In your view create:
<div id="notices"></div>
In your RJS file do:
page.insert_html :bottom, :partial=>'shared/flash'
It's still a good idea to put your flash messages in a partial. Be sure and put the flash messages in div.flash as described in the first edit, and you should be good to go.
Yes. You can apply the styles with javascript when your ajax request comes in, or have the content of the request be wrapped in a container that has styles unique to it, which is not present on the original page.
Basically, hide the 'green box' until it is populated or send the 'green box' in with the ajax.