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? %>
Related
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
am on rails 5 and my categories have images. i want to use those images as backround images but when i set in the styling the url do not change
<div class="grid-category">
<% #servicescategories.each do |category| %>
<%= link_to servicecategories_path(slug: category.slug ), :style=>'background-image: asset-data-url("category.category_image");', class: "category-item" do %>
<h3> <%= category.name %></h3>
<% end %>
<% end %>
</div>
what am i doing wrong here
You need to interpolate the value of category.category_image
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: url(<%= asset_path('category.category_image') %>)">
<h3> <%= category.name %></h3>
</div>
<% end %>
You seems to have the incorrect syntax to use the rails interpolation inside the style attribute,
Try this,
<%= link_to servicecategories_path(slug: category.slug ),
:style=>"background-image: <%= asset-data-url(category.category_image) %>",
class: "category-item" do %>
this works
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: <%= asset_path('category.category_image') %>">
<h3> <%= category.name %></h3>
</div>
<% end %>
I'm trying to re-write the code below so that it will use an image_tag. I know how to apply a class attribute, but how do I apply a custom attribute like "data-dark-logo"?
I'm learning how to develop and am building an application that has the following HTML:
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="external_assets/images/logo-dark.png">
<img src="external_assets/images/logo.png" alt="Canvas Logo">
</a>
<a href="index.html" class="retina-logo" data-dark-logo="external_assets/images/logo-dark#2x.png">
<img src="external_assets/images/logo#2x.png" alt="Canvas Logo">
</a>
</div>
I'm trying to rewrite this so it will function in my Rails app.
Just pass the data attributes as a hash.
<%= link_to '/link', class: 'standard-logo', data: {'dark-logo' => 'external_assets/....' do %>
<%= image_tag ('external_assets/...') %>
<% end %>
Like this?
<div id="logo">
<%= link_to("index.html", class: "standard-logo", data-dark-logo: "external_assets/images/logo-dark.png") do %>
<%= image_tag("external_assets/images/logo.png", alt: "Canvas Logo") %>
<% end %>
<%= link_to("index.html", class: "retina-logo", data-dark-logo: "external_assets/images/logo-dark#2x.png") do %>
<%= image_tag("external_assets/images/logo#2x.png", alt: "Canvas Logo") %>
<% end %>
</div>
Edit:
To make the data-dark-logo pull your asset from the asset pipeline, try using the asset_path helper:
<%= link_to("index.html", class: "standard-logo", data-dark-logo: asset_path("external_assets/images/logo-dark.png")) do %>
The solution I came up with looks like this:
<div id="logo">
<%= link_to welcome_index_path, class: 'standard-logo', data: {'dark-logo' => asset_path("front/logo-dark.png") } do %>
<%= image_tag("front/logo.png") %>
<% end %>
<%= link_to welcome_index_path, class: 'retina-logo', data: {'dark-logo' => asset_path("front/logo-dark#2x.png") } do %>
<%= image_tag("front/logo#2x.png") %>
<% end %>
</div>
But I'm not sure if this complies with Rails best practices
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
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") %>