Use inline images in the body of a node

**Use Case**

You have content in a page (e.g. book, blog, story, etc) and want to add some images to go with the text. Typically, screenshots, photos, etc.

**Constraints**

Because this method uses the node's file attachment feature, there is no independent access control over the image visibility. It also does not provide the digital asset management that would be present if the images were uploaded as their own nodes.

**Preparation**

Screenshots and line graphics should be in the [w:PNG] format. Photos should usually be in [w:JPEG] format with 85-90% compression quality. Images should generally not be wider than 800 pixels as some monitors may have difficulty with large pictures.

**Instructions**

1. Edit the node
2. Upload and attach the images under the "File Attachments" section.
3. Uncheck the "List" option for each attachment that is an image.
If you don't uncheck this, the attachment will be listed at the bottom of the node as a "download" link (typically this is used with PDF files and other attached materials).
4. Add appropriate special tags to your content that references the attachments.

See this screenshot below, and note the unchecked "List" option:
[inline-center:4]

**Image Embedding Tags**

The special tag to make an image looks like this; [inline-mode:name=Caption...]. This is just an example, and not one that actually works. The exact format of this tag varies. The following list of examples should be sufficient:

1. Centered image, clear text flow around the sides:

[inline-center:Photo 11.jpg=Wow look at me!]

[inline-center:Photo 11.jpg=Wow look at me!]

2. Image floats to the right, text flows around.

[inline-right:Photo 12.jpg=Woo Hoo!]

[inline-right:Photo 12.jpg=Woo Hoo!] And then the monk said to the dog, "What is it about bones? Why do you like them so?", and the dog said "Bone? Where is there a bone?". At this point in the conversation, the monk began to suspect that his furry friend did not, perhaps, understand the subtle nature of the question. By now the astute observer will have noticed that the subtleties of this conversation are completely irrelevant anyways, since what we are *really* here to see is how this text flows around the image that is floating on the right hand side of this paragraph.

You can also float the image to the left using the obvious "left" variant:

[inline-left:Photo 12.jpg=Woo Hoo!]

3. Image without caption.

[inline-center:Photo 13.jpg]

4. You don't necessarily have to type the file name either, you can use its "number" instead. The first attachment is "1", and so on. This would embed Photo 13.png, the third attachment on my list:

[inline-center:3]

And, of course, you can add a caption or change the center / left / right display mode as well.

[inline-center:3=The mystery image]

**Troubleshooting**

If you type the image name wrong, or refer to a file slot that does not exits, you will see the words "NOT FOUND" in big bold letters in the text, like this: [inline-center:junk.jpg=Check out this junk!].

There is a bug with some browsers that causes file attachments to fail after pressing the 'Attach' button; If this happens, use the 'Submit' button at the bottom of the node form instead.