It's easy to miss the "add image" icon, but it's at the lower left corner of the text box for every forum and feedback post.
Adding an image this way creates a page for the image on the Foldit website, totally separate from where it appears in your post. These image pages allow for additional comments, similar to feedback and forum posts. The comments for images can in turn include additional images.
The process of adding an image requires several steps, as described in detail below.
Step 1 - Click "add image" icon
The "add image" icon is plus sign with a tilted representation of a photograph. The plus sign is probably intended to be green, but it's a tough call for those with certain forms of anomalous color vision.
Clicking on the icon the opens a dialog in a new browser window.
Step 2 - browse/upload images
Step 3a - Image page
Each new image gets its own page on the Foldit website, separate from where it appears in a forum or feedback post. The first step is to click the "Browse" button, which opens a "file open" dialog.
This dialog opens in a small window, so you'll need to scroll down or resize the window to see the "Save" and "Preview" buttons. The image here has been adjusted to show them.
Step 3b - File open dialog
Step 4 - Complete image page
Once you've selected an image, you're returned to the image page.
Give the image a title, which is required. You can use the "body" field for additional information. In theory, the more you add, the easier it will be for others to find the image.
You'll need to scroll down or expand this dialog to see the "Save" button, which is normally off the screen.
When you click "Save", the new image page is created. The image page is independent of the feedback or forum post. The image page can have comments, just a feedback or a forum post, although this feature is rarely used on the Foldit website.
Step 5 - Image insertion
This dialog controls how the image appears in your posting. You can optionally give the image a title, which appears as a bold caption in the post. The "description" appears as part of the caption in normal text. Both the title and description appear when you hover over the image. The title and description you use here are independent of the title and body on the image page.
Under "Size", you can select "Thumbnail" or a larger "Preview" size. Selecting "Other" displays additional fields, letting you specify the height and width in pixels.
Under "Link", the options are "Not a link", "Link to image page", "Open in popup window", or "Go to URL", which displays an additional field, allowing you to enter a custom URL.
The URL field starts with http://, but the address must be relative to http://fold.it/portal. Remove the http:// if you're using this method. Due to the address restrictions, this method has limited usefulness on the Foldit website.
Under "Insert mode", the options are "Filter tag", which inserts simplified markup, or "HTML code", which inserts complete HTML markup. The filter tag markup is somewhat similar to (but not the same as) wiki markup, and is usually easier to deal with.
Step 6 - Markup inserted
When you complete the steps, you'll see either filter tag or HTML markup inserted into your post. You can move this text to a different spot as needed. You can also adjust the size and other settings as needed.
For thumbnails and previews, the image is scaled, keeping it's original aspect ratio (width to height). The markup contains the scaled pixel dimensions.
For example, the original image in the examples below is 849 x 376, an aspect ratio of 2.25. The Thumbnail option scales it to 200 x 88, an aspect ratio of 2.27. The preview option scales it to 640 x 283, an aspect ratio of 2.26. You can adjust width and height as desired, but keep the aspect ratio (width divided by height) in mind to avoid squashed or stretched images.
The "nid" value is the "node id" of the image page, effectively the URL. For example, nid 2005203 becomes https://fold.it/portal/node/2005211.
The "link" value can be "none", meaning that clicking on the image does nothing. A value of "node" links to the image page. A value of "popup" opens the image in a new browser window, which is useful for thumbnails or if the original image is very large. A value of "url" links the address specified by the "url" parameter, relative to http://fold.it/portal. For example "url=filter/tips" links to http://fold.it/portal/filter/tips.
Controlling text wrap
Depending on the size and positioning on a image, text can wrap around one side or another.
For this posting, using a br tag followed by an h2 tag minimized problems with text wrap, for example:
<br clear="all"/> <h2>sample heading</h2>
Each one of the steps above has its own h2 tag.
Adding the p to open a paragraph and including the paragraph closing tag can help with any remaining text wrap issues, for example:
<p> Each new image gets its own page on the Foldit website, separate from where it appears in a forum or feedback post. The first step is to click the "Browse" button, which opens a "file open" dialog. </p>
Filter tag markup
Here are some examples of the filter tag markup for images. This markup was used for the samples seen in step 6.
There doesn't seem to be a good way to "escape" or "quote" these tags, so a picture is used instead of words.