Your first iteration was successful. Now let’s do another iteration and add on some more capability.

As easy as the first iteration was, a text-only book might not be enough for your needs. You might like to add images. So let’s see how to do that.

Adding using AsciiDoc is easy. So let’s walk through it step-by-step.

If I asked you where your car keys are now, could you tell me their location without actually giving the keys to me? Yes.

Well, that is the approach we’ll use for adding images. Instead of dragging and dropping like you do in word processing applications, we’ll just tell the AsciiDoc file where the image is located. That’s it. When it renders, the rendering app goes and gets the image and adds it right where you told it to add the image.

Let’s use an example. Let’s go back to the example chapter you just finished and add an image after the first paragraph. The following is the AsciiDoc source I’m adding to get the image.

Here is a new paragraph, below which I'm adding my image. (1)
(2)
.My Silly "Fake Text" Image (3)
image::media\FakeTextImage.png[] (4)
(5)
Here is the next new paragraph. Blah blah blah blah blah. Blah blah blah blah blah blah blah blah. Blah blah blah blah.
  1. A new paragraph added to discuss the image

  2. A line break between the preceding paragraph and the image block

  3. The figure caption goes after the period with no spaces.

  4. The image:: identifier tells the render app to find the image file at the path that follows. In this case the file path is media\FakeTextImage.png. The square brackets at the end tell the rendering app that the image path is done.

  5. A line break between the image block and the following paragraph

Note
Please notice that I have not allocated any time to improving my graphic artist skills. This poor graphic is my attempt to show an example image, and I did it with a picture of text.

That’s it. You did it. The render app goes and gets the image where you told it and puts it right here. The following is this new content rendered so you can see how it comes out.

media\Example1WithImage
Figure 1. Example File With an Image

Making Screen Capture Images

To capture images from your screen for your book, there are two free tools I recommend depending on your system.

  • Greenshot app for Windows

  • Command + Shift + 4 for Mac (it is a built in screen capture utility for MacOS)

Editing Images

There are two great free tools for editing images. For raster graphics, the app called Gimp is terrific. It is a free replacement of Photoshop.

For vector graphics, a good tool is Inkscape.

These both work for all platforms.

Image Resolution

Images designed for use on a web page or eBook can be 72 dpi resolution, but images intended for printing with a PDF file need to be 300-600 dpi resolution.

Use an image editing app, such as GIMP, to edit the resolution of images. The publishing app will take exactly what you give it.

So check your PDF and HTML versions carefully. If your PDF images are going off the page, you will need to change their size to fit within your paper margins at the desired resolution.

If your images seem blocky you might have tried to increase a 72 dpi image to 300 dpi or more for print. A good rule of thumb is that you can start with high resolution images and edit easily to lower resolution, but you cannot go from low resolution images to high resolution images without losing image clarity.

Image

Line By Line

Here a Little, There a Little, Layer by Layer.

Back to Overview