Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

This section covers adding images to your website.

Drupal does not provide an image editing capabilities. So all the work of editing images (cropping, resizing, saving images to the correct format) needs be done in Adobe Photoshop, which is software provided by ITS, or another photo editor of your choice. There are several online photo editors which you can also use such as Canva or Pixlr.

6.1) Adding a Primary Image

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

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

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 Panes

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

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

  • No labels