1 reply [Last post]
LociOiling's picture
User offline. Last seen 1 hour 25 min ago. Offline
Joined: 12/27/2012
Groups: Beta Folders

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.

The Add Image icon in a feedback postThe Add Image icon in a feedback post

Step 2 - browse/upload images

This window allows you to upload a new image, or select an existing image. Clicking on the "Upload" button opens another new dialog.
Browse/upload images dialogBrowse/upload images dialog

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.

Add image page dialogAdd image page dialog

Step 3b - File open dialog

This dialog lets you select the image file to upload.
Image file open dialogImage 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.

The next dialog you see concerns how the image appears in your feedback, forum post, or image comment.
Add image page dialog completionAdd image page dialog completion

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.

Image insertion dialog: This dialog controls how the image appears in your post.Image insertion dialog: This dialog controls how the image appears in your post.

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.

Image markup inserted: Thumbnail, link to image pageImage markup inserted: Thumbnail, link to image page
Image markup inserted: Preview, link to image pageImage markup inserted: Preview, link to image page
Image markup inserted: Thumbnail, no linkImage markup inserted: Thumbnail, no link
Image markup inserted: Thumbnail, link to fold.itImage markup inserted: Thumbnail, link to fold.it
Image markup inserted: Thumbnail, open in popupImage markup inserted: Thumbnail, open in popup
Image markup inserted: Thumbnail, no linkImage markup inserted: Thumbnail, no link

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.

Filter tag markup for images: markup for examples in step 6Filter tag markup for images: markup for examples in step 6

LociOiling's picture
User offline. Last seen 1 hour 25 min ago. Offline
Joined: 12/27/2012
Groups: Beta Folders
Code for image links...

After some further experimentation, changing the "img assist" keyword a bit let me include the code.

In these examples, it's img-dash-assist, change it to img-underscore-assist to use in a post.

These are the examples from Step 6 in the previous post.


[img-assist|nid=2005216|title=Image markup inserted|desc=Thumbnail, link to image page|link=node|align=left|width=200|height=88]
[img-assist|nid=2005216|title=Image markup inserted|desc=Preview, link to image page|link=node|align=left|width=640|height=283]
[img-assist|nid=2005216|title=Image markup inserted|desc=Thumbnail, no link |link=none|align=left|width=200|height=88]
[img-assist|nid=2005216|title=Image markup inserted|desc=Thumbnail, link to fold.it|link=url|url=filter/tips|align=left|width=200|height=88]
[img-assist|nid=2005216|title=Image markup inserted|desc=Thumbnail, open in popup|link=popup|align=left|width=200|height=88]
[img-assist|nid=2005216|title=Image markup inserted|desc=Thumbnail, no
link|link=none|align=left|width=200|height=88]

Sitemap

Developed by: UW Center for Game Science, UW Institute for Protein Design, Northeastern University, Vanderbilt University Meiler Lab, UC Davis
Supported by: DARPA, NSF, NIH, HHMI, Amazon, Microsoft, Adobe, RosettaCommons