Skip to Main Content

Cheat Codes for Advanced Layout in LibGuides: Figures / Images

Figure Element with Image and Caption

HTML

<figure>
    <img src="https://libapps.s3.amazonaws.com/....jpg" alt="woman at computer">
    <figcaption>Caption for this image.</figcaption>
</figure>

Options
Option Add the following as a class... In this element
Frame around both image and caption frame figure
Frame around image only frame img
Border around image border img
Centered caption center figcaption

Image Float with Text

HTML

<figure class="imgWrap left" style="width: 30rem;">
  <img loading="lazy" src="https://libapps.s3.amazonaws.com/....jpg" alt="newspaper clippings" />
  <figcaption>Artist File</figcaption>
</figure>

<p>Vivamus...</p>

<p>Morbi...</p>

If the image were in its own box, you would't need to worry about its size; the box would resize the image automatically. However, because the image is in a box with text, you'll need to set a width on the figure (see highlighted bit above). 

Translating pixels to rems:  move the decimal one place to the left. Example:  300px = 30rem.

Options
Option Add the following as a class... In this element
Float the image imgWrap (required) figure
Float image to the left of text left figure
Float image to the right of text right figure
Centered caption center figcaption
Top Bottom