Images

This section covers adding images to your website. Swarthmore webpage are setup to allow editors to quickly and easily add a image at the top of any given webpage. This location is called the Primary Image and is the most common method for adding images to a webpage.,

Editors can also choose to add an image in the body copy region of the page. This option involves a few more steps, but it allows editors to add images at any location with the body copy block.

Images can also be added through one of the many components available to editors. This is covered in the Components section.

A website homepage’s also offers some additional options that include allowing editors the ability to include two images or a large full-span image.

6.1) Adding a Primary Image

1. The Primary Image that is located below Title/Subtitle and above Body block. This is where editors add images at the top of the webpage.

2. Click the Insert an Image button to begin. A new window will appear called “Insert an Image”.

3. In the Insert an Image window (see below), you can select Upload Image to upload a new image into Drupal or choose Select Image if you wish to use an image that has been previously uploaded into the website’s image folder.

4. Select the appropriate image from the list using the radio button to the left.

5. Then click the Select Image button located in the lower left corner.

6. A thumbnail will now appear in the Preview. Whenever you add an image to a webpage, you MUST INCLUDE alternative text.
   Learn more about alternate text.

7. In the Image Alignment drop down You can choose the image alignment as either Centered Above Content or Floating Right.
   
   Centered Above Content - is for large landscape images. It will display the image followed by the text which will always appear below the image.
   Floating Right - is often used for portrait/vertical images as well as smaller images. It will display the image to the right and the text in the Body block will wrap around the image. If the original image used is large landscape image, Drupal will automatically size it down 50% and wrap the text around it.
   

8. Add an optional image caption to provide further context about the image to readers.

6.2) Adding an Image in the Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

6.3) Homepage Images

6.3) Alt Text Requirement and Best Practices

Important Tip: Every image included on the website MUST include ALT text.

Alt Text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers.

6.4) Recommended Image Sizes

The following image style guide shows you the recommended image sizes that should be used.

Important Tip: All dimensions are in pixels (width x height). Photos should be saved in .jpg format using 70% compression.

Recommended Sizes for Header Images

Recommended Sizes for Panes

Recommended Sizes for Profiles

Recommended Sizes for News and Events Pages & Thumbnails