Different css attributes in partials rendered on same page

Question

Seemingly simple issue I can't seem to think around. I'm not even sure if this can be solved with RoR.

I have two partials that I'm rendering on the same page:

<%= render 'large_image_feed' %>
<%= render 'small_image_feed' %>

Both partials look like this:

<% @feed.each do |f| %>
<style>
p img { width: 100%; <%# width: 50%; in small_image_feed %> }
</style>

<p>
<img src="example.jpg">
</p>
<% end %>

The problem is, since _small_image_feed is rendered below _large_image_feed, every image on the page has a 50% width instead of the width being dependant on the partial it is from. The images must be the default img class.

Allan W Smith · Accepted Answer · 2015-03-12 00:13:38Z

2

Firstly, I wouldn't recommend using embedded styles, so would be worth taking the time to move them out into your assets. Above that the solution is simply to wrap your partials in a container.

Large partial

<% @feed.each do |f| %>
<style>
  .large p img { width: 100%; }
</style>
<div class="large">
  <p>
   <img src="example.jpg">
  </p>
</div>
<% end %>

Small partial

<% @feed.each do |f| %>
<style>
  .small p img { width: 50%; }
</style>
<div class="small">
  <p>
   <img src="example.jpg">
  </p>
</div>
<% end %>

answered Mar 12, 2015 at 0:13

Allan W Smith

7566 silver badges20 bronze badges

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

2 Comments

user2736480 Over a year ago

A simple fix, thanks. In regards to embedded styles, if I have a class such as '#image-<%= post.id %>' is there any way other than using them?

Allan W Smith Over a year ago

You can use erb css files but unfortunately this wont help if you're applying styles dynamically like that. Is there any reason you cant have a base class 'image-foo' etc and then just have the id's dynamic for JS and the like? Is there a need to have different images styles on a per post basis?

Collectives™ on Stack Overflow

Different css attributes in partials rendered on same page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related