How to add a class to scald images? I am using the Drupal 7 Bootstrap theme and Scald. I have figured out how to use contexts but would like it so that when an image is shown it has the img-responsive class.

Can this be done by manipulating the render array?

Can anyone point the best way to achieve this?
Putting an extra &lt;div class="img-responsive"&gt; wrapper around the standard atom markup generated by Scald works (sort of - the legend doesn't look good).

However, I've solved this by just copying the Bootstrap img-responsive class, using it as an override for the Scald dnd-atom-wrapper class:

// Just copy the Bootstrap CSS for img-reponsive.
.dnd-atom-wrapper {
  max-width: 100%;
  display: block;
  height: auto;
}


This seems to work for all image atoms in Scald (it may break other types of atoms - I only use Scald atoms for images).

I really want to emulate the complete Bootstrap "thumbnail" concept (including nice borders and captions), but using  standard Scald atom css classes, so I ended up with these overrides for the relevant classes (this is the default player - must be slightly adapted to work with the HTML5 player):

// CSS fror Scald image atoms
.dnd-atom-wrapper {
  max-width: 100%;
  display: block;
  height: auto;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  line-height: 1.42857;
  margin-bottom: 5px;
  padding: 4px;
  transition: border 0.2s ease-in-out 0s;
}
.dnd-legend-wrapper {
  margin: 0;
  text-align: center;
  font-size: 0.8em;
  width: 100%;
}
.dnd-atom-wrapper,
.dnd-drop-wrapper img {
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: block;
}
.dnd-atom-wrapper.atom-align-right {
  @media (min-width: @screen-lg-min) {
    margin-left: 0.7em;
  }
}
.dnd-atom-wrapper.atom-align-left {
  @media (min-width: @screen-lg-min) {
    margin-right: 0.7em;
  }
}
.atom-align-right {
  @media (min-width: @screen-lg-min) {
    float: right !important;
  }
}
.atom-align-left {
  @media (min-width: @screen-lg-min) {
    float: left !important;
  }
}


I have this CSS in less/overrides.less in my Bootstrap subtheme.

Remember to compile it with lessc and clear caches for it to work.

Below you can see it in action.  Big screen on the left, small screen on the right.