Skip to Main Content

LibGuides Manual

Image Grid

In some cases, a Gallery Box is not the best solution for displaying several images together, including longer captions that aren't possible in the Image Gallery.  To display images in a grid, two images wide, please use this coding for responsive display.

Video Tutorial - Adding an Image Grid

Begin by watching a short video tutorial that provides instructions for adding an image grid to a LibGuide. This video is 06:00 in length.

View all LibGuides Tutorials on the LS Training website.

Sample Image Grid

1a.) Caption: "Destitute peapickers in California; a 32 year old mother of seven children. March 1936."
Reproduction Number: LC-DIG-ppmsca-12883 (digital file from print)
Note: This is an unretouched version of image #1, and shows a thumb in the immediate foreground on the right side.

Coding for Image Grid

Images and captions should still use the <figure> and <figcaption> coding with a couple of exceptions:

  1. Do no use any class in the <figure> tag
  2. Add class="img-responsive" to the <img> tag

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

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

</figure>

Each individual image and caption combination should be coded this way.


The framing coding to create the responsive grid using <div> tags to create the rows and columns of the grid.  Each row is coded like this:

<div class="row">
     <div class="col-sm-6">

     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-6">
     IMAGE/CAPTION CODING
    </div>
</div>

To add another row to the grid, you would just repeat this coding.


Here is an example of the complete coding to produce the grid above:

<div class="row">
   <div class="col-sm-6">
   <figure><a href="https://www.loc.gov/item/2017762891/" target="_blank">
   <img alt="" loading="lazy" class="img-responsive" src="http://cdn.loc.gov/service/pnp/fsa/8b29000/8b29500/8b29516v.jpg" /></a>
   <figcaption>
   <p><a href="https://www.loc.gov/item/2017762891/" target="_blank"><strong>1.) Caption:</strong> &quot;Destitute peapickers in California; a 32 year old mother of seven children. March 1936.&quot; (re-touched version)</a><br />
<strong>Reproduction Number:</strong> LC-USF34-9058-C (film negative)</p>
   </figcaption>
   </figure>
   </div>

<div class="col-sm-6">
   <figure>
<a href="https://www.loc.gov/resource/ppmsca.12883/" target="_blank">
   <img alt="" loading="lazy" class="img-responsive" src="http://cdn.loc.gov/service/pnp/ppmsca/12800/12883v.jpg" /></a>

   <figcaption>
<p><a href="https://www.loc.gov/resource/ppmsca.12883/" target="_blank"><strong>1a.) Caption:</strong> &quot;Destitute peapickers in California; a 32 year old mother of seven children. March 1936.&quot;</a><br />
<strong>Reproduction Number:</strong> LC-DIG-ppmsca-12883 (digital file from print)<br />
<em><strong>Note:&nbsp;</strong>This is an unretouched version of image #1, and shows a thumb in the immediate foreground on the right side.</em></p>
   </figcaption>
   </figure>
   </div>
</div>

<div class="row">
   <div class="col-sm-6">
   <figure>
<a href="https://www.loc.gov/item/2017762907/" target="_blank">
   <img alt="" loading="lazy" class="img-responsive" src="http://cdn.loc.gov/service/pnp/fsa/8b29000/8b29500/8b29527v.jpg" /></a>

   <figcaption><a href="https://www.loc.gov/item/2017762907/" target="_blank"><strong>4.) Caption:</strong> &quot;Nipomo, Calif. Mar. 1936. Migrant agricultural worker&#39;s family. Seven hungry children. Mother aged 32. Father is a native Californian.&quot;</a><br />
<strong>Reproduction Number:</strong> LC-USF34-9097-C (film neg.)</figcaption>
   </figure>
   </div>

   <div class="col-sm-6">
   <figure>
<a href="https://www.loc.gov/item/2017762908/" target="_blank">
   <img alt="" loading="lazy" class="img-responsive" src="http://cdn.loc.gov/service/pnp/ppmsca/03000/03054v.jpg" /></a
   <figcaption>
<p><a href="https://www.loc.gov/item/2017762908/" target="_blank"><strong>5.) Caption:</strong> &quot;Nipomo, Calif. March 1936. Migrant agricultural worker&#39;s family. Seven hungry children and their mother, aged 32. The father is a native Californian.&quot;</a><br />
<strong>Reproduction Number:</strong> LC-USZ62-58355 (film copy neg.)<br />
<strong>Note:</strong> <em>Original negative was declared missing; original negative number was: LC-USF34-9098-C.</em></p>
   </figcaption>
   </figure>
   </div>
</div>

For the grid to have three columns across, the structural coding looks like this:

<div class="row">
     <div class="col-sm-4">

     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-4">
     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-4">
     IMAGE/CAPTION CODING
    </div>
</div>

For the grid to have four columns across, the structural coding looks like this:

<div class="row">
     <div class="col-sm-3">

     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-3">
     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-3">
     IMAGE/CAPTION CODING
     </div>

     <div class="col-sm-3">
     IMAGE/CAPTION CODING
    </div>
</div>