Right now I have some filler code in a mockup such as the following:
%img{:alt => "image description", :src => "img/img-11.jpg"}
Ideally though, I need to reference img-11.jpg from the asset pipeline as I do in my CSS:
<%= asset_path "img-11.jpg" %>
How does one rewrite the markup above to call asset_path within the context of a HAML template?
HAML is basically the same, but without the surrounding brackets if you're doing it inline:
= asset_path "img-11.jpg"
Otherwise you should be able to use it in the definition:
%img{:alt => "image description", :src => asset_path("img-11.jpg")}
In this case, use = image_tag('img-11.jpg', alt: 'Image Description'), but in the general case, use = function_name_or_ruby_code to evaluate any arbitrary Ruby and output the result.
You can use - ruby_code to evaluate Ruby without outputting the result.
Related
I try to use an srcset attribute inside an image_tag but I can not make it work.
Im not sure if it is a syntax error or it generally does not work in an image_tag.
Is it possible to use a srcset attribute in an image_tag?
If yes, how?, and if not why not and is there a workaround?
<%= link_to(image_tag("logo.png", alt: "logo", :id => "logo"), root_path) %>
Instead of adding the image_tag to the link_to "name" option you can use open up block and pass your image there.
If you want to use a srcset attribute you could extend the functionality of image_tag by creating a helper:
def image_set_tag(source, srcset = {}, options = {})
srcset = srcset.map { |src, size| "#{path_to_image(src)} #{size}" }.join(', ')
image_tag(source, options.merge(srcset: srcset))
end
It joins each size by comma, so then you can do:
<%= link_to root_path do %>
<%= image_set_tag 'logo.jpg', {
'logo_640.jpg' => '640w',
'logo_1024.jpg' => '1024w',
'logo_1980.jpg' => '1980w'
}, sizes: '100vw', alt: 'logo', id: 'logo' %>
<% end %>
As you can see, the changes introduced in ActionView::Helpers::AssetTagHelper#image_tag in the 5.2.1 Rails version allows you to pass the srcset option, with a hash or an array of 2D arrays containing the different responsive versions of your image:
image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
# => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">
image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
# => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw">
So, if you're using a more recent Rails version, you can just use image_tag instead of writing your own implementation.
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
I have a tooltip that use this html attribute "original-title".
I have tryed this:
content_tag(:span, '', :class => options[:pinfo_class], :original-title => options[:pinfo])
But it gives a error in view.
Then I have used this which works, but not with the tooltip.
content_tag(:span, '', :class => options[:pinfo_class], :original_title => options[:pinfo])
How do I force rails to use the :original-title ?
You can use a string as a hash key, like 'original-title' => options[:pinfo]. Should work.
Also, most strings can be converted to symbols via 'some-string'.to_sym method, or even defined as :'some-string'.
I'm implementing Schema microformats on a Ruby project using HAML and can't figure out how to set an empty attribute on a tag. I tried nil and false, but they simply do not shown.
Example: <div itemscope>
I'm tring to set an empty itemscope attribute.
Code added from comment by #StrangeElement:
My code:
.agency.premium{:itemscope => true, :itemtype => 'schema.org/ProfessionalService';}
:itemscope => true seems to be the recommended approach from HAML's documentation. I get the same result as I would get with :itemscope => '', a XHTML-valid attribute with an empty value (i.e. <div itemscope="">).
Probably fine, but I'd rather have it empty as is documented in the Schema doc.
Using something like
%div{:itemscope => true}
is the correct way to specify this in your Haml file.
How this is rendered depends on how you set Haml's format option. The default in Haml 3.1 is xhtml, and with that it will render as itemprop='itemprop', which is valid xhtml. To render with minimized attributes (like <div itemscope>) you need to set the format to html4 or html5. (In Rails 3 the default is html5, and in Haml 4.0 the default is html5).
How to set the Haml options depends on how you are using it, see the options section in the docs.
For example, using Haml directly in Ruby, this:
engine = Haml::Engine.new '%div{:itemscope => true}'
puts engine.render
produces the default xhtml with full attributes:
<div itemscope='itemscope'></div>
But this:
engine = Haml::Engine.new '%div{:itemscope => true}', :format => :html5
puts engine.render
produces the desired result with minimized attributes:
<div itemscope></div>
If someone is interested in how to put more words in that way, he may use "foo bar" => true:
%option{ "disabled selected value" => true } Choose an option
results is:
<option disabled="" selected="" value="">Choose an option</option>
and works as expected.
The accepted answer works, but it produces an HTML attribute with value.
If you want the attribute only to be output on HTML, without value, you can use the HTML-style attributes syntax of HAML:
%div(itemscope)
In my Rails app, I need to set a value for a custom data-* attribute on an anchor tag. However, hashes can't have hyphens if I'm not mistaken. I essentially want to do this:
<%= link_to 'Example', example_path, :class => 'something', :data-id => '15' %>
:data-id is not valid, however. What can I do to work around this?
IIRC, for such purposes hashes and strings are equivalent, so you can use "data-id" instead of :data-id. Never checked for this particular method, though, so no guarantees.
I think in Rails 3 you can do
link_to "Click Here", root_path, :data => { :id => #model.id }
for all data attributes.