Images with Captions - msu-anthropology/indian-country-ss20 GitHub Wiki

Because this project requires captions on images in order to allow for proper citation, adding images to html files requires a little more than simple <img> 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 you can create as a sub-folder to the one that contains your html file. For example, if your html file is saved in a folder named "example-project," it is easiest to save the image you use into the folder named "images" inside of the one named "example-project." And as always, please make sure you you name your image file without any spaces (you can use dashes instead) and with only lowercase letters.

To add captions to images, it is important to use the <figure> container. Figure containers allow a <figcaption> container within, which makes captioning painless. Furthermore, any changes to the image's size, alignment, or other attributes should be made to the <figure> 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 <figure> container.

Finally, to create a popover that displays the citation information about your image, use an <a> 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.