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.
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>
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>
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>