Display an image in a Popover Bootstrap with ruby code via Cloudinary/CarrierWave gem

Question

Hi it is my fourth question I ask in this template. Please could some one help me :)

I work on flashcard and I have to display an image in a popover when I trigger my cursor on it.

Here is my code

<div class="idea">
   <i class="fa fa-lightbulb-o fa-lg popover-img" 
   data-content=<%="#{cl_image_tag(@hiragana.upload, :width => 260, :height => 340)}"%>></i>
</div>

I put it in data content.

I used this javascript to call it in my layout/application.html.erb

<script >
      $(document).ready(function(){
        $(".popover-img").popover({
          html: true,
          trigger: "hover",
          // content: "",
          placement:'bottom'
        });
      })

The result is It cannot display the picture

Answer 1

The problem you're having is the tag you're calling. cl_image_tag is a helper which produces an img html tag. But your js has the content line commented, so I'm guessing you've tried several thing.

If you choose to use a tag creator, and I understand why you would, it makes generated a size-based cloudinary url much simpler, then you'll need to escape that properly in single quotes in the data element, then call it and render the whole html tag in the js.

For instance I have something like this:

<span class="popover-trigger fa fa-4x fa-ban "
     data-toggle="popover"
     data-content='<%= cl_image_tag(current_user.avatar, 
        :width => 250, :height => 200) %>'></span>

And then your JS would look like:

$('[data-toggle="popover"]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return $(this).data('content');
  }
});

That will call it on hover, and set the value in data-content attribute to render in the popover content area, as long as its properly quoted.

-- Based on your comments ---

I think your view code might look like:

<% @hiraganas.each do |hiragana| %> 

<div class="idea">
   <i class="fa fa-lightbulb-o fa-lg popover-img" 
   data-toggle="popover"
   data-content=<%="#{cl_image_tag(hiragana.upload, 
   :width => 260, :height => 340)}"%>></i>
</div>
<%end%>