How to display images inside a page

To display an image in a page, first you need to upload it. Check out the instructions for uploading files.

Here are the rules of thumb for where you should place images:

• Logos, banners, icons and decorative images for pages should be placed in the Site images fileshare. These kinds of things are generally reused, so placing them here will allow that.
• One-use decorative images, such as a photo of people sitting around a table, used to give context or decoration to a page can either be placed in the Site images fileshare or as an attachment. These kinds of images are generally only used once.
• Full resolution photographs, should not be placed in the site images fileshare, because it would become unusable with thousands of digital camera images uploaded there. These are better placed in the photo gallery. Don't forget, you should never place a full sized, high-resolution photo in a page, because it will make the page very slow to load. Please create small web-friendly size using photoshop or an online image editing too.

Ok, so how do you make an image appear in a page? This is accomplished through the tag
<img src="" alt="">

To use this tag, find the link for image you have just uploaded and paste it inside the src (source) attribute of the image tag thus:

<img src="/files/images/SGAC_small.png" alt="">

which will display

What is the "alt" part for? That is alternate text that is displayed when the image is unavailable, the user has images turned off, or they are using a text-only browser. This is required under web design guidelines, and we should put it in. An example is

<img src="/MISTAKE/images/SGAC_small.png" alt="SGAC">

Since the folder "MISTAKE" does not exist, the image will not show and instead we will see:

Or, with a correct link,

.

we can wave our mouse over the image and see the alt text.

Letting the text flow around images

Sometimes it is nice to let the text flow around an image, like a magazine. This can make pages look a lot nicer, and it is easy to do. Just add a class attribute to the img tag, with one of three classes:

• picture
• picture-left
• picture-right (the same as "picture", but defined for clarity)

For example,
<img src="/files/images/SGAC_small.png" alt="SGAC" class="picture">

<img src="/files/images/SGAC_small.png" alt="SGAC" class="picture-left">

<img src="/files/images/SGAC_small.png" alt="SGAC" class="picture-right">

Let show some examples:

Use of the "picture" class

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Use of the "picture-right" class

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Use of the "picture-left" class

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?