1

I am using a theme that i bout on themeforest for my rails project where developers used custom data tags to load background image.Code looks like below.

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

whats the syntax to use data attribute inside div tag? i am using erb as my template engine

maithreya
  • 35
  • 1
  • 4

3 Answers3

2

try this patterns

1. using plain html tag

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

2. using content_tag

if your ruby version greater than 2.3

<%= content_tag(:div, "blah blah", 'data-pages-bg-image' => "asets/images/banner_1.jpg", class: "swiper-slide fit slide-1") %>

or not (1.9 etc)

<%= content_tag(:div, 'blah blah', "data-pages-bg-image" => "assets/images/banner_1.jpg" :class => "swiper-slide fit slide-1") %>

example)

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
  </ul>
</section>
jamy
  • 405
  • 3
  • 6
1

If you want to set data attributes to your div in your erb with some value from your database, you can do it like this.

<div class="swiper-slide fit slide-1" data-pages-bg-image="<%= @item.bg_image %>">
#@item.bg_image is an example, you should put your variable there
Kumar
  • 3,116
  • 2
  • 16
  • 24
  • Its not coming from my database its coming from my assets. I tried your code for assets it didn't work :( – maithreya Jun 05 '16 at 18:58
  • Okay, lets say you have image named 'bg_image.jpg'. You can simply write `images/bg_image.jpg` inside the quotes for data attribute. Should work. Let me know! – Kumar Jun 05 '16 at 19:02
  • Not working tried including and excluding images path – maithreya Jun 05 '16 at 19:10
  • These are some errors that i am seeing in my console [Console Error Image](http://s33.postimg.org/vtnxd664f/Screen_Shot_2016_06_05_at_12_11_39_PM.png) – maithreya Jun 05 '16 at 19:13
  • Oh i kind of figured out whats the problem is, theme authors are adding image through jquery and it has `background-image: url()` with url variable inside. So since rails has its own background image syntax its not working. So i went and changed it to `asset-url` but still not working – maithreya Jun 05 '16 at 23:40
  • Let me get this straight. You added the data attribute to your div, but you're concerned it didn't change the background, and that's your question? – Kumar Jun 06 '16 at 04:01
  • I hope you you got your problem fixed, if yes tell me what was the issue and what you did. – Kumar Jun 06 '16 at 14:55
-1

data is not a property if div.

You can use attr.data with div. [data-pages-bg-image]=

Please check this answer.

Lakmal N
  • 1
  • 1