Embedding images

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.

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

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.

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.