Ruby on Rails - Link_to with icon instead of a slash - html

i want to show an small icon instead of a textlink.
using this piece of code:
<li>
<%= link_to '', :class => 'nav-icon' do %>
<span class="icon-home">Home</span><%= root_path %>
<% end %>
</li>
but rails now shows me the icon followed by a /
is there any way to avoid that behavior?

<li>
<%= link_to root_path, :class => 'nav-icon' do %>
<span class="icon-home">Home</span>
<% end %>
</li>
The / displayed after your icon is generated by <%= root_path %>.
<%= %> seems:
please ruby, write this on my html.
so ruby wrote your root_path variable, and your root_path is equal to /.
remove your <%= root_path %> after <span class="icon-home">Home</span> and everything will be ok.

Following should work
<li>
<%= link_to '', :class => 'nav-icon' do %>
<span class="icon-home">Home</span>
<% end %>
</li>
Reason: the / is coming due to this code <%= root_path %>
and writing just <%= link_to '', :class => 'nav-icon' do %> will create link with empty href
I think you should give your path in the first argument of link_to as follows
link_to(url, html_options = {}) do
# your icon code
end

Related

Rails: Image as a link

I want to make a link in my nav bar. The problem is that I want an image as the clickable link. So (click on image -> next Site)
this is the code I use now for linking with the site.
<a class="nav" <%= link_to "Home", posts_path %> </a>
You can provide a block to link_to
<%= link_to posts_path do %>
<%= image_tag "image" %>
<% end %>
<%=link_to(image_tag("the_best_image_path.jpg", class: "img_class_goes_here"), posts_path, class: "navbar-brand"%>
<a class="navbar-brand" href="/" style="float:none">
<%= image_tag "yourlogo.png", width:150 %>
</a>
If you're using Active Storage on Rails, you could do this:
Say, you have a model named Product and an attributed named image:
For the Index page
<%= link_to product do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
OR
<%= link_to(product) do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
For the Show page
<%= image_tag(#product.image, class: 'product-image__img') if #product.image.attached? %>

Separating posts in a newsfeed using CSS/BootStrap

I'm currently trying to render a newsfeed, similar to that of FB on a Rails application I'm working on. Unfortunately, I'm not the greatest when it comes to CSS and I'm having some issues trying to display different posts. This issue occurs whether I'm using BootStrap or plain CSS. I do believe it's something to do with the loop that is created by <% #posts.each do |post| %> Currently, whenever a new post is made, it wraps inside the previous post; thus the more posts that are made, the thicker the border gets.
Image:
<% if #posts.any? %>
<% #posts.each do |post| %>
<div class="well">
<%= post.user.first_name %> <%= post.user.last_name %><br>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if #user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "Likes: #{post.get_upvotes.size}" %>
<% if post.user == current_user %>
<%= link_to "Edit", edit_post_path(post) %>
<%= link_to "Delete", post_path(post), method: :delete %>
<% end %>
<div id='comments_div' class="comments-index">
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
<% else %>
No posts have been added!
<% end %>
</div>
Any help would be greatly appreciated! Thanks.
Edit: OK, please take a look at the new image -- hopefully that will make the issue slightly more obvious. Additionally, I've removed all the dead tags and replaced them with just one: BootStrap's 'well' class. So, there you have it. All the information you need is within the code above.
from your description it sounds as though an html element is not being properly closed. Run the page source through an html validator and that could show you the problem.
If you don't want to take a structured problem solving approach, try adding another </div> to the end of your posts-index container.
Your issue is very simple, just that its not clear due to poor indendation.
A simple way to explain what you did is:
<-- if (start) -->
<-- do (start) -->
<-- post (start) -->
(post is not ending here, hence it breaks the layout)
<-- do (end) -->
<-- if (end) -->
<-- post (end) -->
Mistake in the above should be simple to understand so if you move your last </div>(of the well class) just before the second last <% end %>(of the <% #posts.each do |post| %> loop) it should fix the issue. So the last few lines should be
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
Sounds to me like it could be a misplaced
<% end %>
or a missing
</div>
that is causing this behavior.
Proper indentation will point to where to close off actions or divs

Ruby localization

I have to localize a web site, everything is almost done, except I have ran into two problems. The code below is for a small input form, but where are the strings? There is a label for a text field and a button.
Secondly, I am receiving an error:
"undefined method `-' for "translation missing: lv.date.order":String".
Where do i have to create the translation? In the .yml file? If so, how?
Thanks in advance!
<%= form_for([:admin, #publisher]) do |f| %>
<% if #publisher.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#publisher.errors.count, t(:error)) %> <%=t(:prohibited_saved)%></h2>
<ul>
<% #publisher.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
This error means that Rails cannot find the translation for date.order in current locale file.
You should have a lv.yml file inside config/locales with this content:
lv:
date:
order:
- :day
- :month
- :year
It will instruct rails to show dates in a format: day/month/year

how include span in link_to erb

I want to write this HTML in ERB:
One<span id="red>Two</span>
How do I include the span?
<%= link_to "ONETWO", root_path, id: "logo" %>
just use the block form of this helper :
<%= link_to root_path, id: :logo do %>
One<span id="red>Two</span>
<% end %>
Other helpers support this form, like content_for.
Inline:
<%= link_to(raw('One<span id="red">Two</span>'), root_path, id: "logo") %>

rails sample app: how to render a text form to the right of each user listed (one per row)

Ruby on Rails:
I'd like the <%= render 'shared/intro_form' %>
to render a form for every user row displayed by <%= render #users %>
I know that I'll need to embed the former line in the latter somehow, perhaps with an "each...do" statement, but I'm having trouble figuring out the right syntax. Thanks!
<% provide(:title, 'All users') %>
<h1>All users</h1>
<%= will_paginate %>
<ul class="users">
<li><%= render #users %></li>
<li><%= render 'shared/intro_form' %></li>
</ul>
<%= will_paginate %>
http://guides.rubyonrails.org/layouts_and_rendering.html
3.4.5 Rendering Collections
<%= render :partial => "shared/intro_form", :collection => #users %>