Html5 Data attributes in rails

Question

I am using theme that i bought for my rails project and author of the theme uses html5 data attributes to background image and the code looks like this

   <section class="jumbotron full-height relative" data-pages-bg-image="assets/images/banner_1.jpg" data-bg-overlay="black" data-overlay-opacity="0.5">

I found a resource on how to use data attributes with rails but its not really working for me. Here is the link that i found http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

how would i convert the above code to work in rails(I'm using erb as a template engine)

Vucko · Accepted Answer · 2016-06-16 21:44:02Z

1

You can use the same markup, however, you need to use RoR's helpers to get the image's url - you can use image_path:

   <section class="jumbotron full-height relative"
      data-pages-bg-image="<%= image_path('images/banner_1.jpg') %>"
      data-bg-overlay="black"
      data-overlay-opacity="0.5">

answered Jun 16, 2016 at 21:44

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ruby_newbie · Accepted Answer · 2016-06-16 21:48:21Z

0

I think this should work assuming you have the correct asset path:

image_tag("assets/images/banner_1.jpg", class: "jumbotron full-height relative" data-bg-overlay: "black", data-overlay-opacity: '0.5')

answered Jun 16, 2016 at 21:48

ruby_newbie

3,3033 gold badges21 silver badges31 bronze badges

Comments

mrvncaragay · Accepted Answer · 2016-06-16 21:52:37Z

0

In addition, to the answers below, if you really want to convert it to erb template you could write it like this:

<%= content_tag(:section, "", class: "jumbotron full-height relative", "data-pages-bg-image" => "assets/images/banner_1.jpg", "data-bg-overlay" => "black", "data-overlay-opacity" => "0.5") %>

answered Jun 16, 2016 at 21:52

mrvncaragay

1,2701 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Html5 Data attributes in rails

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related