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.
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.
1.) Caption: "Destitute peapickers in California; a 32 year old mother of seven children. March 1936." (re-touched version)
Reproduction Number: LC-USF34-9058-C (film negative)
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.
5.) Caption: "Nipomo, Calif. March 1936. Migrant agricultural worker's family. Seven hungry children and their mother, aged 32. The father is a native Californian."
Reproduction Number: LC-USZ62-58355 (film copy neg.)
Note: Original negative was declared missing; original negative number was: LC-USF34-9098-C.
Images and captions should still use the <figure> and <figcaption> coding with a couple of exceptions:
<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> "Destitute peapickers in California; a 32 year old mother of seven children. March 1936." (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> "Destitute peapickers in California; a 32 year old mother of seven children. March 1936."</a><br />
<strong>Reproduction Number:</strong> LC-DIG-ppmsca-12883 (digital file from print)<br />
<em><strong>Note: </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> "Nipomo, Calif. Mar. 1936. Migrant agricultural worker's family. Seven hungry children. Mother aged 32. Father is a native Californian."</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> "Nipomo, Calif. March 1936. Migrant agricultural worker's family. Seven hungry children and their mother, aged 32. The father is a native Californian."</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>
