The primary way to add images to your guide is to link to items in the Library's digital collections. Once you've linked to an image you can change its alignment by editing the HTML.
Begin by watching a short video tutorial that provides instructions for adding an image from the Library's digital collections to a LibGuide. This video is 03:11 in length.
Next, watch the video tutorial that provides instructions for changing image alignment. This video is 02:55 in length.
1. From the “item” record (e.g., https://loc.gov/item/89714223/), locate the “Download:” box. Open the drop-down menu and select the medium- or larger-sized JPEG image for the item:
2. When you select Go, the appropriate image will display on its own tab in your browser,. From there, you can block and copy the URL from the URL box:
You will need the image's URL in order to display the image in your guide..
3. Edit an existing Rich Text/HTML box, or add a new box to the content area of your LibGuide in order to include an image.
4. If appropriate, add text to the box (if you are pasting text from Word, another guide, or an email, remember to use “paste as plain text”):
5. Place your cursor at the beginning of the paragraph where you want the top edge of your image to align/display (you may wish to press the Enter key to create so space). Select the Image button and the "Image Properties" dialog box will appear. The URL box is where you will paste the URL for the individual image that you want to include in your guide.
6. Paste the image URL into the URL box. Because you are not using a caption, you will need to provide “Alternative Text” describing the image. And, since the CSS will be controlling the size and position of the image, you will need to remove and “Width” and “Height” numbers that appears in those boxes:
7. If you want your image to link to the URL for the "item record", or some other appropriate URL address, select the Link tab. Paste in the appropriate URL and select “New Window (_blank)” from the Target: drop-down menu. Click OK from either this screen, or return to the previous tab (make sure no height or width appears) and then click OK
8. Once you have included an image in the "Rich Text/HTML" box, you can now add alignment to the image. Select the Source button to display HTML code view.
9. In the Source (HTML view), you will need to locate the tag that begins with “<img...“. To size and align the image you will need to surround the <img> tag with one of the HTML <figure> tag options show below:
<figure class="figure"><img src="..." /></figure><figure class="figure align-left"><img src="..." /></figure><figure class="figure align-right"><img src="..." /></figure><figure class="figure align-stretch"><img src="..." /></figure><figure class="figure"></figure>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.
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.
<figure class="figure align-left"></figure>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.
<figure class="figure align-right"></figure>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.
<figure class="figure align-stretch"></figure>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.
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.
Many images is the Library's digital collections cannot be viewed in their full size from an offsite computer (only a very small thumbnail may be viewed offsite). These images can be easily identified because they display the message: Full online access to this resource is only available at the Library of Congress.
When including a rights-restricted image, you will need to resize the image using graphics editing software, and then add the appropriate new width to the <figure> tag. The steps for using a rights-restricted image are:
In the example below, the width of the image is "300px". However, if the image is taller that it is wide, the width will be a number less than 300px. You can obtain the width of the image from your graphics software:
style="width:300px;">