How to Add CSS Class to This Ruby Injection?

Question

My problem is that whenever html content is image, I want it to be class="img-responsive". Otherwise big images are looking horrible. I tried to set class of parent div to img-responsive but somehow it doesn't get inherited.

So I'm trying to add this CSS class to following Ruby injection somehow:

<%= raw(activity.trackable.content_html) %>

I tried this <%= raw(activity.trackable.content_html), :class => "img-responsive" %> but gives syntax error.

@Emu , In a loop, first iteration evaluates to: <p><img src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Sahelanthropus_tchadensis_-_TM_266-01-060-1.jpg" alt=""/></p> — Ferit
– Ferit, Commented May 15, 2017 at 4:31

Emu · Accepted Answer · 2017-05-15 04:37:48Z

1

You can do the following:

Wrap up the raw statement with a div and give a id to that div.

<div id="image-wrapper">
   <%= raw(activity.trackable.content_html) %>
</div>

now, in your custom.css file or other asset file add img-responsive class elements to a new css, like:

in custom.css

#image-wrapper p img{
    display: block;
    height: auto;
    max-width: 100%;
}

It'll do the trick whenever it finds an image inside the newly created div.

answered May 15, 2017 at 4:37

Emu

5,9253 gold badges35 silver badges52 bronze badges

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

3 Comments

Ferit Over a year ago

Thank fckin god it worked. I was about to smash my screen... Thanks a lot. And btw, do you have any idea why CSS class doesn't get inherited from parent?

Emu Over a year ago

@Saibot, css class will inherit from the parent with proper reference.

Ferit Over a year ago

Well, can you give an example to a proper reference?

Collectives™ on Stack Overflow

How to Add CSS Class to This Ruby Injection?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related