Rails link_to open a larger image - ruby-on-rails

My app showing thumbnails, but if I click the thumbail, its downloaded, not showed up. How its work? link_to image_tag('lorem'), image_tag('lorem_big')?
<% for photo in #article.attachments %>
<%= link_to image_tag('dinamic/'+photo.id.to_s+'/'+'thumbs_'+photo.image_file_name), "#{request.env["HTTP_HOST"]}/public/images/dinamic/"+photo.id.to_s+"/"+"originals_"+photo.image_file_name, :class => 'single_image'%>
<% end %>

Have you tried different browsers?
Try to capture HTTP communication how your app server sets Content-Disposition header attribute.
If you cannot control your server, you can do minicontroller which will render one tag with that image :)

<% for photo in #static.attachments %>
<a id="single_image" href="<%= image_path("dinamic/"+photo.id.to_s+"/"+"originals_"+photo.image_file_name) %>" > <%= image_tag('dinamic/'+photo.id.to_s+'/'+'thumbs_'+photo.image_file_name) %> </a>
<% end %>
Image_path solved this issue.

Related

How to make the images from the bootstrap cards clickable on your index pages?

I was using the Bootstrap cards for my index page for my app but wasn't really liking the event details button, I feel it's more modern to just click on the image.
I found SOF articles pointing to how to use clickable images if the image was local and/or hosted somewhere online, but nothing that pointed to using images that are already a part of your database.
The code I had before was:
<% if artist.avatar.attached? %>
<%= image_tag artist.avatar, class: "even-size-artist" %>
<% else %>
<img src=<%= "https://dancewise.s3.amazonaws.com/misc-images/Blank+Avatar.png" %> class="even-size-artist">
<% end %>
The code that I found that will give you the option to have the top image clickable to the appropriate record is as follows:
<% if artist.avatar.attached? %>
<%= link_to image_tag(artist.avatar, class: "card-img-top artist-img").html_safe, artist %>
<% else %>
<img src=<%= "https://dancewise.s3.amazonaws.com/misc-images/Blank+Avatar.png" %> class="card-img-top artist-img">
<% end %>
Hopefully, this helps someone else out there learning RoR!

link_to rails_blob_path when clicked does not match the same image of image_tag inside the swiper slide div

In my view when i click the link_to (the slides i see side by side), does not match the slide. I am using active storage each home has many attached home_photos. This is ok. But my issue is i don't know how to implement this on my swiper slider. My images are showing on my slide side by side perfectly, but when i click a slide, it's supposed to pop-out, and it does, but it only shows one image, the first one from home_photos[0]. Please help.
<div class="swiper-wrapper">
<!-- Slides-->
<% #home.home_photos.each do |photo| %>
<div class="swiper-slide">
<%= link_to rails_blob_path(#home.home_photos[0]), "data-toggle" => "gallery-top" do %>
<%= image_tag photo, class: 'img-fluid' %>
<% end %>
</div>
<% end %>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
I think you have to change #home.home_photos[0] to photo in link_to:
<%= link_to rails_blob_path(photo), "data-toggle" => "gallery-top" do %>

How to make image link to (be clickable) to page

I am using CarrierWave and Amazon S3 to upload images to my application, which is working correctly. But I also want to have the image link to the corresponding Movie. I have tried the following but it doesn't work. I have looked but can't seem to find a solution this simple problem.
<% if #movie.avatar? %>
<%= image_tag(#movie.avatar_url), link_to #movie %>
<% else %>
<img src="http://placehold.it/150x200">
<% end %>
Try this:
<%= link_to image_tag(#movie.avatar_url), #movie %>
Use this
<%= link_to (image_tag(#movie.avatar_url)), #movie %>

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

How to generate a proper hyperlink by leveraging link_to()?

<h3>Social Media Handles: (<%=link_to 'Seel All Social Media', influencer_influencer_social_media_handles_path(#influencer)%>)</h3>
<ul>
<% #influencer.influencer_social_media_handles.each {|social_media_handles| %>
<li><strong>Social Media Name:</strong> <%=social_media_handles.social_media_name%><br />
<%=link_to(social_media_handles.social_media_handle) %>
</li>
<% } %>
</ul>
This <%=link_to(social_media_handles.social_media_handle) %> is actually a link to a twitter page i.e http://twitter.com/#!/SrBachchan. But when I click on it nothing happens. How can I make this link working so it will take me to a twitter page.
Thanks
Please take a look here for a comprehensive usage of link_to tag in rails.
<%= link_to 'Twitter Profile', social_media_handles.social_media_handle %>
The method is link_to(:body, :url, :options)
So, you should:
<%= link_to 'Twitter Profile', social_media_handles.social_media_handle %>
Assuming that social_media_handles.social_media_handle returns "http://twitter.com/#!/SrBachchan" that will generate:
Twitter Profile

Resources