Well, I am using "font-awesome-rails" gem. I am pretty much used to font-awesome outside Rails, but I guess it's not that popular among Rails community.
Once installed, it creates icons using the format
<i class="nameoftheicon"> </i>
I thought of using it for my site logo, which would consist of the icon from font-awesome and some text. So I tried:
<%= link_to "", root_path, class: "icon-puzzle-piece icon-2x" %>
<%= link_to "My site", root_path, id: 'logo' %>
It works, but when I hover, they act as two different elements.
What is the Rails way of combining an image and a text under a single <a> tag.
And is there any popular Rails alternative to font-awesome?
Pass a block to link_to and the block will be linked
<%= link_to path, id: "logo" do %>
<i class="icon-puzzle-piece icon-2x"></i>
My Super Site
<% end %>
Try it,
You can directly mention rails image_tag in link_to as,
<%= link_to image_tag("image_name")+"your text", root_path, :class=>"icon-puzzle-piece icon-2x" %>
Yes you can. For complex anchor such as images, just remove the first argument(the link text or anchor), and attach a block after the method.
link_to(root_path){<i class="icon"></i>}
The content inside block will become the anchor.
Hey guys this is a good way of link w/ image (it has lot of props in case you want to css attribute for example replace "alt" or "title" etc)
<%= link_to image_tag("#{request.ssl? ? #image_domain_secure : #image_domain}/images/linkImage.png", {:alt=>"Alt title", :title=>"Link title"}) , "http://www.site.com"%>
Hope this helps!
Yes, you are using a vector font as image but you can use image_tag too, for example:
<%= link_to user_root_path, :class=> "user" do
image_tag("image.jpg", :alt => current_user.name) +
t("dashboard.my_account")
end %>
Don't forget link together both of them with "+"
Related
I want to create a link(HTML Anchor Tag) that contains an img Tag element in my application. I used link_to to produce links but don't know how to generate HTML tags within them.
Do i need to use javascript/jQuery rather than trying it in my application. Any suggestions would be appreciated.
Here it should look like
<a href='/groceries'>
<img src="location" alt="Groceries.jpg">
</a>
You can find this in documentation, anchor seems as:
<%= link_to "Comment wall", profile_path(#profile, anchor: "wall") %>
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
For your case:
<%= link_to groceies_path(anchor: 'header') do %>
<%= image_tag('test.png', alt: 'Grocieries') %>
<% end %>
I've been looking everywhere for a good explanation of how to add glyphicons to rails link_to and button_to helpers, but I've found very little. What I've gathered so far has led me to this:
<li>
<%= link_to deals_path, class: "btn btn-default" do %>
<%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%>
<% end %>
</li>
This doesn't work though and I think the one example I found was from Bootstrap 2. Can anyone point me to a good resource on this, or provide a quick example? Thanks in advance!
I found the answer to this here
The basic form of a glyph link in rails looks like this:
<%= link_to deals_path, class: "btn btn-default" do %>
<i class="glyphicon glyphicon-euro"></i> Dashboard
<% end %>
Modify as needed. The second example in that link didn't work for me, I assume because I'm using the rails_bootstrap_sass gem? Regardless, the above form worked for me.
If you're looking for an inline method, This works for me:
<%= link_to '<i class="glyphicon glyphicon-th-large"></i> Dasboard'.html_safe, deals_path, class: 'btn btn-default' %>
The <i></i> can go either side of the 'Dashboard' I've only tested this particular example out in Rails 4 with Bootstrap 3 but this was the method I used prior in Rails 3 and Bootstrap 2
Hope this helps somebody in the future
Edit: Removed comma to render the glyphicon correctly.
In my experience the answer by #settheline is almost ideal, but on my website it changes the font relative to other buttons without icons. So I ended up doing something like this:
<%= link_to deals_path, class: "btn btn-default" do %>
<span class="glyphicon glyphicon-euro"></span> Dashboard
<% end %>
And this seems to keep the font equal to other iconless buttons.
Using slim, here's link_to:
= link_to deals_path
span.glyphicon.glyphicon-th-large
and button_to:
= button_to deals_path, class: "btn btn-primary"
span.glyphicon.glyphicon-th-large
It's possible to add more text/etc. to the button as well, just don't nest it under the glyphicon's span.
Using HAML:
= link_to deals_path, class: "btn btn-default" do
= "Dashboard"
%span.glyphicon.glyphicon-th-large
You can use the font-awesome-rails gem for this purpose, and then do:
<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>
&For those who'd avoid unnecessary repetition of the long-winded thing..
i shove something like this in my app/helpers/application_helper.rb:
module ApplicationHelper
def glyph(icon_name_postfix, hash={})
content_tag :span, nil, hash.merge(class: "glyphicon glyphicon-#{icon_name_postfix.to_s.gsub('_','-')}")
end
end
Example .erb usage:
<%= button_tag glyph("heart-empty", aria_hidden: "true", foo: "bar"), type: "button", class: "btn btn-default" %>
<%= link_to glyph(:eye_open) + " Oook", some_path, class: "nav" %>
I am using this in Rails4 but i think it might also work in Rails3
Ooook! i also happened to notice this advise from the bootstrap (Currently v3.3.5) docos:
Don't mix with other components Icon classes cannot be directly combined with other components. They should not be used along with
other classes on the same element. Instead, add a nested <span> and
apply the icon classes to the <span>.
Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements.
There is faster and easier way to apply (fontawasome) icons without additional gem installations.
You may follow this pattern:
<%= link_to root_path, class: "nav-link" do %>
<i class="fas fa-pencil-alt"></i>
<% end %>
Of course, you must first create a kit FREE account from the FONTAWASOME and it must be set in your application.html.erb's head to use the icons.
Follow the instructions given here to create an account in Fontawasome (if you don't have one yet).
If you need an example, you can check out my repo in GitHub
My original intention was to display some text on the image. At the same time, when we click the images, the webpage will be redirected.
And I use link_to function with div containing background image.
The code is like this:
<%= link_to raw('<div style="background-image:url(<%= image_url '1.jpg'%>);width:340px;"> This is a test</div>'),index_by_dvp_domain_path %>
But the system tells me there is SyntaxError.
You can pass link_to a block that contains the content you want to display. So instead of going with the link_to(display, url, options={}) you get link_to(url, option={}, &block) where you can do.
<%= link_to index_by_dvp_domain_path do %>
<div style="background-image: url(<%= image_url '1.jpg'%>);width:340px;">
This is a test
</div>
<% end %>
After you do this you can treat it like normal html.
As always, I'd recommend trying to move any style out into it's own separate stylesheet.
Best way to do it this is used following
<%= link_to index_by_dvp_domain_path do
content_tag(:div, 'This is a test',:style=>"background-image:url(#{image_url} '1.jpg');width:340px;" )
end
%>
OR
<%= link_to content_tag(:div, 'This is a test',:style=>"background-image:url(#{image_url} '1.jpg');width:340px;" ), index_by_dvp_domain_path %>
Please have a try with
<%= link_to raw('<div style="background-image:url(#{image_url '1.jpg'}%>);width:340px;"> This is a test</div>'),index_by_dvp_domain_path %>
I think using Link_to as below would be much more simpler even when you have a big block including multiple tags:
<%= link_to desired_path do %>
<div class="linkable">
<another div>
... some other tags
</another div>
</div>
<% end %>
and I recommend you to use a different background color for mouse over events because it shows the viewer that it's a link!
In you .css file:
.linkable:hover{
background-color: red;
}
Im so surprised to see that no one came up with the regular way of doing it in Rails.
<%= link_to image_tag("/images/1.jpg",:size => "340X340"),index_by_dvp_domain_path %>
I have this image link:
<%= link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image" %>
and I want to wrap a div containing 1. text and 2. a list with a link and text around that image link. I want the image to be on the left, and the div to be on the right wrapping around the image.
Assuming you don't need any of the fancier features offered by the link_to helper, the easy answer is to just use an anchor tag directly.
<a href="<%= profile_path(comment.user.profile) %> class="comment_image">
<div>
Some stuff -- whatever
<%= image_tag(comment.user.profile.photo.url(:tiny)) %>
Some more stuff -- ya know...
</div>
</a>
would you care if i posted it in HAML(same thing as erb just without the <% %> and closing tags:(sort of pseudo code for html)
%ul
%li
= link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image"
%div.user-comments
comment
username etc
%li
rinse-repeat
AND dont forget to clear your float on the li!
then in your css, just float comment_image and user-comments left.
I want to output the following with Ruby on Rails link_to and image_tag methods:
Lorem Ipsum <img src="/images/menu-arrow-down.gif">
What would be a good way in Rails?
You can use blocks as an alternative to the string interpolation with correct usage html_safe. For example:
<%= link_to '#' do %>
Lorem Ipsum <%= image_tag('/images/menu-arrow-down.gif') %>
<% end %>
Or a shorter way is
<%= link_to image_tag('image/someimage.png') + "Some text", some_path %>
Why not just use a link to and image tag?
<%= link_to "hiii #{image_tag(yourimagepath)}", "link_path" %>
You could also try the appending done above (string + image_tag), but it will throw an error if one of those things becomes nil. Using interpolation, it will just show a blank image(or string) if it is nil.
For Rails 3, you will need to use html_safe:
<%= link_to "hiii #{image_tag(yourimagepath)}".html_safe, "link_path" %>
link_to(image_tag("image.png", :alt => "alt text", :class =>"anyclass"), image_url)
I cannot seem to figure out how to add a comment to #corroded's answer. However, if you are using Rails 3, his answer will not work as expected. It might not be immediately obvious how to fix this, at least it wasn't for me. I knew I needed to add html_safe, but put it in the wrong place. In retrospect, it was obvious, but I thought I would include it here for others like me who make the "rookie" mistake.
<%= link_to "hiii #{image_tag(yourimagepath)}".html_safe, "link_path" %>
be careful though, if you are using a user assignable variable for "hiii" you need to sanitize it first.
<%= link_to (h(my_model.some_string) + image_tag(yourimagepath)).html_safe,
"link_path" %>
Note that there is no issue with my_model.some_string or yourimagepath being nil because both h() and image_tag() return strings when passed nil.
I prefer this approach in HAML
= link_to root_path do
= image_tag "ic_launcher.png", size: "16x16"
Home
Here's a cool way to use a link_to to include an image, and a mailto href with Text (displayed next to the image):
<%= link_to image_tag("image.png") + " some#email.com",
href: "mailto:some#email.com" %>
Giving you something like this in your view (the entire image and text become an mailto href):
For me this worked just fine:
<%= link_to(image_tag(<URL>,style),<URL>) %>
i found out this also which worked.
link_to(image_tag("/images/linkd.png",:alt=>"twt"){},:href=>"some_url",:target=>"_blank")