link_to image_tag with options (rel, title)

Question

In HTML I would write:

<div class="imageRow">
    <div class="single">
        <a href="image.jpg" rel="lightbox" title="my caption">
            <img alt="" src="imagethumb.jpg">
        </a>
    </div>
</div>

But I have to adapt it for ruby on rails and I'm quite new to it... so I tried:

<div class="imageRow">
    <div class="single">
        <a href=<%= link_to image_tag("image.jpg") %> rel="lightbox" title="my caption">
            <%= image_tag("imagethumb.jpg") %>
        </a>
    </div>
</div>

...but it doesn't work as the "rel="lightbox" title="my caption">" part is not applied but appears written on the html part + I see the 2 images while I should only see "imagethumb".

I also tried:

<div class="imageRow">
    <div class="single">
        <%= link_to image_tag("image.jpg", :rel=>"lightbox", :title=>"my caption")
            <%= image_tag("imagethumb.jpg") %>
        %>
    </div>
</div>

I see both image too...

What should I do to obtain the equivalent of the HTML code I wrote up?

score 5 · Answer 1 · answered Jun 10 '13 at 15:15

5

Try this

<%= link_to image_tag("imagethumb.png", :alt => ""), "image.jpg", :rel => "lightbox", :title => "my caption" %>

P.S: Untested

answered Jun 10 '13 at 15:15

usha

28,973
5
72
93

1

+1 especially because when tested within my project, this works. – djoll Nov 28 '13 at 06:49

score 3 · Answer 2 · answered Jun 30 '13 at 13:46

If I am not mistaken, you should do it like this:

<div class="imageRow">
    <div class="single">
        <%= link_to image_path("image.jpg", :rel=>"lightbox", :title=>"my caption") do %>
            <%= image_tag("imagethumb.jpg") %>
        <% end %>
    </div>
</div>

So, use image_path to get just the link to the image, and image_tag to get the thumbnail-image as content of the link.

score 0 · Answer 3 · answered Jun 10 '13 at 15:24

You can use rail's link_to as a containing block for child objects just as you would if you manually wrote <a href="">code</a>

<%= link_to yourLink, :rel => "lightbox", :title => "my caption" do %> //the 'do' here makes the link a block(contains child ojects)
  <%= image_tag yourImage, :alt => "myImageDescription" %>
<% end %> // note the tags surrounding 'end'.  Dropping the equals sign means not to return the code within the tags to HTML, which we don't want to do here.

score 0 · Answer 4 · answered Jun 30 '13 at 09:43

This is how it worked for me with Slimbox 2

<a href='<%= picture.asset.url(:large) %>' rel="lightbox" title="<%= picture.caption %>">
  <%= image_tag(picture.asset.url(:small)) %>
</a>

this way it has a small preview and opens up as large in the lightbox (if you have paperclip), else just input the url of the image. It may also work with link_to and rel: 'lightbox', not sure tho.

score -1 · Answer 5 · answered Jun 10 '13 at 15:17

-1

you can use simple <a> tag:

<a href=<%= image_tag 'image.jpg' %> rel="lightbox" title="mycaption">
  <%= url "path/to/imagethumb.jpg" %>
</a>

answered Jun 10 '13 at 15:17

Vinicius

123
9

Please try to use pure rails code...It would be something like <%= link_to image_tag("imagethumb.png", :alt => ""), "image.jpg", :rel => "lightbox", :title => "my caption" %> – Jean Jun 30 '13 at 15:37

link_to image_tag with options (rel, title)

5 Answers5