Images

Each book has its own media library that all chapters in the book share. To upload images to the book's media library, navigate to the book's home page and click on the media library button at the top of the page.

Media library icon
Media Library Icon

When uploading images, be sure that each desired image has a unique name. Uploading an image with the same name as a previously uploaded image will give the new image a new name. If you would like to update an image across an entire book, simply delete the image from the media library first and then upload the updated version with the same name.

Once an image is in the media library, it can be embedded in any chapter by editing the chapter, clicking on the "Insert/edit image" button, and selecting the image's name from the dropdown menu.

Alternatively, if an image is already hosted on another website on the internet, a chapter author can hotlink to it by pasting the image's URL directly into the image embed window. When saving the chapter, if the system detects that the image is hosted on another site, it will attempt to automatically download it and save it on EdTech Books.

Text Wrapping

Because all books created on this site are intended to be mobile-first, and because mobile devices have very small screens, most images you include in your book should fill the entire width. Otherwise, you may have instances where only a couple of words are shown on a single line of text.

However, there might be legitimate times when you have a small image that you do not want to take up the full width of the page (as with the media library icon above). Text wrapping in HTML-speak is done with what is called "floating." Programmatically, we accomplish this by using some fancy styling that allows the page to change floating options depending upon the size of the page (e.g., floating the image if the width is large [as with a laptop's web browser], while removing the float if it is small [as with a phone's web browser]).

image-1.png
The image float drop-down menu

To do this in the editor, simply right-click on the image, choose "Image...," and select one of the custom classes from the provided drop-down menu. If you want your image to be on the left of the page and for the text to wrap around it on the right, then choose one of the "Float Left" options. If you want your image to be on the right, then choose one of the "Float Right" options.

Note that the preview in the editor of the text wrapping may not be accurate, so you will want to save the chapter to see how it actually looks.

Text Wrapping with Captions

If your image has a caption, then floating becomes even more complicated, because the float must not just apply to the image itself but also to the caption and to their parent element (in HTML-speak, their "figure" element).

image-2.png
If the image has a caption, apply the float setting to the figure, not the image

This means that if you follow the process above with your image, which applies a float just to the image, then the caption may be on its own—centered on the page or disjointed from the image it's supposed to describe.

To correct this, simply right-click on any image with a caption and choose "Figure...". Then, choose the desired float option from this drop-down menu instead. Doing so will apply the float to the entire figure (which contains both the image and the caption), as in the example in this section.

You should not apply a float to both an image and its figure at the same time. When you apply a float to the figure (as described here), then it overrides the original float setting on the image, and vice-versa. So, if your image has a caption, simply set the float in the "Figure..." dialog and not the "Image..." dialog.

Two Floated Images Side-by-Side

You can place two floated images side-by-side by using the process above, applying a "Float Left" to the first and a "Float Right" to the second. This will show the two images side-by-side on larger screens but will reorganize them to a stacked view on smaller screens. To make this easier, you can also insert two placeholder images by clicking "Tools > HTML Snippets > Side-by-side Images" and then right-clicking each, choosing "Image...," and replacing it with the desired image.

The first of the side-by-side images.
The second of the side-by-side images.
 

You can test the behavior of the two images above by resizing your screen or by viewing the page on different devices.

Avoiding Float Overlaps with Clear Fixes

One final difficulty with floats is that it is not always obvious to the browser what text and other elements should be wrapped around the image and what should not. This can lead to some ugly layouts if you have multiple floated images near one another or don't have enough text following a floated image.

To remedy this, you can insert an invisible element anywhere on the page to tell the HTML to stop the wrapping and to put any new content below it on a fresh, new line. To do this in the editor, simply place your cursor where you want the wrapping to stop and choose "Tools > Clear Fix." This will insert the dashed, green element on your screen below to let you know that all wrapping will stop at that point.

clear-fix.png

The green indicator is only visible to you in the editor and will not be shown to your reader. This allows you to start a new line of text or even a new floated image on a new line, separate from any previous wrapping introduced by earlier images.

End-of-Chapter Survey

: How would you rate the overall quality of this chapter?
  1. Very Low Quality
  2. Low Quality
  3. Moderate Quality
  4. High Quality
  5. Very High Quality
Comments will be automatically submitted when you navigate away from the page.