Normally when you attach an image file, it simply shows up as a listed item, and people need to click it to see the image.

You CAN place the image into the story anywhere you like using some simple HTML:

<img src="/files_epicmain/filename.jpg">

Just place the filename starting with the "/files_epicmain" part into the src adress.

NOTES for the CURIOUS: 'img' stands for 'image'. 'src' stands for 'source'. Thus, we are specifying the source location of an image.

---

IMPORTANT TIP:
When you attach image files, you'll want to make sure they are sized correctly for the web!

Many graphics files are very large (500K or more, 1MB or more etc.). Any files bigger than 80K probably isn't right for the web site (maps and large star-charts not withstanding - they might be in the 100K-200K range).

Also, you'll probably want your images pixel sizes to be smaller than 400x400 pixels. Logos, book covers, etc. should be more in the 150x150 pixels range.

For reference: when working with Photoshop, Paintshop, and other graphics programs: the proper resolution for web images is 72dpi.

---

Getting Fancy with Images

We have several styles in the EPIConnection.org style sheet that will postion and wrap text around images. To use them, you add a 'class' attribute to your img tag, like this:

<img class="image-left" src="/files_epicmain/sample_book.jpg">

When you use the "image-left" class, the image will be positioned at the left of the text, and the text following it will wrap around the image. Like so:

Enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis? Quod mazim placerat facer possim assum typi non habent claritatem? Consequat duis autem vel eum iriure dolor in. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi.

Habent claritatem insitam est usus legentis in iis qui facit, eorum claritatem Investigationes demonstraverunt lectores. Ex ea commodo consequat duis autem vel eum iriure dolor in hendrerit in. Quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Assum typi non legere me lius quod ii legunt saepius claritas est etiam. Facer possim processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera.

If you use the "image-right" class, the image will be positioned to the right with text wrapping around. So:

<img class="image-right" src="/files_epicmain/sample_book.jpg">

will display:

Enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis? Quod mazim placerat facer possim assum typi non habent claritatem? Consequat duis autem vel eum iriure dolor in. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi.

Habent claritatem insitam est usus legentis in iis qui facit, eorum claritatem Investigationes demonstraverunt lectores. Ex ea commodo consequat duis autem vel eum iriure dolor in hendrerit in. Quinta decima eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in. Assum typi non legere me lius quod ii legunt saepius claritas est etiam. Facer possim processus dynamicus qui sequitur mutationem consuetudium lectorum mirum est notare quam littera.