="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

15 Media: Images & Best Practices

Pressbooks allows you to add interactive elements to your book, which are referred to collectively  as “media.” Pressbooks enables you to include three types of media in your book: images, audio and video. All media file uploads must be under 10 MB, but we recommend keeping them under 2 MB.

This chapter focuses on images. You will learn:

  1. How to upload image files into the Media Library
  2. How to insert an image file into your post
  3. How to add images from URL
  4. How to control the placement and appearance of your image file
  5. How to create a gallery
  6. Best practices for handling images in Pressbooks
  7. How to link to an image from a text hyperlink
  8. How to link to a larger image from a thumbnail image in a webbook

1. How to Upload Image Media Files

There are two ways to upload images files: 1) from the left-side dashboard menu, you can access your media library and add or delete files or 2) as you’re writing, you can insert media in a chapter, front matter, back matter or part.

To upload media files using the media library:

  • Go to your dashboard.
  • Click on Media.
  • Your library will appear.
Media Library in Pressbooks

Media Library in Pressbooks

  • Click Add New either in the left menu or at the top of the main panel.
  • A screen will appear where you can upload your images.
Upload media screen

Upload media screen

  • You can drag files from your computer onto this screen.
  • Or, click on Select Files to browse for the correct media files on your computer. Click on the file names and the files will upload.
  • To edit files you have uploaded, click on Media Library.
  • Hover over a file to see the options, then click Edit.

2. Uploading Image Files from Within a Post

  • Go to the post in which you would like to add an image.
  • Put your cursor where you would like the image to appear.
  • Click on Add Media.
Add Media button in Chapter Edit Mode

Add Media button in Chapter Edit Mode

  • The Insert Media screen will appear.
File upload interface

File upload interface

  • An interface will appear with the option to drag and drop or select files.
  • You can also find and select a file that you have already uploaded previously by clicking on Media Library.

3. Upload Image from URL

When you are uploading media from within a post, you can also click on Insert from URL to pull in a link to a photo on the Internet. This image will not be added to your media library.

Insert from URL option

Insert from URL option

4. Controlling the Appearance and Placement of an Image

Once you’ve uploaded your image and inserted it where you want it, for best results, you’ll want to give it some styling.

  • Once your image uploads, click on it.
  • The Attachment Details menu will appear to the right.
Customizing image details

Customize the image details

  • Critical: Give your photo a caption. Photos without captions will not render properly in all e-readers.
  • It’s best practice to write Alt Text, which will be read to visually impaired readers by a screen reader or accessibility device.
  • Add a Title and Description for your image here.
  • Scroll down.
Customize how an image displays

Customize how an image displays

  • Select the preferred alignment for your image.
  • Have your image link to itself, or somewhere offsite.
  • Choose the size at which your image will display. (You’ll want to know your publisher or bookstore’s specs.)

You can edit your images in Pressbooks. More on that in the next chapter, Image Editing.

Image Sizing and File Preparation

We get a lot of questions about how to prepare images for upload into Pressbooks. Those questions are answered in this blog post.

Prefer to watch and learn? Here’s a brief visual intro to adding images in Pressbooks.

5. Create a Gallery

When uploading media from within a post, you also have the option to create a gallery. This allows for several images to be inserted into a post simultaneously, and to be formatted together.

  • Click “Add Media”, then “Create Gallery”
  • Select images for gallery from media library, or upload new files as detailed in section 2 above
  • Click “Create New Gallery”
Creating a gallery

Create a gallery

  • Reorder and delete media files as needed
  • Customize gallery settings on right hand menu (Link to, columns, order, image size)
  • Insert gallery into post
Customize and insert gallery

Customize and insert gallery

6. Best Practices for Working with Images in Pressbooks

For best results, you’ll want to utilize best practices when working with images for your ebook and print book outputs. Refer to this article on using images in Pressbooks for important tips and tricks.

7. Link to an Image Using a Text Hyperlink

To have an image open from a text hyperlink in a light box, follow these steps:

  1. Add the image to your media library by going to Media > Add New
  2. Select your file by clicking Select File
Click select file to upload an image

The file should then appear in your media library.

  1. Click the desired image in your library to access the Attachment Details screen
  2. Copy the image URL
copy the URL from the URL box
  1. Open the chapter you want the image linked in
  2. Highlight the text you want the image to link from
  3. Click Insert/edit link from the Visual Editor toolbar
  4. Paste the URL from the Attachment Details page
Paste the URL into the link interface
  1. Click the blue arrow to insert the image
  2. Click Save
NOTE: If an image is already in your media library, you can access the image and its URL by clicking Add Media at the top of a chapter.

 

8. Make a Thumbnail Open as a Larger Image in a Webbook

To have a thumbnail image open into a larger image in a lightbox, follow these steps:

  1. Open your chapter
  2. Click Add Media to choose from existing images in your media library or upload a new image file
  3. Choose Thumbnail from the drop down menu under Attachment Display Settings > Size in the Add Media window
  4. Click Insert into chapter
Your Add Media interface

Your image will appear in your Visual Editor.

  1. Click the image, then click the Edit icon
Click the edit icon

This will open up the Image Details window.

Choose Media File from the Link To dropdown menu
  1. Click the drop down menu next to Link To and choose Media File
  2. Click Update
  3. Click Save on your chapter

Your image will appear as a thumbnail in your webbook, but open as a larger image once clicked.

Go here to read about enabling Lightbox for images in your webbook.

License

Icon for the Creative Commons Attribution 4.0 International License

Media: Images & Best Practices by Book Oven Inc. (PressBooks.com) is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.