{"id":40,"date":"2017-02-18T14:43:23","date_gmt":"2017-02-18T19:43:23","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/oerworkshop\/?post_type=chapter&p=40"},"modified":"2017-02-23T20:31:37","modified_gmt":"2017-02-24T01:31:37","slug":"embedding-images-and-videos-within-your-open-textbook","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/oerworkshop\/chapter\/embedding-images-and-videos-within-your-open-textbook\/","title":{"raw":"Embedding Images and Videos within your Open Textbook","rendered":"Embedding Images and Videos within your Open Textbook"},"content":{"raw":"

Embedding Images<\/h1>\r\nOnce you have found an image that you want to embed\u00a0within\u00a0a 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 \u201cAdd Media\u201d button above the toolbar.\r\n\r\nOnce you are here, there are two ways to add an image. You\u00a0can either select\u00a0an image from a folder and drag it right into the middle of the window. Or we can click on \u201cSelect Files\u201d and then select the image that we want to add.\r\n
\r\n\r\nImportant:<\/em>\r\n\r\nAn image file must be a JPG, PNG or GIF. Other file formats will produce an error message and will not be accepted.\r\n\r\nAn image file must be uploaded into the Media Library for use. You cannot add an image by linking to an external source.\r\n\r\n<\/div>\r\nOnce the image is uploaded, you can click edit its details:\r\n
    \r\n \t
  1. If you look\u00a0over\u00a0to the fields on the right, you\u00a0can change the image\u2019s title.\u00a0Right below that, you\u00a0can alter its caption (the caption is\u00a0the 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)<\/a>. Underneath that, the alt text is how the image will be described by things like screen readers for the hearing impaired \u2013 so think of it as a description of the image if the image doesn\u2019t show up. So here we need something like, \u2018A parakeet standing next to a chessboard\u2019. Just a clear, accurate description of the photo.<\/li>\r\n \t
  2. You\u00a0can 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 \u201cAlignment \u2013 centre\u201d.<\/li>\r\n \t
  3. In the \u201cLink To\u201d panel we can choose what happens when we click on the image. So if we select \u201cnone\u201d, the image doesn\u2019t link anywhere. If we select \u201cMedia file,\u201d then clicking on the image links to the full-sized version of the image. If we select \u201cattachment page,\u201d clicking on the image links to the attachment page, which also features the image\u2019s title and description. And if we click on \u201ccustom URL\u201d, 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\u2019ll just say that we want this to link to the media file, to the full-sized image.<\/li>\r\n \t
  4. And then finally, we can select the image\u2019s display size. So, let\u2019s say I want this image to shrink to 300 pixels across. Now, obviously, the original file here is 4000 pixels across, it\u2019s massive. In order to shrink the display down to 300 pixels, I select the \u201cMedium\u201d 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\u2019ll click on \u201cUpdate\u201d. And then we\u2019ll go into our \u201cBook view\u201d. And we\u2019ll refresh the page. And you\u2019ll 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.<\/li>\r\n<\/ol>\r\nOne more thing:\u00a0Now that you've\u00a0inserted our image into the page, if you\u00a0want to make any edits, you\u00a0can 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\u2019s details or its display settings.\r\n
    \r\n

    Video Overview<\/h3>\r\n