By far the simplest way to add photos to an article is through the Images command at the top. For this you have to submit the text message first, only then you can add photos with the Images command. Images automatically scales down the photos, so you don't have to worry about that either. And it automatically creates an image gallery.

Note: To use the alternative image embedding method described below, you have to have sufficient rights to select at least the input format "Partly HTML".

If the Images command does not suffice, you can put inline images into posted messages. The rest of this message deals only with that more complicated method.

Simplest method, not requiring the creation of thumbnails

Here is the simplest method to add a small number of clickable pictures to a message. This procedure saves you from having to produce a thumbnail image for each picture. However, this method is unsuitable for larger numbers of pictures because of excessive page load times.

1. Enter or edit the message text and set the "Input format" to "Partly HTML". If you don't have the right to do that, you cannot add pictures this way.
2. Upload the pictures as attachments. Avoid spaces and special characters in the filename, particularly characters like & or '.
3. At the top of the message or wherever you like between two paragraphs copy the following code without any line breaks. Then replace PICTUREFILENAME with the filename of the image (Note that it occurs twice) and replace CAPTION with some short, descriptive text for the picture.

   If you scroll down to the attached images, you can see a similar string displayed underneath each attachment. You can copy the filename from there. The complete string to insert should always begin with: /sites/

   <a href="/sites/elephanttrust.org/files/PICTUREFILENAME"><img src="/sites/elephanttrust.org/files/PICTUREFILENAME" alt="CAPTION" height="150" /></a>

   Here's a complete example, assuming the name of the picture attachment file is imagefilename.jpg:

   <a href="/sites/elephanttrust.org/files/imagefilename.jpg"><img src="/sites/elephanttrust.org/files/imagefilename.jpg" alt="Picture example" height="150" /></a>

The result will look like this:



4. Click on the [Save] button at the bottom.
5. Repeat this same procedure for each picture. If you want the next picture beside the previous one, insert one space, no newline, then the code for the next picture.

Optional refinements

All of the following refinements consist of additional attributes in the inner <img …/> tag. So far you have the attributes alt="…" and height="150", but you can add additional ones. You can add them between these two or between the height attribute and the closing />, but make sure all attributes are separated from each other by a space.

• A simple refinement is to repeat the alt="CAPTION" part once again, but change alt to title. This displays the CAPTION text in some browsers like Firefox when the user lets the mouse pointer hover over the image. (Internet Explorer does that with the alt text already, which is not quite correct.) You should use the very same CAPTION in both attributes, because otherwise the display would be different in the different browsers.

Note: You can only use one of the following style attributes, never two or more at the same time.

• Add the attribute style="text-align: center" to center the image.
• Add the attribute style="float:left; margin-right: 0.5em" to have the picture float on the left side with the text flowing around it on its right.
• Add the attribute style="float:right; margin-left: 0.2em" to have the picture float on the right side with the text flowing around it on its left.

Technical background: Why is the margin different? Because we have left-justified text with a ragged right edge, so the average distance from the image will be much larger anyway, and we can tolerate the occasional line protruding very close to the image.

More elaborate methods requiring the creation of separate thumbnail images

First you have to upload the images as attachments to the message. You can later suppress their listing, if you like, by removing the check marks from the "List" checkboxes.

Then you have to use a little bit of HTML code to embed the image, which is not too difficult.

Note: The Input format must be set to Partly HTML, otherwise the pictures will not be visible.

You have to create a smaller picture for the web site. This makes the arrangement in the text look nice and saves everyone watching the picture a lot of download time.

If you want to have a clickable, enlargeable picture and haven't used the Images command, you need to create a somewhat larger picture on your computer as well, which you also have to attach to the message. Never upload the full-sized picture from the camera, which is far too big for a web site image. (Note: This does not hold for the Images command, which resizes pictures automatically, but which we normally cannot use for embedding pictures in the text.)

You can create smaller pictures for example with IrfanView, using the following commands:

1. Image
2. Resize
3. Set new size
4. Enter an appropriate size. For a thumbnail-sized picture enter a height of 120 pixels. For a normal-sized, embedded picture, called up in the <img src="..." ...> tag, enter a width of 360 pixels or less. For a big display picture, called up in the <a href="..."> tag, enter 800 pixels or less for the longer side.
5. Size method: Resample
6. Resampe filter: Lanczos
7. OK
8. File
9. Save as
10. Enter file name
11. File type: JPG
12. JPEG/GIF save options, JPEG: Save quality: 60
13. Save

Other photo processing or retouching programs can do it just as well.

To use the examples below, you can copy the HTML code into your message and then replace imagefilename and Caption with your desired filename and text.

You could use the "Images" command to upload the pictures, but that has the disadvantage that the embedded pictures show up a second time at the top of the article. If you want to use the Images command anyway, the image path can be copied from the display next to the image in the edit display. It looks similar to: sites/elephanttrust.org/files/images/imagefilename.jpg

In that case the thumbnail pictures are already in the same path/folder, named like: imagefilename_tn.jpg

Avoid putting a picture before the first text paragraph in a message, because the beginning of the text is automatically used as the teaser text for the abbreviated version of the message. If you do this, have a good look at the preview, before you actually post.

Remarks for the following examples

1. After you copy the code of the following examples, of course you have to replace the file names of the image files with your actual file names.
2. You also have to replace "Caption" with your desired caption text, the same in up to three places per picture.

Simple image

A simple example for an image is this:

The code for this is:

<img src="/sites/elephanttrust.org/files/imagefilename_tn.jpg" alt="Caption"/>

Centered image with frame

A slightly more elaborate example is:

Caption

The code for this is:

<p style="text-align: center; font-size: smaller"><img src="/sites/elephanttrust.org/files/imagefilename_tn.jpg" alt="Caption" title="Caption" style="border: 1px solid black" /><br />Caption</p>

Clickable, enlargeable picture

If you want to drive it to absolute perfection, you can make the picture clickable to open a larger version of the same picture and give the small one a blue frame to indicate that it's a clickable link:

Caption

The code for this is:

<p style="text-align: center; font-size: smaller"><a href="/sites/elephanttrust.org/files/imagefilename.jpg"><img src="/sites/elephanttrust.org/files/imagefilename_tn.jpg" alt="Caption" title="Caption" style="border: 2px solid blue" /></a><br />Caption</p>

A floating, clickable, enlargeable picture

Caption

It is also possible to have pictures float left or right with the text flowing around them. This is an example for a picture that floats right.

If you want it to float left, in the HTML code change float: right to float: left and change padding-left to padding-right, which creates a little distance between the text and the picture.

The picture code has to be entered before the text that flows around it:

<p style="float: right; text-align: center; font-size: smaller; padding-top: 1em; padding-left: 0.5em"><a href="/sites/elephanttrust.org/files/imagefilename.jpg"><img src="/sites/elephanttrust.org/files/imagefilename_tn.jpg" alt="Caption" title="Caption" style="border: 2px solid blue" /></a><br />Caption</p>

Technical details

The <p ...> tag is required for centering or for floating with a caption underneath the picture.

The alt= attribute is required in every <img ...> tag. It displays as text before the image is loaded or if the image cannot be loaded. On some browsers, like the Internet Explorer, it also creates a pop-up when the mouse pointer hovers over the picture.

The title= attribute has text that pops up in some other browsers, like Firefox, when the mouse pointer hovers over the picture. Of course, the alt and title attributes should contain the very same text, unless you want different browsers to display different texts.

The text Caption shows underneath the picture.

In fact, you could use one caption underneath the picture and some other one in the alt and title attributes for the mouse hover pop-up. Or you could leave out the <br />Caption and rely on the mouse hover text alone.

The padding-top style is only there to align the picture with the top of the flowing text, because the text paragraphs have an automatic top margin. This is not essential, only a slight question of typographic beauty. Do not use margin instead of padding here, because that causes certain problems in Internet Explorer.

If you try these codes and they don't work, post the message anyway, then ask your friendly admin for help.