Rails: Embedding URL within Image Tag - html

I have the following in my html.erb file:
<%= image_tag "logo.jpg", :class => "img-responsive", :href =>"http://www.google.com" %>
However, this is not a clickable link. I assumed the :href = > would make it so. Does anyone have any ideas of making your rails image a clickable link? I tried the following logic which I found on another Stack Overflow Post:
<%= link_to image_tag("logo.jpg", :class => "img-responsive"), "http://wwww.google.com" %>
But this makes the image smaller and adds an odd half circle at the bottom of the image. I also cannot add :style or :class working properly.
Anyone have any ideas?

Not sure if this is the best way, but you could just wrap the image tag with regular anchor tags:
<a href="http://www.google.com">
<%= image_tag "logo.jpg", :class => "img-responsive" %>
</a>

The second way is technically the right way to do it, however since its giving you issues could always try this:
<%= link_to 'http://google.com' do %>
<%= image_tag 'logo.jpg', class: 'img-responsive' %>
<% end %>
As for the class/style not adding properly I've always done it as
class: 'this-is-a-class'
and
style: 'padding-left:30px;'

Related

Remove <a> tag from rails "link_to" methdo

I need to remove <a> tag from rails link_to method. Here is current code and result:
<%= link_to "ESP", :locale=>'es'%>
<a href="/es/blog/crazy_page">ESP</p>
Here is my desired outcome:
/es/blog/crazy_page
Reason I need this is so I could make "alternate" link tag in header for each language. Can't seem to find this anywhere.
Use url_for method
<%= url_for(:locale => 'es') %>

HTML in Rails, aligning a link and a back button from different files

I have a new.html.erb and a _form.html.erb
How do you align a button and a link if the back link is in the new.html.erb file while, a submit button would be in the _form.html.erb?
new.html.erb
<%= render 'form' %>
<%= link_to 'Back', project_path %>
_form.html.erb
<%= simple_form_for(#trip) do |f| %>
<%= f.input :project_name, class: 'form-control' %>
<div class="top-buffer">
<%= f.button :submit, class: "btn btn-primary pull-right" %>
</div>
<% end %>
Is there a rails way to align the back and the button together? What would be the conventional way?
Should I just simply put the back button in the _form.html.erb? Will this affect anything in the long run?
_form.html.erb is what is called a partial. Partials allow you to remove unnecessary duplication of code. They help breaking the rendering process into more manageable chunks without changing functionality.
To answer all of your questions, ask yourself why you are using a partial. If this is to remove duplication then go ahead and move the back button inside _form.html.erb.
Now, if you could provide some css we could actually help you to center those buttons.
UPDATE
I have just realised you are using bootstrap. In this case try updating your link to this...
<%= link_to 'Back', project_path, class: "btn btn-primary pull-left" %>
and see if it solves your problem.
This is what I got ...
... and it seems more or less aligned to me.

adding a class to text displayed by rails in the view

very straight forward..
how do I add a class to something like this
<h2><%= guide.title %></h2>
which is just displaying text?
You have to wrap it within some container:
<div class="my_class"><%= guide.title %></div>
The container you'll use depends on the context given text is to be used.
Update:
Since the text is already wrapped in <h2> you can do:
<h2 class='my_class'><%= guide.title %></h2>
Another update:
If you wan to minimize the amount of pure html in your view, you can always do:
<%= content_tag :h2, class: 'my_class' do %>
<%= guide.title %>
<% end %>

link_to does not render dynamic data

My main page content is generated with this code:
<% #post.each do |post| %>
<div class="post" style="background:url(<%= post.postimg.url.to_s%>)center center">
<div class="overlay">
<p class="post_title"><%= post.titre %></p>
<p class="post_pseudo"><%= link_to Utilisateur.find(post.utilisateur_id).pseudo ,Utilisateur.find(post.utilisateur_id).pseudo %></p>
</div>
</div>
<% end %>
This snippet is inn _postgeneration.html.erb. The main page (index.html.erb ) look like this :
<%= render "headerhome"%>
<%= render "postgeneration"%>
When the user is redirected from a controller with redirect_to , everything works as expected, my posts are displayed. But when my page is generated from a link_to, only my HTML is displayed correctly. Here's my syntax for link_to
<%= link_to "homepage", '/home'%>
It looks like link_to refuse to render html elements dynamically generated.
The #post.each do wasn't ignored. The post were generated, but without visual, because the visual was set in inline css. The solution was to delete the inline css and put a image_tag. Now everything is working as expected. I didn't know Rails could ignore inline css. Thanks everyone !

How can I display the user url input as a thumbnail?

I want to take from the user an image URL and on submit display a thumbnail of that image in the same page
Here is how i take the URL from the user
<%= form_for([#project, #project.uploads.build]) do |f| %>
<div class="field">
<%= f.label :url %><br />
<%= f.text_field :url %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
then i display the URL in the same page
<p>
<%= upload.url %> |
<%= link_to 'Delete', [upload.project, upload],
:confirm => 'Are you sure?',
:method => :delete %>
</p>
But instead i want to display a thumbnail..How can I do that?
image_tag is the Rails method you're looking for. (http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag). Just use the uploaded URL as the source. Then, use either the :size option, or set a class on your image tag and handle resizing it through CSS.
That method will of course not resize the actual image, and the user's browser will pull-down the larger file and then resize it in the browser. It consumes the same amount of bandwidth as the full-size version, because it is the full-size version.
To do post-processing on the image and actually resize it (a real thumbnail), I recommend the CarrierWave Gem (https://github.com/jnicklas/carrierwave). It's documentation is pretty good, so I won't dive into how to use it here.