I'd like for users to be able to upload images to use as their backgrounds on their profiles (users#show). Viewing source of some sites that have that functionality (e.g. Twitter), it seems that users are assigned an html body tag and the corresponding CSS background-image for that body tag is linked to the image they have uploaded.
Any ideas of how I can do this?
(Note: I am currently using paperclip for image upload, but will integrate that with an Amazon S3/similar service)
I thought about injecting a ruby instance variable to a CSS file/script from my users controller so that it would be dynamic, but I don't know if this is even possible. There's probably a better way.
I have implemented something similar in a project. I'll lay down the concept and give you a code example. I'll leave you to understand the logic or take bits of the code example to suit your kind of system implementation.
I would use a helper for this.
In app/views/layouts/application.html.erb
<head>
...
</head>
<body style="<%= show_user_bg %>">
...
</body>
In app/helpers/application_helper.rb
module ApplicationHelper
def show_user_bg
"background:transparent url(#{#user.background_image}) no-repeat fixed left top;"
end
end
Just make sure your user model has the background_image column and this is set.
Using a helper makes it more dynamic and cleaner. For example, you can throw in conditions:
module ApplicationHelper
def show_user_bg
# Show user background
if user_signed_in?
"background:transparent url(#{#user.background_image}) no-repeat fixed left top;"
# Otherwise, show a default background image
else
"background:transparent url('/images/default_bg.png') no-repeat fixed left top;"
end
end
end
Hope that helps!
Since it's data dependent, I would simply use an in-line style in the view.
Assuming the controller has loaded a model instance into #profile that has a Paperclip attachment attribute called background_image, ...
<body style="background-image:url(<%= #profile.background_image.url %>)">
...
</body>
There are various way to do this. I've seen the google search page. It added an image tag in the bottom of html body with absolute position to 0,0 and sets index as -2.
another way is to set the background image of body or your main div, you can do this using inline css attribute like
<body style="background-image: 'url(<%= user_image -%>)'">
where user_image is a helper method which calculates background image url for current user, this should handle the default image too i.e if user has not selected any image then it should return a default image probably a transparent image.
Related
I installed Nokogiri into a Rails project and it can currently run "Nokogiri HTML Parser Example" with no issues.
I'm trying to create a Rails project that will parse a movie script from IMDB, conduct a word count, then display the most occurring words from that section. I've identified that the scripts are kept in a "table":
<table width=100% border=0 cellpadding=5 class=scrtext><tr><td class=scrtext><pre><html><head></head><body>
<b>PERSON1</b>
They say some dialogue
<b>PERSON2</b>
They say some more
</pre></table>
I would like to exclude the text within the <b>/<b> brackets as well.
I've been setting this up like the example above in the controller, and have gotten as far as taking in the URL:
#Save as a temp. file
tmp_file = open('http://www.imsdb.com/scripts/Authors-Anonymous.html')
#Parse the temp. file
doc = Nokogiri::HTML(tmp_file)
I'm having difficulty understanding how to set the CSS constraints to grab this table. I understand that it's between those <pre>/<pre> tags, and I've followed a number of tutorials for this but I still don't understand how to set up those constraints.
I feel that the code following this should be something like this, but I'm not awfully sure:
doc.search("//pre")
How do I set up Nokogiri's CSS constraints to pull the content between two tags such as <pre></pre>, and then filter out irrelevant tags such as <b></b> that will occur within the output?
You can use the css method selector: doc.css('pre b') which will get every <b> tag(s) inside every <pre> tag(s):
doc.css('pre b').each do |b_tag|
# b_tag will be a String containg like `<b>this text is bold</b>`
end
It might not be the most elegant solution but it did the trick for me.
In the controller, I defined the following:`
def index
page = [THE_URL]
doc = Nokogiri::HTML(open(page))
#content = doc.css('b').remove
#content = doc.css('pre')
puts #content
end
and then in the View;
<%=#content %>
I have a list of comments on my page that is zebra colored to aid distinction between each comment.
I achieve the zebra colouring using the rails cycle helper in the partial I use for each comment:
<div class="span9 <%= cycle("odd_response", "even_response") -%>">
I dynamically update this list via a form that prepends a new comment to the top of list via AJAX when the user submits a new call.
As I use the same partial as the template to render this new comment the comment is only colored as the "odd_response" irrespective of the color of the previous response i.e. it starts the cycle process again.
How do I get the partial to respect the order of colors present in the table that it is being prepended to?
My solution would be to drop the cycle call and use this CSS for the zebra stripes.
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
This works in all modern browsers, no IE7/8 support.
I ended up resolving this by placing some custom JavaScript in the create.js action that first checked what the background colour of the last comment was and then altered the new comment to the opposite colour immediately after rendering the object on the page.
I've been looking everywhere for code that would allow me to make the banner ads on my site show on the homepage only. Right now they show up site-wide and the advertisers are asking me to change it. I've unsuccessfully tried looking up the right code, but so far it has proven impossible. I'm only coming up for fixes for Blogger and Wordpress, and I need something for tumblr.
Any help would be much appreciated.
Thanks!
Output certain div only on homepage? — No.
Show certain div only on homepage? — Yes, with css snippet.
How to output certain div only on homepage?
Tumblr has only two main types of page:
PermalinkPage
IndexPage
IndexPage include 3 sub-types:
TagPage
DayPage
SearchPage
Tumblr has no else statement for if blocks, that's why it is impossible to output banner ads only on home page — it would be outputted on other index pages.
How to show certain div only on homepage?
You can hide #banner ads with css using this tip:
Step 1. In your Tumblr markup to your html change your body tag to this snippet:
<body class="
{block:IndexPage} index-page {/block:IndexPage}
{block:TagPage} tag-page {/block:TagPage}
{block:DayPage} day-page {/block:DayPage}
{block:SearchPage} search-page {/block:SearchPage}
">
Step 2. Then make sure you output #banner only for index pages:
{block:IndexPage} <div id="banner">...</div> {/block:IndexPage}
Step 3. After that you will have four classes for control demonstration(show/hide) of your #banner div, this css snippet must be added to Custom CSS field on customize page:
.index-page #banner {
/* not neccessable, only for tip's logic demonstration */
display: block;
}
.tag-page #banner,
.day-page #banner,
.search-page #banner {
/* hide on all index pages except home index-page */
display: none;
}
Notice: this tip only hide div, not non-output.
I posted screeenshots of Edit HTML button and Custom CSS field to show the simplicity of the second method and to cheer you up.
Could you use javascript to only should the page on the homepage?
I have been working on a Rails template recently called BaseApp2. You can see it on GitHub here: http://github.com/dannyweb/BaseApp2
There is an administrators section setup which allows the management of Users and I am working on the ability to add announcements to the public site via the admin section.
What I would really like to do, is come up with two or three alternative colour schemes for the interface and allow the administrator to choose which they prefer and select it. The chosen colour scheme would then show for all users from then on.
I have literally no idea how to go about doing this - ideally I am looking for a tutorial of some sort or something equally beginner-esque.
Thanks in advance!
Thanks,
Danny
It should be fairly easy and there are many ways to do it. You will need to save that preference somewhere. Maybe add an attribute to your user/person model that will specify that preference. And in your admin layout template, based on that preference, add an additional stylesheet. Or, add a class to the body tag and in your style sheet subclass the styles:
body {
background-color: white;
}
body.sunshine {
background-color: yellow;
}
The layout template:
<%= stylesheet_link_tag(current_user.theme) if current_user.theme %>
or
<body class="<%= current_user.theme || '' %>">
First off, let me say that I am familiar with content_for. It's not really what I'm looking for here.
I want to allow a template and any number of partials to build up, say, a list of JavaScript files I want to load, and pass them up to the layout for it to process and add to the <head> area. I only want to load the files if the page actually needs them, so I'd rather not just put them all into the layout. Nor does it seem like something to be handled by the controller, because these are mainly view-specific changes.
I've tried using content_for to return an array of names, but that doesn't seem to work. It also wouldn't allow for multiple partials to add their own prerequisites to the list. I've also tried using helper functions in the template/partials to add to a list, and then using that list in the layout, but it appears that the layout code is evaluated before the template code.
Any ideas? This isn't JavaScript-specific, by the way; I simply need a way to pass Ruby objects from the template/partials to the layout.
EDIT: Per request, an example. css_import is just a helper I wrote that emulates a CSS #import.
# In the layout
<style type="text/css">
<%- yield(:foobar).each do |foo| -%>
<%= css_import foo %>
<%- end -%>
</style>
# In the template
<%- content_for :foobar do
['layout', 'recipes', 'user']
end -%>
# The actual output from View -> Source
<style type="text/css">
</style>
Maybe you should have a look at what content_for is doing? It just executes the block you assigned to the call and stores it in an instance variable. When calling yield with the right parameter it return the instance variable.
It should be perfectly possible to create two helper methods of your own to accomplish your goal, for example:
def register(key, value)
#registry[key] = value
end
def fetch(key)
#registry[key]
end
You can make these functions as fancy as you like, for example when the registry contains only locations to JavaScript files, you can return HTML JavaScript include tags instead of just the file path.