Page Comparison

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”.

Image Added

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.

Image Added

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.

Image Added

6.2) Adding an Image in the Body Copy

You can also choose to add images directly in the body copy rather than using the primary image located at the top of the page template. This process involves more steps, but allows you to position images closer next to the content that references it.

1. Put your cursor where you want the image to appear in the body copy

2. Click the Add Image using image browser button

Image Added

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.

Image Added

6. The image will now appear in the body copy

7. Use the function bar at the top to manage the image properties (see more below)

Image Added

The Insert image in body copy function bar has several abilities:

Image Added

1. Manage Alt Text / Decorative Image - This menu item allows you to add alternate text to the image. All images require alt text in order meet Swarthmore’s accessibility standards. Alt text is a description of what is happening in the image. You can also indicate if the image is purely decorative. Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

2. Toggle Caption On/Off - Toggles the image caption field to appear or disappear so that you can include a caption to provide context of the image to the reader.

   Image Added

3. Image Link - allows you make the image a link. Learn more about how links work.

Image Added

4. Standard Image Alignment Caption - allows you to manage the standard alignment options for captions. These include:

• Caption Below - the image will remain full size and centered. The caption will appear below.

• Caption Right - the image will remain full size and floated left. The caption will appear to the right.

• Image Floated Left Caption Below - the image will be reduced 50% and floated left. The caption will appear below. The body copy will wrap around both image and caption.

• Image Floated Right Caption Below - the image will be reduced 50% and floated right. The caption will appear below. The body copy will wrap around both image and caption.

Image Added

5. Gray Image Background Captions - creates a gray background around the image and caption.

• Gray image background / Image Centered - the image will remain full size and centered. The caption will appear below.

• Gray image background / Image Floated Left Caption Below - the image will be reduced 50% and floated left. The caption will appear below. The body copy will wrap around both image and caption.

• Gray image background / Image Floated Right Caption Below - the image will be reduced 50% and floated right. The caption will appear below. The body copy will wrap around both image and caption.

Image Added

6. Clear Styles - this will clear any caption styles and return it to image centered, no caption.

Image Added

6.3) Homepage Images

The homepage is unique in that it allows editors some additional header image layout options. These include:

1. One or Two Images aligned left - you can include either a single image or two images (one stacked on top of the other) aligned left of the website title

2. One or Two Images aligned right - you can include either a single image or two images (one stacked on top of the other) aligned right of the website title

3. Full-Span Image - a single full image that spans the full width of the page. The page title is overlaid on top of the image in the lower left corner.

Examples:

The homepage header layout of the homepage managed by editing the homepage.

1. A drop down that lets you select layout

2. This toggle will add a slightly opaque filter on top of the Full Span Image (only) that improves legibility of the Page title which is overlaid on top of the image in the lower left corner.

3. Allows you add a new (or second) image to the header area

4. Displays the current image, alt text. Allows you to replace the existing image or remove it

5. When updating the image, you can save the page in DRAFT or PUBLISHED mode

6. Click Save to commit your changes or Cancel to stop.
   

Image Added

6.3) Recommended Image Sizes

The following image style guide shows you the recommended image sizes that should be used for all pages and components.

Recommended Sizes for Header Images

Recommended Sizes for Panes

Recommended Sizes for Profiles

Recommended Sizes for News and Events Pages & Thumbnails