Skip to Main Content

LibGuides Manual

Images With Captions

The most common way to include an image in your guide will be to add it as an image with a caption. In fact, if you include an image from the Library's digital collections, you must include a caption underneath the image following the caption format instructions below. 

Video Tutorial - Adding an Image Caption

Begin by watching a short video tutorial that provides instructions for adding captions to images in LibGuides. This video is 03:22 in length.

View all LibGuides Tutorials on the LS Training website.

Format for Captions

Caption information should include the creator of the image (if available), the title of the image (from the "item" record), the date, the name of the collection (optional), and the curatorial division. The title should be in italics. Separate each part of the caption using a period.

Captions for Images from the Library of Congress

You should link to the "item record" (for example, https://www.loc.gov/item/2017762891/) from the image itself as well as the "Creator" and "Title" portion of the caption.

Creator. Title. Date. Collection Name {optional}. Division Name.

Example:
Dorothea Lange, photographer. Destitute pea pickers in California. Mother of seven children. Age thirty-two. Nipomo, California. 1936. Library of Congress Prints and Photographs Division.

The standard caption format should also be used for images from blog posts and online exhibitions. Rather than linking to an "item record," the "Creator" and "Title" of such images should link to the blog or exhibition page where the image resides. 

Captions for Other Images

On the rare occasion that you include an image from another source, or a photograph or screenshot supplied by you, the caption format will be slightly different. Include any necessary attribution or credits.

Using Images of Physical Collection Items

If your guide’s focus is on Library of Congress collections that are not yet digitized, there may be times when you wish to include an image that represents an item from the physical collections.  You will need to scan or capture this image yourself, crop and size it so that the width is 1024px wide (if the image will only be aligned left or right, you can size to 800px wide), and load that image into the SpringShare Image Manager.

Follow the standards for caption formatting, but do not link from the image itself or from the author/title portion of the caption (links from images or image captions should only be provided to the item in the digital collections, or other existing online presentation on the Library’s website).

Example:
Gujarātī [microform] = The Gujarati. Cover of January 2, 1881 issue. Library of Congress Asian Division. View fuller bibliographic information about this item in the Library of Congress Online Catalog.

Other examples for Physical Collection Items: 

This is a great example of a small and unique non-digitized collection which is the subject of this guide. One image is used to illustrate the homepage. But, instead of linking out here, it makes more sense for all of the catalog links to reside on the page for where the whole collection is listed, using Book from the Catalog items:  https://guides.loc.gov/hebrew-incunabula/short-title-list

Image is used as an illustration with no link. However, the link to the collection level catalog record is included as a Book from Catalog link right below.

This one includes the reference and link to the online catalog record with the new boilerplate text.
 

Adding Captions to Images

Within the Rich Text/HTML editor, it is possible to include images that are aligned right, left, or centered. Centered images will interrupt the flow of text, and it will appear before and after the inserted image. Text will flow to the left of right-aligned images and to the right of left-aligned images.

After the image has been inserted, you are ready to apply the coding for aligning the image and including the figure caption.

The basic structure for the figure coding looks like this (anchor tag coding is included to show around the image and around the title portion of the caption):

CENTERED

<figure class="figure"><a href="" target="_blank"><img alt="" loading="lazy" src="" /></a>

<figcaption><a href="" target="_blank">Creator, role. <em>Title.</em></a> Rest of the caption.</figcaption>

</figure>

FULL WIDTH

<figure class="figure align-stretch"><a href="" target="_blank"><img alt="" loading="lazy" src="" /></a>

<figcaption><a href="" target="_blank">Creator, role. <em>Title.</em></a> Rest of the caption.</figcaption>

</figure>

LEFT

<figure class="figure align-left"><a href="" target="_blank"><img alt="" loading="lazy" src="" /></a>

<figcaption><a href="" target="_blank">Creator, role. <em>Title.</em></a> Rest of the caption.</figcaption>

</figure>

RIGHT<

<figure class="figure align-right"><a href="" target="_blank"><img alt="" loading="lazy" src="" /></a>

<figcaption><a href="" target="_blank">Creator, role. <em>Title.</em></a> Rest of the caption.</figcaption>

</figure>

Examples

Centered Image With a Caption

Use the <figure> and <figcaption> codes to format your image and caption. 

Sample coding for a centered image with a caption:

<figure class="figure"><a href="https://www.loc.gov/item/2004665360/" target="_blank"><img  alt="" loading="lazy" src="https://cdn.loc.gov/service/pnp/pga/03800/03898v.jpg" /></a>
<figcaption>
<a href="https://www.loc.gov/item/2004665360/" target="_blank">Thomas Nast, artist. <em>Emancipation.</em></a> 1865.
Popular Graphic Arts. Library of Congress Prints & Photographs Division.
</figcaption>
</figure>
Thomas Nast, artist. Emancipation. 1865. Popular Graphic Arts. Prints & Photographs Division.

Full-width Image With a Caption

Use the <figure> and <figcaption> codes to format your image and caption.

Sample coding for a full-width image with a caption:

<figure class="figure align-stretch"><a href="https://www.loc.gov/item/2004665360/" target="_blank"><img  alt="" loading="lazy" src="https://cdn.loc.gov/service/pnp/pga/03800/03898v.jpg" /></a>
<figcaption>
<a href="https://www.loc.gov/item/2004665360/" target="_blank">Thomas Nast, artist. <em>Emancipation.</em></a> 1865.
Popular Graphic Arts. Library of Congress Prints &amp; Photographs Division.
</figcaption>
</figure>
Thomas Nast, artist. Emancipation. 1865. Popular Graphic Arts. Library of Congress Prints & Photographs Division.

Sample coding for a left-aligned image with a caption:

<figure class="figure align-left"><a href="https://www.loc.gov/item/2004665360/" target="_blank"><img  alt="" loading="lazy" src="https://cdn.loc.gov/service/pnp/pga/03800/03898v.jpg" /></a>
<figcaption>
<a href="https://www.loc.gov/item/2004665360/" target="_blank">Thomas Nast, artist. <em> Emancipation.</em></a> 1865.
Popular Graphic Arts. Library of Congress Prints &amp; Photographs Division.
</figcaption>
</figure>
Thomas Nast, artist. Emancipation. 1865. Popular Graphic Arts. Library of Congress Prints & Photographs Division.

Lorem ipsum dolor. Sit amet donec justo feugiat nisl inceptos ipsum feugiat. Amet nulla ultricies. Aliquam ac vestibulum. Pellentesque facilisis est. Eget ac ut. In quis id. Nascetur odio diam turpis quam volutpat. Tristique ante sit faucibus proin maecenas at earum vitae. In tellus et et at purus posuere nec fringilla nulla leo ipsum maecenas mauris fusce. Mollis at facilisis. Integer dolor pharetra. Dui dictum metus placerat sodales sed cras vehicula et consequat accumsan ornare hac velit pellentesque donec in tristique wisi faucibus mi. Vel quis quasi molestie in ullam nec accumsan suspendisse aliquet ipsum sed doloribus suscipit porttitor sed in vestibulum. Facilisi suscipit odio. Pellentesque ut pede. Natoque elit tincidunt. Felis nulla magnis. Natus in mi. Condimentum ultrices amet.

Corrupti lorem curabitur dignissim in in. Quam vulputate massa eu amet a. Ligula dolor corporis. Dapibus nulla elit donec vel et lectus elementum erat. Nulla eu suspendisse. Sit vitae dolor eros deleniti ut. Faucibus viverra porta dolor in tincidunt. Turpis felis eros. Massa magnis sem wisi in malesuada. Erat aliquam vivamus maecenas praesent mattis cursus aliquet augue. Quam con consequat. Vestibulum cursus nulla mi amet cras. Vitae in vestibulum blandit sit arcu. Quis nonummy nisl amet in magna ligula sollicitudin tempor. Nunc in sit. Erat nisl dolor sociosqu porttitor fermentum enim lobortis tortor pharetra suscipit nibh nisl amet eget est nam pellentesque. Ipsum dolor tortor. Sollicitudin consectetuer dolor. Elementum ut integer tellus convallis lorem. Eu potenti dapibus erat massa sit.

Sample coding for a right-aligned image with a caption:

<figure class="figure align-right"><a href="https://www.loc.gov/item/2004665360/" target="_blank"><img  alt="" loading="lazy" src="https://cdn.loc.gov/service/pnp/pga/03800/03898v.jpg" /></a>
<figcaption>
<a href="https://www.loc.gov/item/2004665360/" target="_blank">Thomas Nast, artist. <em> Emancipation</em></a>.1865. Popular Graphic Arts. Library of Congress Prints &amp; Photographs Division.
</figcaption>
</figure>
Thomas Nast, artist. Emancipation. 1865. Popular Graphic Arts. Library of Congress Prints & Photographs Division.

Lorem ipsum dolor. Sit amet donec justo feugiat nisl inceptos ipsum feugiat. Amet nulla ultricies. Aliquam ac vestibulum. Pellentesque facilisis est. Eget ac ut. In quis id. Nascetur odio diam turpis quam volutpat. Tristique ante sit faucibus proin maecenas at earum vitae. In tellus et et at purus posuere nec fringilla nulla leo ipsum maecenas mauris fusce. Mollis at facilisis. Integer dolor pharetra. Dui dictum metus placerat sodales sed cras vehicula et consequat accumsan ornare hac velit pellentesque donec in tristique wisi faucibus mi. Vel quis quasi molestie in ullam nec accumsan suspendisse aliquet ipsum sed doloribus suscipit porttitor sed in vestibulum. Facilisi suscipit odio. Pellentesque ut pede. Natoque elit tincidunt. Felis nulla magnis. Natus in mi. Condimentum ultrices amet.

Corrupti lorem curabitur dignissim in in. Quam vulputate massa eu amet a. Ligula dolor corporis. Dapibus nulla elit donec vel et lectus elementum erat. Nulla eu suspendisse. Sit vitae dolor eros deleniti ut. Faucibus viverra porta dolor in tincidunt. Turpis felis eros. Massa magnis sem wisi in malesuada. Erat aliquam vivamus maecenas praesent mattis cursus aliquet augue. Quam con consequat. Vestibulum cursus nulla mi amet cras. Vitae in vestibulum blandit sit arcu. Quis nonummy nisl amet in magna ligula sollicitudin tempor. Nunc in sit. Erat nisl dolor sociosqu porttitor fermentum enim lobortis tortor pharetra suscipit nibh nisl amet eget est nam pellentesque. Ipsum dolor tortor. Sollicitudin consectetuer dolor. Elementum ut integer tellus convallis lorem. Eu potenti dapibus erat massa sit.