Jump to content

Images

From Swarthmore Knowledge Base
← Return to the Drupal User Guide

This section covers adding images to your website. Swarthmore webpages are set up to allow editors to quickly and easily add an image at the top of any 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 within the body copy of a page. This option involves a few more steps, but it allows editors to place images anywhere within the body content.

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

Website homepages also provide additional layout options, including the ability to display two images or a large full-span image.

Alt Text is Required
All images added to the website must include alt text.

Alt text is a written description of an image. It is displayed when an image cannot be loaded and is essential for visitors using assistive technologies such as screen readers, those browsing with images disabled, or those with limited bandwidth.

The WCAG Alt Decision Tree is a useful resource for deciding whether an image requires alt text and what that description should include. Think about how the image relates to the surrounding content. If it adds meaning or improves understanding, it should include meaningful alt text.

Writing effective alt text is a skill. One helpful approach is to imagine describing the image to someone over the phone so they understand both what it shows and why it is included. For additional guidance and examples, see Alt Text as Poetry.


Image Editing
Drupal does not include built-in image editing tools. Any cropping, resizing, color correction, or file format conversion should be completed before uploading the image. You can use software such as Adobe Photoshop or free online editors like Canva or Pixlr.


6.1 Adding a Primary Image

  1. The Primary Image field is located below the Title and Subtitle fields and above the Body field. This is where editors add an image that appears at the top of the webpage.
  2. Click the Insert an Image button. A window titled Insert an Image will appear.
Screenshot showing the Primary Image field and the Insert an Image button.
Figure: The Primary Image field is located above the Body field.
  1. In the Insert an Image window, select Upload Image to upload a new image or Select Image to choose an image that has already been uploaded to the site's image library.
  2. Select the appropriate image using the radio button to its left.
  3. Click the Select Image button in the lower-left corner.
Screenshot of the Insert an Image dialog showing the Upload Image and Select Image options.
Figure: Select an existing image or upload a new one.
  1. A thumbnail preview will now appear. Whenever you add an image to a webpage, you must include alternative text.
  2. Under Image Alignment, choose one of the following options:
    1. Centered Above Content — Best for large landscape images. The image is displayed above the body content.
    2. Floating Right — Best for portrait or smaller images. The image is displayed to the right of the body content and the text wraps around it. If a large landscape image is used, Drupal automatically scales it down before wrapping the text.

Centered Above Content

Example of a centered primary image displayed above the page content.
Figure: Centered Above Content image alignment.

Floating Right

Example of a primary image using the Floating Right alignment.
Figure: Floating Right image alignment.
  1. Optionally, add an image caption to provide additional context for readers.
Screenshot showing the image caption field for a primary image.
Figure: An optional caption can be added beneath the primary image.

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_body1.png

  1. 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.
  2. Select the appropriate image from the list using the radio button to the left.
  3. Then click the Select Image button located in the lower left corner.

f71d702b-60d2-4865-91e9-41f58da0e6a3.png

  1. The image will now appear in the body copy
  2. Use the function bar at the top to manage the image properties (see more below)

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

control1.png

  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.

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

caption_toggle.png

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

image_link.png

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

caption_options1.png

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

grey_image1.png

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

clear.png

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:

One Images Aligned Left

single_image_left.png Two Images Aligned Right

double_image_right2.png Full-Span Image

full_span_image1.png 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.

header_image_menu1.png

6.4) 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

Image Type Retina (WxH) Standard (WxH) Preferred Ratio Preferred Orientation
Homepage - Single Image 1756 x 1170 878 x 585 3:2, 16:9 landscape
Homepage - Double Image (Front) 1056 x 704 528 x 352 3:2, 16:9 landscape
Homepage - Double Image (Rear) 880 x 662 440 x 331 3:2, 16:9 landscape
Homepage - Full Width 3500 x 1360 1750 x 680 custom landscape
Standard Page 1524 x 940 762 x 470 3:2, 16:9 landscape

Recommended Sizes for Components

Image Type Retina (WxH) Standard (WxH) Preferred Ratio Preferred Orientation
Feature 1530 x 1046 765 x 523 landscape
Feature Link List 1300 x 858 650 x 429 landscape
Image Slider (Slideshow) 1600 x 1000 800 x 500 8:5 landscape
Image Slider (Gallery Thumbnails) 720 x 476 360 x 238 16:9 landscape
Media Object List 960 x 600 480 x 300 8:5 landscape
Multi-Column Callout 600 x 600 300 x 300 1:1 landscape
Image Callout 1560 x 1040 780 x 520 landscape
Full Width Callout 3500 x 1240 1750 x 620 custom landscape
Callout on Image 1300 x 900 650 x 450 3:2, 16:9 landscape
Feature Story Callout (Left) 1530 x 1046 765 x 523 3:2 landscape
Feature Story Callout (Right) 1070 x 698 535 x 349 3:2 landscape
Audio (Thumbnail) 298 x 298 149 x 149 1:1 square
Ambient Video (Fallback Image) 3500 x 1464 1750 x 732 custom landscape

Recommended Sizes for Profiles

Image Type Retina (WxH) Standard (WxH) Preferred Ratio Preferred Orientation
Profile Headshot 372 x 466 186 x 233 4:5 portrait

Recommended Sizes for News and Events Pages & Thumbnails

Image Type Retina (WxH) Standard (WxH) Preferred Ratio Preferred Orientation
News Page (Standard) - - - -
News Page (Featured) 2880 x 1266 1440 x 633 16:9, 3:2 landscape
News Feed Pane (Standard Thumbnail) 560 x 320 280 x 160 16:9, 3:2 landscape
News Feed Pane (Featured Thumbnail) 1760 x 960 880 x 480 16:9, 3:2 landscape
News Feed Pane (Full Page Listing) 840 x 480 420 x 240 16:9, 3:2 landscape
Events Feed Pane (Thumbnail) 840 x 532 420 x 335 16:9, 3:2 landscape
Events Feed Pane (Full Page Listing) 840 x 670 420 x 335 16:9, 3:1 landscape


Retrieved from "https://kb.swarthmore.edu/index.php?title=Images&oldid=3580"