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") %>
Related
What is a propper way of adding alt attribute to image_tag in rails?
I have tried these options, and they are giving me a syntax error or alt is just not showing:
<%= image_tag #product.asset.url, alt: "#{#product.name} image", class: 'w-100' %>
<%= image_tag (#product.asset.url, alt: "#{#product.name} image"), class: 'w-100' %>
<%= image_tag (#product.asset.url, alt: "#{#product.name} image", class: 'w-100') %>
The following code should work fine.
<%= image_tag(#product.asset.url, alt: "#{#product.name} image", class:'w-100') %>
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? %>
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
I'm trying to change the color of my navbar brand name from this:
To this :
For any text within a paragraph, for example, I use this html code:
<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>tack</h1>
However I am not sure how to do it as I used embedded Ruby code for my navbar brand name
<%= link_to 'PaperStack', root_path, class: "navbar-brand" %>
Any help?
You can include the spans in your link_to text, just call html_safe on the string.
<%= link_to '<span style="color: #e74c3c">P</span>aper<span style="color: #e67e22">S</span>'.html_safe, root_path, class: "navbar-brand" %>
<%= link_to root_path do %>
html-code-here
<% end %>
As answered here: How do I wrap link_to around some html ruby code?
How about a hepler method:
def navbar_brand_text
content_tag :span, 'P', class: 'letter-p' +
content_tag :span, 'aper', class: 'paper' +
content_tag :span, 'S', class: 'letter-s' +
content_tag :span, 'tack', class: 'stack'
end
Then you could use it like this:
<%= link_to navbar_brand_text, root_path, class: 'navbar-brand' %>
Then use CSS to stype the spans:
.letter-p {
color: #foo;
}
/* etc... */
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