i'n a mine rails app i'm changing the html part of a page (localhost:3000/feeds), in the file index.html.erb i set the background this way
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
body
{
background-image:url("../../assets/images/wwi.jpg");
}
</style>
</head>
</html>
the directory are set this way:
->app
->assets
->images
->wwi.jpg
->views
->feeds
->index.html.erb
but when i start the rails server and the go to localist:3000/feeds there's no background (i had no problem for background-color)
You are not using rails asset pipeline by writing your css inside views. If you look at docs it says
Asset pipeline concatenate assets, which can reduce the number of requests that a browser makes to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application
*So you should use it and for that first of all remove all the styles from your layout or views and you need to include rails application.css in your layout file by
<%= stylesheet_link_tag "application", media: "all" %>
This tag will make rails use look for your styles inside assets/stylesheets/application.css. Now you need to require the style.css.erb you just made to include your styles by
*= require style
Now inside your style.css.erb you can have your style like this:
body{
background-image: url(<%= asset_path 'wwi.png' %>)
}
Update:
If you want to use sass instead then your file would be style.css.scss and can use rails image-url helper, so you can do:
body{
background-image: image-url('wwi.png');
}
For more details refer to rails asset pipeline
When using the assets pipeline, path should be relative to the root
background-image:url("/assets/wwi.jpg");
images is assumed.
Also you can use the assets helper
<%= asset_path 'wwi.png' %>
I recommend you read the documentation of the assets pipeline
http://guides.rubyonrails.org/asset_pipeline.html
Related
I have a div that has a dynamic background image. The background image url is logged in a database. I'd also like to replace this image with a dynamic GIF (which is logged in the same table) when the div is hovered over...but I'm struggling with figuring out a clean way to do this.
Here is a brief snippit from the html.erb file I'm working with...it seems that I cannot use the hover selector in in-line HTML, so I'm not sure if I need to resort to JavaScript? I'd essentially like to replace blah.jpg with blah.gifon:hover.
<% #workout[:image_url] = "blah.jpg" %>
<% #workout[:gif_url] = "blah.gif" %>
<div class="image-wrapper">
<div class="workout-image" style="background-image:url(<%= #workout[:image_url] %>)">
</div>
</div>
EDIT:
It works now using <script> tags.
<head>
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover { background-image:url("blah.gif");}</style>');
</script>
</head>
Unfortunately this can't be solved using raw CSS, as you can't target pseduo-selectors with inline CSS. However, it's possible to get around this using JavaScript. What you need to do is add the following to your page:
<script>
document.head.insertAdjacentHTML('beforeend', '<style>.workout-image:hover{background-image:url(<% #workout[:gif_url] %>);}</style>');
</script>
That should append CSS styling of .workout-image{background-image:url("blah.gif");} to the end of the head section.
Another solution would be to simply use an external css.erb file instead of a .css file, in order to process Ruby variables directly:
.workout-image:hover {
background-image:url(<% #workout[:gif_url] %>);
}
Be aware that using ERB in CSS will only work if the file is loaded ad-hoc, and will not work if you precompile your assets! You can get around this using the SCSS Rails Preprocessor, assuming you have access to, and want to use, SASS.
Hope this helps :)
In my CSS, I have examples like this:
#defaultCountdown span.countdown_section {
color:#fff;
padding:7px 15px!important;
margin-bottom:2px;
font-weight:300;
background:url(../img/bg-white.png);
text-align:center
}
If you see the background tag, there's a url.
How do I serve this via staticfiles?
Thanks.
To answer your comment about using static in css or js files.... It could be done. Basically you would define a route and view just like for html pages.
But, this is strongly discouraged for a production level site. You will have a significant increase in page response time if you do this rather than serving these as static files.
To accomplish this, you simply pass content_type into your HttpResponse for your related view:
return HttpReaponse(my_dynamic_css, content_type="text/css")
css is a static file, as is your images and .js. So you use relative paths to reference them, unless you've got a specific need to use static tags for backgrounds, then you can move the style tag for background outside your css and into into your html:
<div class="generic" id="#defaultCountdown span.countdown_section" style="background: url('{% static 'img/bg-white.png' %}');></div>
If you need to use {% static 'url' %} in your CSS or JS, the easiest would be to define the CSS in a <style> block in your HTML template's <head> and the JS in a <script> block at the bottom of your template. Any CSS or JS that doesn't require the use of {% static 'url' %} can still go in separate .css and .js files.
I'm using bootstrap-sass in my rails app which works fine however one particular page 'welcome' I want the body to have have different color.
If I open the welcome.scss file in the assets and add
html, body {background:#000000;}
I get no change and the bootstrap white overrides the change I expect to happen.
How do I get it to change for that page.
It was my understanding that the page css only loads in when you are on that page - am I wrong and would it just be the same as writing in the Application.scss file?
It was my understanding that the page css only loads in when you are on that page
The CSS which loads is dependent entirely upon the stylesheet_link_tag in your layout:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
The way in which you load this determines the stylesheets which load each page.
--
For example, the standard Rails way to load your stylesheets is to use the "sprockets" files & directives to append the required files into your application.css sheet. Although this works in any other sheet, it's mainly used with application.
Since you're using bootstrap (which tells you the following):
#app/assets/stylesheets/application.css
/*
*= require bootstrap_and_overrides
*/
... you'll need to make sure you know which files you want to load. Specifically, your assertion that page-specific CSS being loaded is false; you either hard-code the loads, or put the code into a single file (EG application):
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application, controller_name #=> loads controller CSS page each time you load a new controller %>
--
For you, I would do the following:
#app/views/layouts/application.html.erb
<body class="welcome if action_name == 'welcome'">
Then you'd be able to use the following:
#app/assets/stylesheets/application.css
body.welcome {background:#000000;}
If you wanna customize the style for a specific controller or action you can follow this:
Add controller name/ action name (if needed) to layout file, application.html.erb is in my example:
<!DOCTYPE html>
<html>
<head>
<!-- My header template -->
</head>
<body class="<%= controller_name %>_body action_<%= action_name %>">
<!-- My body template -->
</body>
</html>
Add css in a suitable file. Eg: controler_name = 'home', action = 'index'. So my css will be (Notice that I don't use action = 'index' here to css, it may be needed in your case)
body {
background: NORMAL_COLOR;
&.home-body {
background: SPECIAL_COLOR;
}
}
If you are loading that css file only in that particular page, then it will be applicable only to that page. Otherwise it will apply to all of the pages.
So in nutshell, it is same as writing in Application.scss.
css classes applied in same order as you defined in declaring them. So to apply welcome.scss you need to declare it after bootstrap css file.
Further you can make use of !important
This is how you can define page specific css files in <head> section:
In your application.html.erb you can define
<% if content_for?(:head) %>
<%= yield(:head) %>
<% else %>
# default css file
<% end %>
And in your pages (welcome page for this particular instance), you can define your respective css file like this:
<% content_for :head do %>
<link rel="stylesheet" href="/assets/welcome.scss">
<% end %>
Hope it helps!
I'm looking to do a random image in ruby on rails in the background via css. The difference being I want to also display a attribution to the person who took the image. I'm only going to have 5 images so don't see the need for a database. I want to keep it low maintenance. What is the best way to extend the following?
<style type="text/css">
html {
background: url(<%= randomized_background_image %>) no-repeat center center fixed;
}
</style>
Now in your application_helper
def randomized_background_image
images = ["assets/foo.jpg", "assets/random.jpg", "assets/super_random"]
images[rand(images.size)]
end
Well, first a disclaimer, I don't think you should be doing this. Embedding Ruby in CSS is pretty sloppy. Why? It crosses abstraction layers and mixes concerns unnecessarily.
Ruby (and erb templates generally) really don't have a great model of your document object, but guess who does? Jquery! :) So as an alternative, take a look at the $ examples in the answers to this question: Random background images CSS3
That said, to do this in Ruby, the way to do it would be to have a hash object for each of your images then put them in your array, ie:
image_hash = Hash[url: 'http://', attribution: 'Author K. Dude']
=> {:url=>"http://", :attribution=>"Author K. Dude"}
image_hash[:url]
=> "http://"
array_of_image_hashes = Array[image_hash]
=> [{:url=>"http://", :attribution=>"Author K. Dude"}]
array_of_image_hashes.first[:url]
=> "http://"
This way you could share the same local variable (a random index of your array) in your view both at the style level and just as a string in a span underneath it. So, <%= random_image_result[:url] %> in style and <%= random_image_result[:author] %> in a span. I'm guessing you're doing Rails, and if so, I'd recommend putting your generator method in a helper, which is included automatically at the controller level so it is available to your view.
When building a static HTML site, you can set the base url like so <base url="http://localhost:8888/mysite" />. Supposedly when you insert, say, an image, you can do so from that base url like so <img src="/img/logo.png" />, which is equivalent to <img src="http://localhost:8888/mysite/img/logo.png" />
My problem is that these relative links don't work when I move the site around, which is a pain because I'm trying to share it with someone on Dropbox. I thought I could just chage the base url to <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, but the image links are looking here: <img src="http://dl.dropbox.com/img/logo.png" /> instead of the full base URL I set in the head.
Why is this?
Lose the leading / to make it a relative URL:
<img src="img/logo.png" />
There are 3 types of URL:
Fully Qualified, e.g. http://example.org/path/to/file
Absolute, e.g. /path/to/file (assuming the link comes from any page in the example.org domain)
Relative, e.g. path/to/file (assuming the link comes from the root (/) "folder" or there is a base URL http://example.org/)
or to/file (assuming the link comes from within the 'path' "folder" or the base URL is http://example.org/path/)
I'm aware that I'm a little late to the game on this one, but you should really be using Rails asset tags instead of raw HTML here.
For instance, instead of using:
<img src="/img/logo.png" />
You should use:
<%= image_tag 'logo.png' %>
Assuming that:
You're using .erb files for your source pages
You've set the image asset path to /img/ in your config.rb file
Alternately, you could reference CSS with:
<%= stylesheet_link_tag 'file.css' %>
Javascript files can be included with:
<%= javascript_include_tag 'file.js' %>
Since Middleman allows you to control whether or not assets are referenced relatively (by uncommenting some lines in config.rb), using Rails asset tags make much more sense than static HTML ones. I highly recommend switching if you haven't already done so. If you have any further questions about ay of these tags or the ERB syntax, feel free to ask away on here!