Inline Images

Images are content. Images are used to visually support text, providing additional semantic information and often placed alongside text to add context. Images stand on their own as content and should not be used as backgrounds that do not offer additional meaning.

A caption is a brief explanation of what is happening in the image and can be used to add information; it is commonly placed under the referred image.

Usage

Images add visual engagement as well as context to the text that is written. Images will appear inline with the text, meaning that the text will wrap around the image. Captions should be kept brief and relevant to the image being used.

Example 1

Interior of Low Library. The Rotunda displays full table settings for an upcoming event.

Low Library was built with a gift from University President Seth Low, in memory of his father Abiel Abbot Low. The Rotunda, capped by a granite dome 105.5 feet high, is the center of the building. The building features four event spaces that can be utilized for a variety of activities. Originally used as a reading room when the building served as a library, the Low Rotunda in particular is a dramatic space and now the setting for events of all scales.

Example 2

Wide Shot of College Walk while people walk across the campus of Columbia University

Students walk around the Columbia University Morningside campus.

<h2>Image Gallery</h2>
<style type="text/css">.custom_caption_box {
    position: relative;
    width: 100%;
}
.custom_caption_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.custom_caption_text {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    margin-bottom: 0;
    background: #ffffff70;
}
.aspect16x9 {
    aspect-ratio: 16 / 9;
}
.aspect9x16 {
    aspect-ratio: 9 / 16;
}
.aspect4x3 {
    aspect-ratio: 4 / 3;
}
.aspect3x4 {
    aspect-ratio: 3 / 4;
}
.aspect1x1 {
    aspect-ratio: 1 / 1;
}
</style>
<div class="custom_caption_img">
<div class="custom_caption_box aspect16x9">
<h3>16.9</h3>
<img alt="" data-entity-type="" data-entity-uuid="" src="https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg" />
<div class="custom_caption_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt in odio a aliquam. Sed scelerisque mollis erat, nec sodales odio sollicitudin a. Nunc quis placerat enim, a pulvinar tortor. Fusce eu lectus nec ligula mollis tempor.</div>
</div>

<div class="custom_caption_box aspect3x4">
<h3>3:4</h3>
<img alt="" data-entity-type="" data-entity-uuid="" src="https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg" />
<div class="custom_caption_text_">Photo Credit Daniels Flicker Book.</div>
</div>

<div class="custom_caption_box aspect1x1">
<h3>1:1</h3>
<img alt="" data-entity-type="" data-entity-uuid="" src="https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg" /></div>
</div>