Using Pressbooks

How to Add and Edit Images

Take Note

  • An image file must be a JPG, PNG or GIF. Other file formats will produce an error message and will not be accepted.
  • An image file must be uploaded into the Media Library for use. You cannot add an image by linking to an external source.

 

Transcript of video

Today we’ll be going through how to upload and apply media assets with the Media Manager. The most common type of media asset we’ll use is the image, but on some occasions we might also want to link to files like PDFs or PowerPoints as well. So in this tutorial, we’ll cover both images and other types of media.

So, let’s start by adding images. We can go into the “Media” panel on the left-hand side, and click on “Add New”. And once we’re here, there are two ways to add a resource. We can either take an image or resource from a folder and drag it right into the middle here. Or we can click on “Select Files” and then select the image that we want to add. Now, Pressbooks only accepts certain image file types, so make sure that your image uses a common file type – something like a .jpg or a .png is your best bet. If you’re uploading an image, do try to have it properly sized and compressed beforehand – no bigger than 500 pixels on either side is best, as it’ll stay nicely within the margins of the book, and won’t affect the file size of your book too much. So having said that, I’ll upload a large image here – this one is 4096 by 3072 pixels – just so we can learn how to resize the image later.

So we’ll click on “Choose”. And then once the image is uploaded, you can go into “Library” on the left-hand side, and then you can click on the image and edit its details. So if we go over to the fields on the right, we can change the image’s title – I won’t touch that.

Right below that, we can alter its caption. Now the caption will be the text that appears in small font beneath the image in the book. So maybe I want this to say, ‘This parakeet acts like a sore loser after a loss in chess’. Whatever we want to display right underneath the image in the actual book goes there.

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.

And then right underneath that, the description is what anyone will read if they navigate to the image attachment page. So if I type, ‘Parakeet and chessboard’, and then if I click on the “View Attachment Page” link right underneath that, we can see that at the bottom of the page, our ‘Parakeet and chessboard’ description is right there. So we’ll go back.

One last thing: we can also go to the “Edit Image” button on the bottom left-hand side of the screen, and if we’re here we can crop or resize the image. However, it’s strongly recommended that any edits to images be done in an outside program like Photoshop before being uploaded. So we’ll just click “Cancel”. And then we can exit the image with the “X” button in the top-right corner, and it’ll save our changes.

OK, so now that we’ve got our image uploaded, we can add it to our book. So let’s navigate back to “Chapter 1”. We’ll create a space beneath our first line, and we’ll click on the “Add Media” button above the toolbar. And once we’re here we can see that the image that we added is here in the Media Library. You can also add images to the library by clicking on the “Upload file” button on the top and then doing what we did before.

So we’ll just click on our image, and we can edit the details again here. We’re not going to touch that, but if you scroll down, you can see that we can also change the attachment display settings. We typically want our images center-aligned, that tends to work out best for viewing the book, so we want to click on “Alignment – centre”.

Right below that, 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.

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.

Again, you probably don’t need your reader opening up an image as massive as this, especially because this is a big file size as well, so it’s taking a long time to load. So this is the reason that we try to resize our images to the desired size before we upload them.

Alright, so let’s go back to the “Editing view”. And just one more quick little thing. So now that we’ve inserted our image into the page, if we want to make any edits, we 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.

And that is how we add an image.


So now let’s look at some other file types. Sometimes, you want to upload a file that the reader can download, something like a PowerPoint file or a PDF. So we’re here in “Chapter 1”, and we’re going to upload a PDF file this time. So, once again, we’ll go to the “Add Media” button above the toolbar, select “Upload Files”, and then click “Select Files” in the middle, and we’ll select our “Intro to Pressbooks” PDF. I won’t bother changing the attachment details.

Now, inserting this PDF into our page is different than adding an image. See, inserting this PDF does not cause an image of the PDF to show up – instead, it creates a link to the file using the file title as the text. So what you’re really creating is a link to the file. Now if you’d like a certain piece of text to link to this PDF – so for example, if we’ve got a bit of text here that says ‘click here to view PDF’ – then what we can do is, we can go back to the “Media Library”. So we’ll click on “Add Media” to open that up, we’ll click on the PDF file, and then over on the right, we will copy that URL, then we will exit from the media library.

We’ll highlight the text, we’ll click on the “hyperlink tool” in the top toolbar, and we’ll paste the PDF URL into that hyperlink. And then we’ll click on the “Apply” button on the right hand side, and now that text should link us to the PDF.

And in this very same way we can even make our image link to the PDF if we want – so if we can click on the image, on the “Edit” button, and then go down to the “Link To”, we can change that from “Media File” to “Custom URL”, and we can once again paste in the PDF’s URL into this URL field. And if we update that image, now, we should have a link and an image that, when clicked on, should lead us to the PDF that we just uploaded.

So let’s “Update” this chapter. And then we’ll go up to the “Book view”, and we’ll see if this has worked. So we’ll refresh the page, and this link should lead us to the PDF, so if we click on it, there we go, it does lead us to the PDF. And we’ll check the image as well, so if we click on that image, that too, also leads us to the PDF, that’s exactly what we wanted.

So there you go! You now know how to upload and apply media assets such as images and PDFs in Pressbooks.

Comments are closed.