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.
Related
I'm developing a Django webapp, I created the layout.html and extended to all the HTMLs. Now, i need to take a <main> block and put on another file, because the same block is used twice in the project. As far as I know, I can't make a {% load static %} inside an already extended file {% extends 'layouts/layout.html' %} .
I tried with the <div data-include="path/file.html"></div> and with the
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
and also using <iframe> but nothing. I guess the problem is that I'm using a custom script, and it must necessarily be paired with the HTML block using it. Any other ideas? I can't stand repeating code snippets...
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 :)
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
I recently begin to use cdn to speed up images. The origin img src is something like /images/effect.png , I want to add a prefix to all article content image src.
div.entry-content p > img {
content:attr(src,'http://cdn.example.com'+src)
}
I know that the best solution is to change all articles. Another solution is to use javascript to do it(but it seems still to download origin img).
I just want to use pure css.
(update 1)
I'm using jekyll as backend. Because I use markdownpad to write articles, it can only preview img with  , so I donnot want to use {% img url %}.
Can anyone help me add img src a prefix?
CSS absolutely can't do this. Maybe <base> would do it, but that would affect your intrasite links and JS/CSS URLs as well.
You have to change them all manually. Sorry. Hope you've got a template engine on your backend.
I am using Octopress and I know that in order to add an image in my post, instead of writing:
<img src="src" alt="alt" class="class" />
I can write:
{% img class src alt %}
And, instead if writing:
text
I can write:
[text](href)
But how can I write:
text
?
If this is not possible and the only solution is to write the html tag, where and how can I add ruby code translate this for example: [text](href target) to this: text?
In addition, where can I find a list of all those html octopress shortcuts?
This is actually controlled by the Markdown engine used to process the text rather than any Octopress code. Depending on the engine you are using, you can write
[text](href){: target="target" }
This is called an "inline attribute list", and is an extension to the Markdown syntax. It is supported by Maruku, as well as Kramdown.
(Note that Maruku is Jekyll's default Markdown engine, so this syntax is supported if you haven't touched this aspect of the configuration.)
Use the Markdown Syntax:
[text](#target)
For text
[text](href){: target="target" }
The {% img class src alt %} is a octopress tag, see the plugin docs for more tags.
The [text](href) follow the markdown sintax, and does not let you add classes, attributes, or ids to elements.
So to workaround the target problem use the snipet below in your custom header layout, and added the #_blank anchor at the end of the url, to open in a new window.
<script type="text/javascript">
function addBlankTargetForLinks () {
$('a[href^="http"],a[href*="#_blank"]').each(function(){
$(this).attr('target', '_blank');
});
}
$(document).bind('DOMNodeInserted', function(event) {
addBlankTargetForLinks();
});
</script>