4

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?

5
  • can you give specific examples of where/how the images are being shown? I don't think there's one method that would work across all instances.
    – user5482
    Mar 3 '15 at 21:16
  • I am using the image in a view. I have rewritten the field so that it outputs the standard atom markup: <img typeof="foaf:Image" src="127.0.0.1/sites/default/files/styles/600_width/public/…" width="600" height="300" alt="download.jpg" title="download.jpg"> It's in there that I want to add the class.
    – inertiahz
    Mar 3 '15 at 21:36
  • The OP asked on #drupal-scald (Freenode) and was answered. Could you post back your own solution?
    – jcisio
    Mar 10 '15 at 8:31
  • Unfortunately I had to implement a quick fix by wrapping the atom in a div then targeting via CSS. However your advice on creating a custom player seems like it would be the better approach. Something I will be looking into once the site goes to testing and I have a bit more time.
    – inertiahz
    Mar 10 '15 at 9:18
  • If you're outputting the img tag yourself in a view, just add the class to the markup! <img typeof="foaf:Image" class="img-responsive" src="127.0.0.1/sites/default/files/styles/600_width/public/…; width="600" height="300" alt="download.jpg" title="download.jpg"> Sep 12 '15 at 5:21
3

Putting an extra <div class="img-responsive"> 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.

enter image description here

1

I finally worked this out. It is still a hack, but it doesn't add a wrapper, and don't require additional CSS. I don't think it can be solved "the Drupal way", given the way Scald works.

It turns out that markup for Scald atoms is already present in the render array and a class added as an attribute to the render array (as you would normally do) will be ignored.

Adding the following to the top of node.tpl.php works:

$markup = $content['field_scald_atom_ref'][0]['#markup'];
$markup = str_replace('typeof="foaf:Image"',
  'typeof="foaf:Image" class="img-responsive"', $markup);
$content['field_scald_atom_ref'][0]['#markup'] = $markup;

What this code snipped does is to hack the markup already generated by Scald to include class="img-responsive".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.