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 |
|---|---|---|---|---|
1756 x 1170 | 878 x 585 | 3:2, 16:9 | landscape | |
1056 x 704 | 528 x 352 | 3:2, 16:9 | landscape | |
880 x 662 | 440 x 331 | 3:2, 16:9 | landscape | |
3500 x 1360 | 1750 x 680 | custom | landscape | |
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 |
|---|---|---|---|---|
1530 x 1046 | 765 x 523 | landscape | ||
1300 x 858 | 650 x 429 | landscape | ||
1600 x 1000 | 800 x 500 | 8:5 | landscape | |
720 x 476 | 360 x 238 | 16:9 | landscape | |
600 x 600 | 300 x 300 | 1:1 | landscape | |
1560 x 1040 | 780 x 520 | landscape | ||
3500 x 1240 | 1750 x 620 | custom | landscape | |
1300 x 900 | 650 x 450 | 3:2, 16:9 | landscape | |
1530 x 1046 | 765 x 523 | 3:2 | landscape | |
1070 x 698 | 535 x 349 | 3:2 | landscape | |
298 x 298 | 149 x 149 | 1:1 | square | |
3500 x 1464 | 1750 x 732 | custom | landscape |
Recommended Sizes for Profiles
Image Type | Retina (WxH) | Standard (WxH) | Preferred Ratio | Preferred Orientation |
|---|---|---|---|---|
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 |
|---|---|---|---|---|
- | - | - | - | |
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 |
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 |
