I'm new to Ruby on Rails and I'm trying to extract information I have from certain fields in a database and use them as means of styling.
For example, I have a height and width field in my 'Student' database. I wish to extract the height field content and width field content as parameters for my CSS file to set the height and width respectively of a div tag.
I am having a lot of trouble doing this. I have linked my stylesheet in the view index.html.erb by:
<%= stylesheet_link_tag 'students' %>
which is under assets/stylesheets/students.scss
I am not sure how to proceed.
If the styling is database driven, you should not rely on sprockets which generates static stylesheets during deployment.
A simple solution is to build css content using ERB.
<style>
.students-container {
height: "<%= #height.to_i %>px",
width: "<%= #width.to_i %>px"
}
</style>
You can extract out the style node into a partial and reuse it in multiple templates.
Seems like an inline style would work fine here. In your ERB, in your student divs, just do:
<% #students.each do |student| %>
<div style="height: <%= student.height %>px; width: <%= student.width %>px;">
<!-- other student stuff -->
</div>
<% end %>
It's either this or generating a unique CSS class for every student first, then using it in each div.
Related
I am attempting to create an application.html.erb file that holds a background that will be displayed on all of my pages.
Using the w3school's guide, I put the filename of the background (which is in the same folder as application.html.erb) in the body tag and it does not change anything.
<body background='bk.jpg'>
The content goes here
</body>
Any help solving this issue would be greatly appreciated.
For a Rails project, the best approach is to use image_path.
In your case, something like the following should work:
<%= image_path 'path_to_your_image/bk.jpg' %>
However, the correct way to do this is to store the image in the projects app/assets/images folder, and the asset path will look for this there. Then, you just need to update the helper to:
<%= image_path 'bk.jpg' %>
So:
<body background=<%= image_path 'bk.jpg' %>>
# Might need quotes around this: <%= image_path 'bk.jpg' %>, haven't been able to test
Or, better:
<%= content_tag :body, style: { background: image_path('bk.jpg') } do %>
Your content
<% end %>
Better still would be to have the css background set in the CSS rather than inline, though that's perhaps another question.
I have been trying to find something about embedding HTML code inside a partial argument for days but I have not found anything so I'm guessing it isn't possible. But it seems like it should be.
I have a static page in my Rails app which has a lot of sections and each section can have subsections. I could just make the entire page just plain HTML. But I didn't want to repeat the same formatting over and over in case I want to change classes or something else.
So I have the following _section.html.erb partial file:
<div class="row">
<h4><%= heading %></h4>
<% subsections.each do |section| %>
<% if section[:header] %>
<h5 class="primary-text"><%= section[:header] %></h5>
<% end %>
<p><%= section[:body] %>
<% end %>
</div>
That works fine. But what if I want to include a link to a page or an email inside one of the subsections? It doesn't work just by passing it in as part of the quotes text. It shows the actual HTML tags.
Is there a real way to do this or should I give up and just write plain HTML with repeated section formatting?
You mark your text as html_safe. For example:
<%= section[:header].html_safe %>
But I would suggest using sanitize method because of security resonons:
<%= sanitize section[:header] %>
Probably sometimes you will want to configure sanitize method. Here you can read how to do this:
http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html
You can read more about security here:
http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
I have a controller main_pages in a rails project that holds two views: home.html and team.html. All my css and styling for home and team has gone into main_pages.css.scss, but I would like to separate some of the styling that is specific to each of those pages into respective css stylesheets, such as home.css.scss and team.css.scss. Creating these stylesheets is not an issue, but how would I go about linking them?
I don't even know how home.html and team.html are linked with main_pages.css.scss, since I don't see any code in the header of application.html that links the two. Could someone explain how this link is made?
In you application.html.erb, add the following snippet somewhere in the head section:
<head>
<%= content_for?(:custom_styles) ? yield(:custom_styles) : '' %>
</head>
And then in your view file (e.g home.html.erb), you can add custom stylesheets to the current view with:
<% content_for :custom_styles do %>
<%= stylesheet_link_tag "custom_stylesheet_name" %>
<% end %>
Now everything you add to the content_for block in the page view file will be added to the header, so if you add a stylesheet link tag it will also be added to the header.
I have a clickable div but instead of using the full address for the link, I'd like to use ruby's 'link_to' syntax. How would I point to "facebook_path" instead of the full address?
<div id="item_1", onclick="location.href='http://www.facebook.com';" style="cursor:pointer;"> Home </div>
You can do that using the following syntax:
<%= link_to "http://www.facebook.com", id:"item_1" do %>
#your code here
<% end %>
I hope this is what you were looking for
I'll assume you are just using erb, but you can pass a block to the link_to helper. So your example would be:
<%= link_to 'http://www.facebook.com' do %>
<div id="item_1" style="cursor:pointer;">
Home
</div>
<% end %>
In light of your comments, let me explain the difference between css and rails (which is what your issue is):
You can create an a block by using the following code:
<%= link_to your_path_helper, class: "class", id: "id" do %>
Stuff here
<% end %>
This will render the following HTML:
Stuff here
The question you have now is "how do I make this style the same as another element (div or similar)". The way to do this is to use css:
#app/assets/stylesheets.css
a.id {
color: #000; /* makes the link color black */
text-decoration: none; /* Removed underline */
}
CSS works by styling the different elements of your page. The class and id selectors allows you to identify the specific items, whilst the css properties help you pick the right styling
Your issue is you're trying to style your a element in the same way as your div. You need to select the a element & style that in your CSS
Using Refinery CMS to create product pages in our prototype. An admin can add a link to the main product page, and it will display similar to
Product Links
www.example.com/product/1
www.example.com/product/2
here is a screenshot of how it currently is being displayed
However, there will not always be a case when the ink is added. And this looks weird to have that field but no links in there because every element has margin-bottom:30px;
So my question is how do I make the element not show up at all if nothing is passed to it. Here is the code for the element:
HTML
<div class="contentPageElement">
<h3>Product Links</h3>
<%= link_to #discussion.link.to_s, #discussion.link %>
</div>
you can either put it in helper,or do something like this.
<% unless #discussion.link.empty? %>
<div class="contentPageElement">
<h3>Product Links</h3>
<%= link_to #discussion.link.to_s, #discussion.link %>
</div>
<% end %>
I think this is what you're looking for: http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to_unless