Media Images | Crossroads Digital Design Kit

UI Components / Media Images

Media images are used with the media objects component.

This element works by overlaying two .media-object divs directly atop one another. If an overlay image exists, it replaces the default image. Conversely, if there an overlay image doesn't exist or its url is invalid, the default image with appear.

Media Image - Default

If no overlay image has been uploaded, the .media-img-wrapper will show the default image associated with .media-object-default.

<div class="media">
  <div class="media-img-wrapper">
    <div class="media-object img-size-6 media-object-default img-circle">
    </div>
    <div class="media-object img-size-6 media-object-overlay img-circle" style="background-image: url('[some url here]');"></div>
  </div>
</div>

Media Image - Overlay

Overlay images are created using an inline style setting the background-image of that object. The class .media-object-overlay positions the image.

The class .media-object-overlay positions the overlay image.

<div class="media">
  <div class="media-img-wrapper">
    <div class="media-object img-size-6 media-object-default img-circle">
    </div>
    <div class="media-object img-size-6 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>
</div>

Media Image - Sizing

Image sizing can be manipulated using the class .img-size-*, where * can be any number 1 - 6. Note that both .media-object divs must have the same sizing class applied.

<div class="media">
  <div class="media-img-wrapper">
    <div class="media-object img-size-1 media-object-default img-circle">
    </div>
    <div class="media-object img-size-1 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>

  <div class="media-img-wrapper">
    <div class="media-object img-size-2 media-object-default img-circle">
    </div>
    <div class="media-object img-size-2 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>

  <div class="media-img-wrapper">
    <div class="media-object img-size-3 media-object-default img-circle">
    </div>
    <div class="media-object img-size-3 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>

  <div class="media-img-wrapper">
    <div class="media-object img-size-4 media-object-default img-circle">
    </div>
    <div class="media-object img-size-4 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>

  <div class="media-img-wrapper">
    <div class="media-object img-size-5 media-object-default img-circle">
    </div>
    <div class="media-object img-size-5 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>

  <div class="media-img-wrapper">
    <div class="media-object img-size-6 media-object-default img-circle">
    </div>
    <div class="media-object img-size-6 media-object-overlay img-circle" style="background-image: url('http://www.ucblueash.edu/now/wp-content/uploads/2017/01/chuck-mingo.jpg');"></div>
  </div>
</div>