Correct HAML for linking an image to another page in my Ruby on Rails app - ruby-on-rails

Trying to figure out how to use haml "link_to" with Ruby code in order to make an image on a page link to another page on the site. If possible I'd like to keep the nav static and fade the two pages in and out via a "Forward" and "Back" image. Any ideas? Just want to get the linking right first and then can go in and figure out the JQuery. Currently have the code below...
Thanks!!
.pad-bottom50
%div{:style => "position: absolute; top: 620px; left: 830px;"}
=link_to (image_tag(#page.photos[1].image_url(:full), :id => "#fade1", :class => "animated") if #page.photos[1].image?
.pad-top20

Syntax of link_to is
=link_to link_text, link_url, options
You missed the link_url. ie. to where the user should be taken when clicking on the image.
Here is a working example
=link_to(image_tag("http://goo.gl/FZUI3"), "http://en.wikipedia.org/wiki/Nyan_Cat", :id => "#fade1", :class => "animated")

You are not specifying the src for the link.
The syntax is:
link_to "Link Text", "/path-to-link"
To put an image in there:
image_tag "path-to-image"
link_to(image_tag("path-to-image"), "/path-to-link")
This code will make an image wrapped by a link pointing to /bacon if #page.photos[1].image?
link_to(image_tag(image_tag(#page.photos[1].image_url(:full), :id => "#fade1", :class => "animated")), "/bacon", :id => "bacon", :class => "bacon") if #page.photos[1].image?

You should first look at the parameters of a link_to tag . You will get to know about the parameters and what you can do with those parameters .
check this link
api doc
You can check all paramters of a method avilable in API Ruby on Rails

Related

Convert one line HTML pop up alert in Rails to Twitter Bootstrap modal

I'm trying to convert a working HTML dialog that I created into something more aesthetically pleasing via Twitter Bootstrap (the seyhunak version). I have the following two dialogs running so far:
<td><%= (#it_staff ? link_to(report.name, edit_report_path(param),
:data => { :confirm => message}) : report.name) %></td>
<td><%= (#valid_person? link_to(t('.edit', :default => t("helpers.links.edit")),
edit_report_path(report), :class => 'btn btn-mini', :data => { :confirm => message}) : "") %>
As you can probably derive, "message" gets displayed via a hyperlink and a button. I've been browsing http://getbootstrap.com/components/#alerts but I can't figure out how to implement it here. Any help is appreciated!
You probably want to use bootstrap alerts.js plugin as opposed to a simple alert component. http://getbootstrap.com/javascript/#alerts
Not sure if you want something inline or as an overlay but you may want to look at popover.js or modal.js

render html on popover via twitter bootstrap

I can not render the html placed inside my yml file as data attribute of a generic popover . I'm going to render the text field in this way:
= f.text_field :link_url, :class => "span6 popoverable", :data => {:content => t("popover.campaign.link_url.message"), :original_title => t("popover.campaign.link_url.title")}, :placeholder => "URL link to your song, fan page, site"
and in yml file I have:
en:
popover:
campaign:
link_url:
message: "Description.<br><b>Example:</b> <i>http://yoursite.com/</i>"
title: "Title"
but the output is not the html code but the plain versione containing the html tag.
I tried with raw and .html_safe but i always get the same result.
t(:string).html_safe
raw(t(:string))
How can i fix this?
Thank you
Did you try setting the :html => true option on the Bootstrap .popover?
http://twitter.github.io/bootstrap/javascript.html#popovers
You do the same via sanitizing the content. Please go this documentation : http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html
may be this would help you.

Colorbox-rails inline content

After I install colorbox-rails
**followed the directions on this page: http://rubydoc.info/gems/colorbox-rails/0.0.9/file/README.rdoc
**here is what the readme says to use for the link_to
<%= link_to "My superb link", "#", :data => { :colorbox => true } %>
I added this to my link_to
:data => { :colorbox => true }
it works does a popup, but I can't get it to link to the content I want. It will display either the page you are on in the colorbox or an error message "This content failed to load."
I am trying to get a contact form in the colorbox.
I am running Rails 3.2.8
Do
<%= link_to "My superb link",show_contact_path(#contact.id), :data => { :colorbox => true } %>
Edit
You can also do
// Called directly, without assignment to an element:
$(".myElement").colorbox({href:"thankyou.html"});
// Called directly with HTML
$(".myElement").colorbox({html:"<h1>Welcome</h1>"});
http://www.jacklmoore.com/colorbox
Just make sure you create the selector for the element class="myElement"
Also (credit to One Two Three)
If the link is external (ie., going to site other than your own
application's), you'd need to specify the iframe attribute as follows
:colorbox_iframe => true

Rails - Render partial inside Twitter Bootstrap popover

I want to use a Twitter Bootstrap popover to display a user avatar and email address, with the possibility of adding in more details at a later date.
I am having an issue getting the partial to render inside the content field of the link. The view code is below (in HAML).
%span.comment-username
=link_to comment.user_name, "#", "title" => comment.user_name,
"data-content" => "=render 'users/name_popover'",
class: "comment-user-name"
Currently, this will only produce the content code as a string.
Is there a way to do this so the partial will be inserted instead of the code as a string?
You want rails to actually evaluate the content of the string and not just show the string. The easiest way to do that would be:
%span.comment-username
=link_to comment.user_name, "#", "title" => comment.user_name,
"data-content" => "#{render 'users/name_popover'}",
class: "comment-user-name"
That should pass the render statement to rails and render your partial as expected.
Thanks for the answer jrc - it helped me find a solution.
My solution might be useful for other non HAML people like me:
`<%= link_to('Service History' , '#', :class => "popover-history", :rel => "popover", :"data-placement" => "bottom", :title => "Service History", :"data-content" => "#{render 'services/service_history'}") %>`
with
`$(function () {
$('.popover-history').popover({ html : true });
});`

How do I specify the format for url_for in a nested route?

The following link_to statement:
<%= link_to image_tag("icons/document_24.png"),
[program_code.program, program_code],
:class => :no_hover,
:alt => "Print Tracking Code",
:title => "Print Tracking Code",
:target => :new
%>
will generate a url like /programs/1/program_codes/1
If I want the url to be /programs/1/program_codes/1.svg, how do I specify the format in the array that is being passed to url_for? I've searched the Rails API documentation and looked at several examples but have been unable to find anything like this.
I think your looking for the :format option. It will append the file extension to the link e.g. '.svg'
Make sure you put the :format option in the path building hash of the link_to method.
<%= link_to 'somewhere', {somewhere_to_path(#var), :format => "svg"},:title => "Print Tracking Code", :target => "_blank" %>
Hope this helps.
If you are dealing with a specific class and can use a named route, that is the most efficient option. But if you're dealing with nested resources and the parent resource isn't fixed (for instance, in a polymorphic association), AND you want to specify a format, url_for doesn't meet your needs.
Fortunately you can use polymorphic_url.
For instance, if server could be an instance of ManagedServer or UnmanagedServer, and both can have alerts, you can do this:
polymorphic_url([server, :alerts], :format => :xml)
and that will give you
/managed_server/123/alerts.xml
/unmanaged_server/123/alerts.xml

Resources