I have an img tag as html and I want to use it in erb:
<img src="images/Slider/app.png" alt="" width="636" height="441" data-ww="['600px','500px','400px','200px']" data-hh="['338px','281px','225px','113px']" data-no-retina>
my html erb code is:
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], no-retina } %>
but I get syntax error: unexpected '}', expecting =>
Rails does not allow dash-case as a hash key. Thus the syntax is failing when trying to parse no-retina.
You should use lateral strings if you want to have a dash-case as a key
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], 'no-retina': true } %>
In this particular case (image_tag helper and data attributes), however, Rails is smart enough to get you the right HTML if you just use uderscores:
<%= image_tag "/Slider/app.png", width:"636", height:"441", data: { ww:['600px','500px','400px','200px'], hh:['338px','281px','225px','113px'], no_retina: true } %>
Also if you looks at the image_tag documentation, you will see that you can use size to specify height and width. With some code style cleanup this is what looks much better:
<%= image_tag "/Slider/app.png", size: "636x441", data: { ww: ['600px','500px','400px','200px'], hh: ['338px','281px','225px','113px'], no_retina: true } %>
You can break it by - and nest it
<%= image_tag "/Slider/app.png", data: { no: { retina: true } } %>
Related
Reference document stimulus-library and its relevant example
Attempting to get the rich text area - also using mobility - wher the goal is to alter the trix-editor tag as follows:
<trix-editor
data-controller="trix-modifier"
data-no-file-uploads
></trix-editor>
the following fail
<%= form.rich_text_area "translatable_content_#{Mobility.normalize_locale(user_idioma.idioma.code.to_s)}", rows: 20,
data: { controller: 'trix-modifier'}, data: { 'no-file-uploads' } %>
<%= form.rich_text_area "translatable_content_#{Mobility.normalize_locale(user_idioma.idioma.code.to_s)}", rows: 20,
data: { controller: 'trix-modifier', 'no-file-uploads' } %>
while a simple controller element definition renders correctly:
<%= form.rich_text_area "translatable_content_#{Mobility.normalize_locale(user_idioma.idioma.code.to_s)}", rows: 20,
data: { controller: 'trix-modifier'} %>
how should the syntax be set to generate the proper tag impeding file uploads?
Posting this as a simple reference, figured out by poking around:
<%= form.rich_text_area "translatable_content_#{Mobility.normalize_locale(user_idioma.idioma.code.to_s)}", rows: 20,
data: { controller: 'trix-modifier', 'no-file-uploads' => true } %>
i'm creating a like model, so here's a code:
- if policy(bonus).liked_by?
= link_to(image_tag("heart--filled--green.png", class: "Dislike"),
bonus_like_path(bonus, bonus.user_like(current_user)), method: :delete,
data: { remote: true, behavior: "fragments" })
- else
= link_to(image_tag("heart.svg", class: "Like"),
bonus_likes_path(bonus), method: :post,
data: { remote: true, behavior: "fragments" })
- if bonus.likes_count.zero?
span Like
-else
span.has-tip data-tooltip="" title="#{ bonus.liked_by }" Like
span class="like_count" #{ bonus.likes_count }
And it generates something like this:
The problem is that if I want to like something, I would like to press on the heart(like the given image), but I need to give the opportunity to press everywhere including the span Like and like's count. How can I solve my problem?
To make the image along with the spans part of the link, wrap them inside link_to using a block.
= link_to bonus_likes_path(bonus), method: :post, data: { remote: true, behavior: "fragments" } do
= image_tag("heart.svg", class: "Like"
- if bonus.likes_count.zero?
span Like
- else
span.has-tip data-tooltip="" title="#{ bonus.liked_by }" Like
span class="like_count" #{ bonus.likes_count }
You can have a bigger block in link_to using:
<%= link_to desired_path do %>
<div class="class-name">
</div>
<% end %>
This is the array of hashes received as parsed_response from an API response which was XML, using Httparty.
Difficult and confusing to traverse inside and get the value.
"flights"=>{
"flight"=>{
"segments"=>{
"segment"=>[ (this has square brackets)
{
"index"=>"3",
"departure_airport"=>"DEL",
"arrival_airport"=>"CCU",
"departure_date_time"=>"2014-07-07T13:20:00",
"arrival_date_time"=>"2014-07-07T15:35:00",
"flight_number"=>"20",
"airline"=>"AI",
"operating_airline"=>"AI",
"stops"=>"0",
"equipment"=>"320",
"duration"=>"8100"
},
{
"index"=>"4",
"departure_airport"=>"CCU",
"arrival_airport"=>"BLR",
"departure_date_time"=>"2014-07-07T18:10:00",
"arrival_date_time"=>"2014-07-07T20:40:00",
"flight_number"=>"771",
"airline"=>"AI",
"operating_airline"=>"AI",
"stops"=>"0",
"equipment"=>"319",
"duration"=>"9000"
}
]
}
}
},
To display above hash values I did
<% h["flights"]["flight"]["segments"]["segment"].each do |o,p| %>
<% if o.class == Hash %>
<strong><%= o['airline'] %></strong>
<%= o['arrival_airport'] %> - <%= o['arrival_date_time'] %><br>
<% else %>
<%= o %>
<% end %>
<% end %>
(NOTE: Simply placing o['airline'] after loop would give can't convert String into Integer)
The else statement is to parse the below type of response.
"flights"=>{
"flight"=>{
"segments"=>{
"segment"=>{ (no square brackets)
"index"=>"3",
"departure_airport"=>"DEL",
"arrival_airport"=>"CCU",
"departure_date_time"=>"2014-07-07T13:20:00",
"arrival_date_time"=>"2014-07-07T15:35:00",
"flight_number"=>"20",
"airline"=>"AI",
"operating_airline"=>"AI",
"stops"=>"0",
"equipment"=>"320",
"duration"=>"8100"
}
}
}
},
So having <%= o %> after else statment, will give
["index", "7"] ["departure_airport", "DEL"] ["arrival_airport", "BLR"] ["departure_date_time", "2014-07-10T07:10:00"] ["arrival_date_time", "2014-07-10T09:50:00"] ["flight_number", "807"] ["airline", "9W"] ["operating_airline", "9W"] ["stops", "0"] ["equipment", "738"] ["duration", "9600"]
But having <% elsif o=="departure_airport" %> <%= p %> <% end %> in-place of else statement, will give the value associated with the key.
To get a single value using the key, this is fine. But it really gets messy to put all those key in the above format to get their values.
There should be a better way to parse it, but just cant figure out how will I deduce a use case where ['segment'] would give the result appropriately, based on if it is again a hash or it is just a key.
Thanks.
The solution here would be to wrap the Hash into an Array before looping it.
controller
#segments_array = Array.wrap(h["flights"]["flight"]["segments"]["segment"])
view
<% #segments_array.each do |segment| %>
<strong><%= segment['airline'] %></strong>
<%= segment['arrival_airport'] %> - <%= segment['arrival_date_time'] %><br>
...
<% end %>
[h["flights"]["flight"]["segments"]["segment"]].flatten.each do |segment|
puts "#{segment['arrival_airport']} - #{segment['arrival_date_time']}"
end
HTH
this works nicely
= link_to 'All', test_path(:param1 => xxx), 'data-no-turbolink' => true
and translates to
<a data-no-turbolink="true" href="/test?param1=xxx">All</a>
I want to change it to the new hash syntax so I did this:
= link_to 'All', test_path(param1: xxx), data: { no: { turbolink: true }}
but it translates to
<a data-no="{"turbolink":true}" href="/test?param1=xxx">All</a>
EDIT: This Works:
%a{href: "#{test_path(param1: xxx}", data: { no: { turbolink: true }}} All
which translates to
<a data-no-turbolink href='/test?param1=xxx'>All</a>
but shouldn't I stick to link_to rather than <a href></a>?
There are some naming conventions, so you must write like this:
link_to 'All', test_path(param1: xxx), data: {no_turbolink: true}
You should always try to use the rails helper methods when they're available. This way you'll get all the benefits of rails: cache-busting and relative pathing and whatever else comes in the future. Given that, the issue in your code is that the data hash can only be one level deep. So do this instead:
= link_to 'All', test_path(param1: xxx), data: { 'no-turbolink' => true }
Note: You can't really use a symbol for the no-turbolink part because symbols don't interpret hyphens. https://gist.github.com/misfo/1072693
I want to add this html data tag inline
data-zoom-image="<% image_tag(step.i_connection.image.image.url(:large) %>"
to this erb tag, but am unsure how I would go about this. Any ideas?
<%= image_tag(step.i_connection.image.image.url(:medium), id: "iconnection#{n}") %>
You pass it in like data: { zoom_image: "large/image1.jpg" } and the data attribute gets converted to data-zoom-image="large/image1.jpg".
Try:
<%= image_tag(step.i_connection.image.image.url(:medium), id: "iconnection#{n}", data: { zoom_image: "large/image1.jpg" }) %>
Update:
I think you want to output the result of:
<% image_tag(step.i_connection.image.image.url(:large)) %> instead of just interpreting it.
Try:
data: { zoom_image: "#{ image_tag(step.i_connection.image.image.url(:large)) }" }