Embedding Images

Once you have found an image that you want to embed within a chapter of your open textbook, navigate to that chapter and place your mouse cursor in the approximate position where you would like to place the image. Click on the “Add Media” button above the toolbar.

Once you are here, there are two ways to add an image. You can either select an image from a folder and drag it right into the middle of the window. Or we can click on “Select Files” and then select the image that we want to add.

Once the image is uploaded, you can click edit its details:

1. If you look over to the fields on the right, you can change the image’s title. Right below that, you can alter its caption (the caption is the text that appears in small font beneath the image in the book). You may use the caption field to enter the proper attribution for your image (see the Open Washington attribution tool). Underneath that, the alt text is how the image will be described by things like screen readers for the hearing impaired – so think of it as a description of the image if the image doesn’t show up. So here we need something like, ‘A parakeet standing next to a chessboard’. Just a clear, accurate description of the photo.
2. You can also change the attachment display settings. We typically want our images centre-aligned, that tends to work out best for viewing the book, so we want to click on “Alignment – centre”.
3. In the “Link To” panel we can choose what happens when we click on the image. So if we select “none”, the image doesn’t link anywhere. If we select “Media file,” then clicking on the image links to the full-sized version of the image. If we select “attachment page,” clicking on the image links to the attachment page, which also features the image’s title and description. And if we click on “custom URL”, then clicking on the image will take us to whatever URL we put in the URL field, so that allows the image to act like a hyperlink. So, for now, we’ll just say that we want this to link to the media file, to the full-sized image.
4. And then finally, we can select the image’s display size. So, let’s say I want this image to shrink to 300 pixels across. Now, obviously, the original file here is 4000 pixels across, it’s massive. In order to shrink the display down to 300 pixels, I select the “Medium” size. And then I can insert this image into the post. And you can see that the shrunken image appears in the middle there. So we’ll click on “Update”. And then we’ll go into our “Book view”. And we’ll refresh the page. And you’ll see that the image is shrunk down on the page to 300 pixels, and, if we click on it, you can see the full size image here.

One more thing: Now that you’ve inserted our image into the page, if you want to make any edits, you can just click on the image, and then click on the pencil that appears in the popup menu above, and once again, we can edit the image’s details or its display settings.

Embedding Videos

Once you find a video clip from YouTube that you would like to embed within your chapter, click on the “Share” button that lies right below the video’s title. Next, click on the “Embed” tab. When you do this, YouTube automatically produces and selects the HTML code that you need. Copy the HTML code.

Navigate back to your chapter and click on the “Text (HTML)” tab that lies right above the toolbar. Scroll down the page to where you would like to embed your image (although you are looking at the HTML code you should still be able to read your text). Next, paste the HTML code that you copied from YouTube. Once you do this, switch back to the “Visual” tab to verify that you have placed the video at the desired position (if not, go back and move the HTML code you pasted from YouTube). You will see that Pressbooks automatically embeds your selected video within the chapter. Click “Update” on the right sidebar to save your changes.

Important: Although it is nice to be able to use YouTube clips that have a Creative Commons license, this method allows you to embed any clip from YouTube. Because you are not downloading the video clip and only linking to it, this is permissible.