The following 178 words could not be found in the dictionary of 1150 words (including 1150 LocalSpellingWords) and are highlighted below:
adversely   again   alarm   align   aligned   aligning   Alignment   Alternatively   argument   around   attachment   Attachments   automatically   Baseline   baseline   Basic   because   being   between   big   bit   blank   Borrowing   both   bottom   But   but   button   Button   can   careful   case   chair   clicks   clock   codes   combined   described   description   display   does   don   double   duckie   effect   either   eliminate   enlarged   even   exactly   example   examples   external   find   fine   fish   flow   flows   following   For   for   from   generate   get   gets   Getting   global   Grand   graphic   height   hover   However   html4   if   If   image   images   Images   including   inline   into   jpg   just   large   layout   left   like   link   little   ll   look   middle   might   mouse   name   necessarily   need   new   Notice   odd   old   on   On   once   only   open   Optionally   Or   or   original   over   paragraph   paragraphs   part   perfectly   pineapple   pipe   placing   playing   plop   png   positioned   preview   proportion   put   question   raw   reader   relative   rendered   replace   right   scale   second   section   see   Simply   simply   small   so   source   specify   stagger   start   struct   take   target   Tetons   text   that   then   Then   they   This   this   Thumbnail   thumbnail   tiny   to   top   upload   use   uses   Using   using   valid   want   what   when   where   Wherever   width   will   window   with   With   within   Working  

Clear message
Locked History Actions Discussion

HelpOnImages

Working With Images

Basic

If you just want to get an image on a page, simply upload the image file (using the 'Attachments' link). Then use  {{attachment:image-name.png}}  (where image-name.png is the name of your file). Wherever you plop that code is where the image will be. If you put it within a paragraph, it will be part of the flow of the paragraph. For tiny images, this might be fine, but be careful with big images, or your page will look odd.

For example, if you put large image  {{attachment:duckie.png}} into the middle of a paragraph, like this [ATTACH] , then that's exactly what you'll get. However, be careful, because as you can see, the graphic can adversely effect your paragraph layout. But, a small image, like this fish [[ATTACH]], does not.

Page Alignment

[ATTACH]

[ATTACH]

This example uses a chair image that's aligned left. Notice that paragraph text flows around it, so you can (for example) stagger images on the page. Here is the code:  {{attachment:chair.jpg||align="left"}} 

This example uses a clock image that's aligned right. Notice that text flows around it. Here is the code:  {{attachment:clock.jpg||align="right"}} 

Getting the image positioned on the page (and relative to your paragraphs) will take a bit of playing. I find placing the image-code above the paragraph gets it aligned perfectly with the paragraph in question. If you view the source of this page, you'll see that I have both image-codes at the start of this section.

Baseline Alignment

Using a pineapple can as an example, the following are examples of aligning an image on inline within the text baseline:

This is top: [ATTACH]

 {{attachment:pineapple.jpg||align="top"}} 

This is middle: [ATTACH]

 {{attachment:pineapple.jpg||align="middle"}} 

This is bottom: [ATTACH]

 {{attachment:pineapple.jpg||align="bottom"}} 

Here's an example of using an image as a button. Or, in this case, a button as a button. [ATTACH] As you can see from the example code, this link will open in a new window. If you don't need it to, simply eliminate the |target="_blank" part. Alternatively, you can even replace the HelpOnEditing part with any valid link, including external URL's.
 [[HelpOnEditing|{{attachment:button.png}}|target="_blank"]] 

Thumbnail of an Image

If you have a large image that you don't necessarily want/need to display at once, create a thumbnail preview. When the reader clicks the image, they'll get the original enlarged version. You only need to specify either width or height, and the image will automatically scale in proportion.

  • [ATTACH]

The code:  [[attachment:Grand_Tetons.jpg|{{attachment:Grand_Tetons.jpg||width=100}}]] 

[ATTACH]

Title Text

Optionally, you may add an title text to any image link, and it will display when you hover the mouse over the image (the image being rendered or not). To do so, simply put the text in the second argument:  {{attachment:fish.jpg|A little tiny fish!}}  to generate [ATTACH].

Title Text can be combined with any of the examples described on this page. Simply put it between the double pipe (||) in the link. Borrowing from the example above, here is the clock again with an added description:  {{attachment:clock.jpg|old alarm clock|align="right"}}