Scald+bootstrap: Responsive images

This chapter describes how to deliver media markup and classes to facilitate client side scaling to viewport when using the Bootstrap theme in combination with the Scald module for media management.

Table of contents

• Introduction
• Final word

Drupal projects discussed in this chapter: Bootstrap, Breakpoints, Picture, Scald.

Introduction

The Bootstrap theme in combination with the Scald module for media management is the foundation on which I build most of my Drupal websites. While both these projects are designed to to facilitete responsive design, some tweaks are needed to make embedded media (images and videos) responsive. This chapter describes one way to do this.

For an alternate approach to the one described in this chapter, see Scald and responsive integration at Drupal.org. This approach uses the modules Breakpoints and Picture to set breakpoints and to scale images server side to a size optimized for the device being used.

Markup

On a clean install, images inserted into the text used Scald DnD uses the following markup:

<div class="dnd-widget-wrapper CONTEXT type-image ALIGN">
  <div class="dnd-atom-rendered">
    <img
      class="img-responsive"
      title="TITLE" alt="TITLE"
      src="URL?itok=RANDOM"
      typeof="foaf:Image">
  </div>
  <div class="dnd-caption-wrapper">
    <p>CAPTION</p>
  </div>
</div>

Upper case words are replaced by appropiate tokens. CONTEXT are Scald context classes for preset image formats (e.g. context-thirdwidth). ALIGN are Scald alignment classes (atom-align-left atom-align-center, or atom-align-right).

The fullwith Boostrap page size is 1140 px. We add 5px margin to each image, so the context dependent width of the wrapper is set to the width of the image plus 10 px. Below are CCS for two image context: fullwidth, thirdwidth and passthrough:

// CSS for Scald image atoms
.dnd-widget-wrapper {
  max-width: 100%;
  border: 1px solid @table-border-color;
  border-radius: 4px;
  margin: 5px;
  padding: 4px;
  transition: border 0.2s ease-in-out 0s;
  display: block;
}
.dnd-caption-wrapper {
  margin: 0;
  padding-top: 2px;
  text-align: left;
  font-size: 0.8em;
}
// Width of img + 10 px for frame.
.context-fullwidth {
  width: 1140px;
}
.context-thirdwidth {
  width: 370px;
}
// Shrinks parent to child, but nullify the center alignment of container.
.context-passthrough {
  display: inline-block;
}

The context passthrough renders an image without scaling. This context have the following limitations:

• The caption is not split into separate lines if it extend beyond the width of image.
• Center alignment do not work.

Final word

[mumble]

---

Last update: 2016-05-06 [gh].