Skip to Main Content

Elements: Images

Shows what elements look like within LibGuides and our current CSS. Intended audience: UofL Libraries web content providers.

Image floating left of text

girl at computer

In the image tag use a class of imgWrap and left, right, or center to determine the alignment of the image.

Note: the alignment won't show correctly in the admin view. View page in preview as LibGuides won't apply the CSS in the admin view.

HTML

<div>
<img alt="artist file" class="imgWrap left" loading="lazy" src="https://libapps.s3.amazonaws.com/accounts/40422/images/crop_image_.jpg" style="width: 30rem; height: 29.6rem;" />
<p>Enter the HTML in Source view.</p>
</div>

Image in figure element with figcaption

smartphone
Here is a caption for this image.

HTML

<figure>
    <img src="https://libapps.s3.amazonaws.com/customers/764/images/girlComputer_iStock_84605353_XXLARGE.jpg" alt="smartphone">
    <figcaption>Here is a caption for this image.</figcaption>
</figure>

Media Object Left

room

Media heading

Biscuit pie chocolate cake marshmallow jujubes pastry lemon drops. Pie toffee sugar plum chocolate cake sugar plum chocolate bar. Cake pastry cake ice cream jelly beans. Sweet roll gummies bonbon. Marshmallow cake tootsie roll. Danish carrot cake candy fruitcake liquorice. Bonbon sesame snaps apple pie chocolate jelly-o chocolate bar bonbon tiramisu.

Media Responsive Embed 4x3

HTML

<div class="embed-responsive embed-responsive-4by3">
  <iframe title="Queen at Live Aid" class="embed-responsive-item" src="https://www.youtube.com/embed/vbvyNnw8Qjg?start=10"></iframe>
</div>

Image in figure element, but no caption

laptop

HTML

<figure><img src="https://libapps.s3.amazonaws.com/customers/764/images/girlComputer_iStock_84605353_XXLARGE.jpg" alt="laptop"></figure>

Image Object Float Left

room

Media heading

Biscuit pie chocolate cake marshmallow jujubes pastry lemon drops. Pie toffee sugar plum chocolate cake sugar plum chocolate bar. Cake pastry cake ice cream jelly beans. Sweet roll gummies bonbon. Marshmallow cake tootsie roll. Danish carrot cake candy fruitcake liquorice. Bonbon sesame snaps apple pie chocolate jelly-o chocolate bar bonbon tiramisu.

HTML

<div class="float wrap">
  <div class="float-left">
    <a href="#">
      <img src="https://libapps.s3.amazonaws.com/accounts/1908/images/103_2.jpg" alt="room">
    </a>
  </div>
  <div class="float-body">
    <h3 class="float-heading">Media heading</h3>
    <p>Biscuit pie chocolate cake marshmallow jujubes pastry lemon drops. Pie toffee sugar plum chocolate cake sugar plum chocolate bar. Cake pastry cake ice cream jelly beans. Sweet roll gummies bonbon. Marshmallow cake tootsie roll. Danish carrot cake candy fruitcake liquorice. Bonbon sesame snaps apple pie chocolate jelly-o chocolate bar bonbon tiramisu.</p>
  </div>
</div>

Media responsive embed 16x9

HTML

<div class="embed-responsive embed-responsive-16by9">
  <iframe title="Queen at Live Aid" class="embed-responsive-item" src="https://www.youtube.com/embed/vbvyNnw8Qjg?start=10"></iframe>
</div>

Thumbnails

1
2
3
4

HTML

<div class="row">
<div class="col-xs-6 col-md-3"><a class="thumbnail" href="#"><img alt="1" src="https://libapps.s3.amazonaws.com/accounts/1908/images/103_2.jpg" /> </a></div>

<div class="col-xs-6 col-md-3"><a class="thumbnail" href="#"><img alt="2" src="https://libapps.s3.amazonaws.com/accounts/1908/images/current1.jpg" /> </a></div>

<div class="col-xs-6 col-md-3"><a class="thumbnail" href="#"><img alt="3" src="https://libapps.s3.amazonaws.com/accounts/1908/images/thinker.jpg" /> </a></div>

<div class="col-xs-6 col-md-3"><a class="thumbnail" href="#"><img alt="4" src="https://libapps.s3.amazonaws.com/accounts/1908/images/iStock_000043656878_Full-min.jpg" /> </a></div>
</div>