How do you get this div to wrap around an image link? - ruby-on-rails

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.

Related

How to add IMG with in ANCHOR while using link_to in Rails?

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 %>

How should we combine the div with link_to in Rails?

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 %>

anchor tag in link_to

Found it difficult to frame the question, here's my problem.
alert.html
<div class="alert_text">
<%= link_to "Comment", :action=>:show, :id=>lp.id %>
</div>
when I click on the link it takes me to show page
show.html
table is displayed at beginning of the page after that, below part of code.
<div id="comments">
<%= render :partial=>'comments' %>
</div>
what I need is, when I click on link Comment it must load show page as normal but should direct to comments part of page.
Edit: Just like as it happens in this stackoverflow.com, on top left StackExchange when you click on inbox message.
It sounds like what you want is the anchor option with a path helper. Assuming you're using RESTful routing, you should be able to do something like:
<%= link_to "Comments", my_model_path(lp, anchor: 'comments') %>
You would need to change my_model to the whatever your resource is called. So if you have resources :articles in routes.rb, it would be article_path(lp, anchor: 'comments')
Give your comment div an ID and use it link this:
<%= link_to "Comment##{lp.id}", :action=>:show %>
If the div comment has your ID, it will straight go to that spot.

Can I use link_to to link an image and a text

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 "+"

Rails 3: link_to and image_tag

How can I have an image tag linking to the file background.jpg in my public/images and when clicked on redirect the user to the root_url (So the content of the page is in a container and if the user clicks on the background image are redirected to home?) Thanks!
Sure:
<%= link_to(image_tag("background.jpg", :alt => "home image", :width => 100, :height => 100, :title => "Click here to return to Home") "/") %>
Most of rails tag helpers accept a block, which means you can use do to simplify your life. Here I use a block with link_to:
<%= link_to root_url do %>
<%= image_tag "background.jpg" %>
<% end %>
In this case, link_to expects the next parameter to be the path and the block emits what the anchor wraps.
In general I try to keep to the one tag helper per line rule unless its super trivial, so prefer this technique when the line would otherwise become crowded. An advantage to doing it this way is since tags are on different lines, errors are easier to identify.
If you need other options to go with it, add them like you usually would. For example I'll add a css class:
<%= link_to root_url, :class => 'imagelink' do %>
...
I was searching for same thing while ago, and i found the Rails way to do so.
Lets say you want to you HTML page to render follwoing code
<a title="Return Home" class="logo" href="/pages/home">
<img width="200" height="50" src="logo.png" alt="Logo Image">
</a>
Where 'pages' is the controller and 'home' is the action. Here's the Rails way.
<%=link_to(image_tag("12roots-logo.png",:size => "209x50", :alt=> "12roots"),
{:controller=>"pages", :action=>"home"}, :title=>"Return Home", :class=>"logo") %>

Resources