Images with Captions

Because LEADR projects often require captions on images in order to allow for proper citation, adding images to html files requires a little more than simple tags. Furthermore, the src value for an image used on a LEADR project should point to a locally-saved image, rather than a URL of the image on a website. This means you should be saving images from the internet into your repo, often into the "images" folder that is a sub-folder to the one that contains your html file. For example, if your html file is saved in a folder named "sites," it is easiest to save the image you use into the folder named "images" inside of the one named "sites."

To add captions to images, it is important to use the

container. Figure containers allow a container within, which makes captioning painless. Furthermore, any changes to the image's size, alignment, or other attributes should be made to the tag instead. Define the <img> tag with width="100%" in order to ensure the image's width expands and contracts as you change the size of the container.

Finally, to create a popover that displays the citation information about your image, use an tag with the href attribute set to "#", the rel attribute set to "citation", the data-toggle attribute set to "popover", and the data-content defined as the text of your citation.

<figure style="float: right; width: 35%; padding-left: 20px; padding-bottom: 5px;">
	<img src="img/gebel2.jpeg" width="100%" />
	<figcaption>Image 1 - "Gebel el Haridi, Quarry F Entrance"</figcaption>
</figure>

And here is a similar example, with a popover:

<figure style="float: right; width: 35%; padding-left: 20px; padding-bottom: 5px;">
	<img src="img/gebel2.jpeg" width="100%" />
	<figcaption><a href="#" rel="citation" data-toggle="popover" data-content="The Egypt 
	Exploration Society. Gebel el Haridi, Quarry F entrance. Flickr, accessed 24 October 
	2016.">Image 1</a> - "Gebel el Haridi, Quarry F Entrance"</figcaption> 
</figure>

To see the full code in action, go to this example code page.